网上的面试题集很多。有些面试题集很零碎，刷完后，也没太大用。有些面试题集数量太大，没有重点，根本刷不完。
本文精选了一些核心的夯实基础的面试题。选面试题时，兼顾了数量和质量。本文具体包含内容 HTML，CSS，JavaScript，DOM，BOM 和 网络知识。
HTML
新增了结构标签: article, aside, header, footer, hgroup 等。多媒体标签: audio, video 等。表单标签: datalist, output等。
标签的语义见: www.runoob.com/html/html5-…
标签语义化指：写 HTML 选标签时，选择语义上合适的标签。反例：通篇 div 一把梭。
标签语义化的好处：
- 利于开发者理解 HTML。标签语义化的代码可读性好，易于维护。
- 利于机器理解 HTML。有利于 SEO(搜索引擎优化)。有利于盲人屏幕阅读器的解析。
DOCTYPE 是 HTML 的文档类型声明。浏览器根据文档类型来决定该用何种渲染模式来渲染页面。渲染模式包括：怪癖模式（quirks mode），准标准模式（almost standards mode）和标准模式（standards mode）。不同模式的不同主要在CSS 方面，如 盒模型的处理，垂直方向的默认对齐方式等。
标准模式的文档类型声明写法：
<!DOCTYPE html>
CSS
选择器
优先级从高到低: !important > 内联样式 > ID 选择器 > 类名选择器，属性选择器，伪类选择器 > 标签选择器 > *(通用选择器) > 继承的样式 > 浏览器默认样式。
优先级相同的样式，在源码中后面出现的会覆盖前面出现的。
- 右侧的选择器放执行效率高的选择器。因为浏览器是从右往左匹配选择器的。因此，Google 资深web开发工程师 Steve Souders 对 CSS 选择器的执行效率从高到低做了一个排序：id 选择器 > 类选择器 > 标签选择器 > 相邻选择器 > 子选择器 > 后代选择器 > 通配符选择器。
- 选择器尽可能少。多个选择器，就多个匹配的过程。如用
.block-item而不是.block .item。
根据上面 2 条规则，具体来说：避免使用通用选择器。避免使用多层标签选择器。避免使用标签 或 类选择器 限制 id 选择器。避免使用标签选择器 限制 类选择器。
样式规则
font 相关的属性(font-family, font-size 等), color, text-align, cursor, visibility 等。
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-multi {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 行数 */
}
相同点：背景图会保持原图的宽高比例，不会拉伸。
不同点：contain 会在容器中，把背景图显示全。cover 会用背景图撑满容器，背景图可能不显示全。
设置 visibility: hidden 会隐藏元素。但是其位置还存在与页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘。
设置 display: none 会隐藏元素。且其位置不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘。
设置 opacity: 0 会隐藏元素。但其位置也在页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘。
opacity 让整个元素透明度是 0.5。
background: rgba(0, 0, 0, .5) 只是背景色的透明度是 0.5。
硬件加速指用 GPU 来渲染元素。硬件加速能让动画更流畅。
触发硬件加速方式，设置: transform: translateZ(0);。
布局
见:说说你对CSS盒模型的理解?
块级元素宽度默认撑满父元素，占一行。
行内元素。多个行内元素会显示在一行(宽度够的情况下)。行内元素设置宽度无效。设置上下的 margin 无效，左右有效。
行内块级元素的部分特性和块级元素一样，部分特性和行内元素一样。能设置高度。多个能显示在一行。
BFC 是块级格式化上下文，简单的来说，BFC就是创建一个盒子，盒子内部的元素布局不影响盒子外部的元素。
使用场景:
- 解决垂直方向 margin 重叠。
- 避免浮动元素父元素塌陷。
- 解决文本不环绕浮动元素。
见：哪吒闹海，席卷图文学习前端Flex布局
绝对定位元素根据更加离它最近的 position 不为 static 的父元素来定位。
.elem {
left: 50%;
transform: translateX(-50%);
}
static, relative, absolute, fixed, sticky。
- 如果在同一个堆叠上下文中进行比较，则直接按照堆叠层级的7条规则进行比较。
- 如果不在同一个堆叠上下文（如 A 元素与 B 元素的父级元素在同一个堆叠上下文或 A、B 元素的父级元素在同一个堆叠上下文），则向上找父级元素，直接找到它们在同一个堆叠上下文，再按照堆叠层级的7条规则进行比较。
详细: layout.imweb.io/article/z-i…
子元素 Portal 到容器上级元素里。
响应式
- 设置 viewport。
<meta name="viewport" content="width=device-width, initial-scale=1" />。 - 需要做响应式处理的地方用 媒体查询(Media Queries) 配合 Flex 布局，以及rem，vw，vh 等单位。
在高清屏下，CSS 中的 1px 比较粗。常见的解决方案: 媒体查询 配合 高度是1px 的伪类元素，用 transform 来缩放。代码比较多，就不放了，网上搜下一大把。
用 vw 实现。
.block {
width: 100vw;
height: 100vw;
}
用 rem 实现。JS 监听页面初始化和页面窗口变化，设置 html 元素的字体大小，保证 1rem 的值是 宽度为 750px 设计稿里的 100px。
.block {
width: 7.5rem;
height: 7.5rem;
}
兼容性
- ios 滚动不流畅。 解决方法: 加样式
-webkit-overflow-scrolling: touch;。 - touch 事件点击穿透。解决方案: 用 fastClick.js这个库。
- 部分 Android 手机，border-radius:50% 不圆。解决方案: border-radius 用具体的px值。
- 低版本的 ios，日期转化有问题。
new Date('2020-11-12 00:00:00')是 NaN。解决方案: 把日期格式化成new Date('2020/11/12 00:00:00')。
使用新的 CSS 特性时，查询兼容性情况。该加浏览器前缀的加浏览器前缀(-webkit-, -moz 等)。
JavaScript
数据类型和操作符
区别在于比较两个值的数据类型不一样前，会不会做类型转化。 === 比较会， == 不会。
(3.555).toFixed(2) // => 3.56
false，null，undefined，0，空字符串，NaN。
用字符串自带的方法 str.trim() 或用正则 str.replace(/^\s*$/g,'') 。
function toCamel (str) {
if (!str) return
const res =
str.split('_')
.map((item, i) => {
if (i === 0) return item
return `${item.charAt(0).toUpperCase()}${item.substr(1)}`
}).join('')
return res
}
[...arguments]
forEach, map, filter, every, some, reduce 等。
function uniq (arr) {
const res = []
const exist = {}
arr.forEach(item => {
const { id } = item
if(exist[id]) {
return
}
exist[id] = true
res.push(item)
})
return res
}
Object.keys(obj).length === 0
或
try {
JSON.stringify(obj) === '{}'
} catch(e) {
// obj 存在属性循环引用时会报错。
}
用 for ... in
for (let key in obj) {
console.log(`${key}: ${obj[key]}`)
}
用 Object.keys
Object.keys(obj)
.forEach(key => `${key}: ${obj[key]}`)
基础语法
var 和 let 的作用域不同。var 是函数作用域，let 是块作用域。
见: 面试必会|闭包并不可怕
见: 彻底理解js中的this指向
把一个对象做为一个函数的原型对象。用 new 这个函数创建对象。访问对象上某个属性，如果在对象上找不到，会从对象的原型对象上找。如果原型对象上也找不到，会从原型对象的原型对象上找。这样不断的找下去。如果还是找不到，该对象的属性值为 undefined。
DOM
事件
事件捕获: 当一个事件触发后，它会从 Window 上触发，不断经过下级节点,直到目标节点。
事件冒泡: 事件发生在一个元素上后，它会不断往其上级节点触发。和事件捕获的路径正好相反。
会冒泡的事件有：click，dblclick，wheel，mousemove，input，keyup，keydown，scroll 等
阻止事件冒泡:
event.stopPropagation()
给父元素绑定事件，用来监听子元素的事件。只有能冒泡的事件才能做事件委托。
事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。
DOMContentLoaded 在 DOM 加载和解析好时触发。
window.onload 在样式表，脚本，图片等所有资源都加载好后才触发。
先触发 DOMContentLoaded，再触发 window.onload。
BOM
异步编程
能很好的解决多个异步顺序执行导致的回调地狱。
Generator。 async/await。
见:深入解析价值25k的蚂蚁金服异步串行面试题。
macro-task(宏任务)：定时器(setTimeout，setInterval)，用户交互事件等等。
micro-task(微任务)：Promise，process.nextTick。
同一层级下,微任务永远比宏任务先执行。从全局上下文退出前（全局的同步代码执行完毕后）,开始收集当前层级的微任务和宏任务，然后先清空微任务队列，再执行宏任务。
存储
数据传输方面: 在同源的 HTTP 请求中，会自动带上 Cookie 是数据。但不会带 storage 数据。
存储大小限制方面: storage 和 Cookie 都有存储大小的限制。但 storage 比 Cookie 能存的数据大得多，可以达到5M或更大。
有效期方面：localStorage 是数据一直有效。sessionStorage 关闭浏览器窗口前有效。Cookie 在设置的过期时间前有效。
满足如下条件的 url 才能读取 cookie:
- url 的 host 和 cookie 的 domain 属性值相同或者是 domain 的子域名。
- url 的路径与 cookie 的 path 属性值相同。
其他
节流指在一段时间内，只执行一次。用来控制事件发生的频率。如控制为 1秒 发生一次，甚至 1分钟 发生一次。例如：1分钟内，多次点击按钮提交表单，只有第一次点击有效。
防抖只执行最后一个被触发的，清除之前的异步任务。用来防止因事件触发次数过频繁，导致性能浪费。例如：窗口的 resize 事件，列表的 scroll 事件，输入框 input 事件，触发频繁很高，都可以用防抖来优化。
网络知识
见: HTTP灵魂之问，巩固你的 HTTP 知识体系
见: TCP协议灵魂之问，巩固你的网路底层基础
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！