网上的面试题集很多。有些面试题集很零碎，刷完后，也没太大用。有些面试题集数量太大，没有重点，根本刷不完。
本文精选了一些核心的夯实基础的面试题。选面试题时，兼顾了数量和质量。本文具体包含内容 HTML，CSS，JavaScript，DOM，BOM 和 网络知识。
HTML
说几个 HTML5 新增的标签？这些标签的语义是什么?
新增了结构标签: article, aside, header, footer, hgroup 等。多媒体标签: audio, video 等。表单标签: datalist, output等。
标签的语义见: www.runoob.com/html/html5-…
什么是标签语义化？标签语义化有什么好处？
标签语义化指：写 HTML 选标签时，选择语义上合适的标签。反例：通篇 div 一把梭。
标签语义化的好处：
- 利于开发者理解 HTML。标签语义化的代码可读性好，易于维护。
- 利于机器理解 HTML。有利于 SEO(搜索引擎优化)。有利于盲人屏幕阅读器的解析。
DOCTYPE 是什么？有什么用？
DOCTYPE 是 HTML 的文档类型声明。浏览器根据文档类型来决定该用何种渲染模式来渲染页面。渲染模式包括：怪癖模式（quirks mode），准标准模式（almost standards mode）和标准模式（standards mode）。不同模式的不同主要在CSS 方面，如 盒模型的处理，垂直方向的默认对齐方式等。
标准模式的文档类型声明写法：
<!DOCTYPE html>
复制代码CSS
选择器
样式生效的优先级是怎样的？
优先级从高到低: !important > 内联样式 > ID 选择器 > 类名选择器，属性选择器，伪类选择器 > 标签选择器 > *(通用选择器) > 继承的样式 > 浏览器默认样式。
优先级相同的样式，在源码中后面出现的会覆盖前面出现的。
如何提升 CSS 选择器性能？
- 右侧的选择器放执行效率高的选择器。因为浏览器是从右往左匹配选择器的。因此，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; /* 行数 */
}
复制代码background-size 的 contain, cover 的相同点和不同点什么？
相同点：背景图会保持原图的宽高比例，不会拉伸。
不同点：contain 会在容器中，把背景图显示全。cover 会用背景图撑满容器，背景图可能不显示全。
如何用 visibility, display，opacity 隐藏元素？有什么区别？
设置 visibility: hidden 会隐藏元素。但是其位置还存在与页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘。
设置 display: none 会隐藏元素。且其位置不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘。
设置 opacity: 0 会隐藏元素。但其位置也在页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘。
opacity: 0.5 和 background: rgba(0, 0, 0, .5) 有什么不同？
opacity 让整个元素透明度是 0.5。
background: rgba(0, 0, 0, .5) 只是背景色的透明度是 0.5。
硬件加速有什么用？如何触发硬件加速？
硬件加速指用 GPU 来渲染元素。硬件加速能让动画更流畅。
触发硬件加速方式，设置: transform: translateZ(0);。
布局
什么是盒模型? content-box 和 border-box 的区别是什么？
块级元素，行内元素，行内块级元素有什么区别？
块级元素宽度默认撑满父元素，占一行。
行内元素。多个行内元素会显示在一行(宽度够的情况下)。行内元素设置宽度无效。设置上下的 margin 无效，左右有效。
行内块级元素的部分特性和块级元素一样，部分特性和行内元素一样。能设置高度。多个能显示在一行。
什么是 BFC，有哪些使用场景？
BFC 是块级格式化上下文，简单的来说，BFC就是创建一个盒子，盒子内部的元素布局不影响盒子外部的元素。
使用场景:
- 解决垂直方向 margin 重叠。
- 避免浮动元素父元素塌陷。
- 解决文本不环绕浮动元素。
如何用 Flex 布局实现水平，垂直方向的 居中对齐，两端对齐？换多行显示？如何撑满容器的剩余部分？容器空间不够，如何缩小？
绝对定位的定位规则是怎样的？
绝对定位元素根据更加离它最近的 position 不为 static 的父元素来定位。
如何实现绝对定位元素的水平居中?
.elem {
left: 50%;
transform: translateX(-50%);
}
复制代码position 属性有哪些值？
static, relative, absolute, fixed, sticky。
两个元素有重叠部分，哪个显示在上面的规则是怎么样的？
- 如果在同一个堆叠上下文中进行比较，则直接按照堆叠层级的7条规则进行比较。
- 如果不在同一个堆叠上下文（如 A 元素与 B 元素的父级元素在同一个堆叠上下文或 A、B 元素的父级元素在同一个堆叠上下文），则向上找父级元素，直接找到它们在同一个堆叠上下文，再按照堆叠层级的7条规则进行比较。
详细: layout.imweb.io/article/z-i…
容器的 y 方向 overflow：auto。子元素要超出容器的 x方向怎么处理？
子元素 Portal 到容器上级元素里。
响应式
怎么做响应式布局？
- 设置 viewport。
<meta name="viewport" content="width=device-width, initial-scale=1" />。 - 需要做响应式处理的地方用 媒体查询(Media Queries) 配合 Flex 布局，以及rem，vw，vh 等单位。
如何适配移动端 1px 的问题?
在高清屏下，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
复制代码哪些值在 if 中是 false 的?
false，null，undefined，0，空字符串，NaN。
去掉字符串前后的空格?
用字符串自带的方法 str.trim() 或用正则 str.replace(/^\s*$/g,'') 。
实现：_风格的字符串改成驼峰的风格的字符串。如 hello_joel 改成 helloJoel。
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 如何转化成 数组？
[...arguments]
复制代码哪些数组方法会遍历数组?
forEach, map, filter, every, some, reduce 等。
去掉数组中 id 相同的。数组: [{id: 3}, {id: 4}, {id: 3}, {id: 5}]。
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 的作用域不同。var 是函数作用域，let 是块作用域。
什么是闭包？闭包有哪些使用场景？
见: 面试必会|闭包并不可怕
this 在五种场景（默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定）的指向是怎样的？
聊聊 JavaScript 的基于原型链的继承？
把一个对象做为一个函数的原型对象。用 new 这个函数创建对象。访问对象上某个属性，如果在对象上找不到，会从对象的原型对象上找。如果原型对象上也找不到，会从原型对象的原型对象上找。这样不断的找下去。如果还是找不到，该对象的属性值为 undefined。
DOM
事件
事件的冒泡和捕获是什么? 哪些事件会冒泡？如何阻止事件冒泡?
事件捕获: 当一个事件触发后，它会从 Window 上触发，不断经过下级节点,直到目标节点。
事件冒泡: 事件发生在一个元素上后，它会不断往其上级节点触发。和事件捕获的路径正好相反。
会冒泡的事件有：click，dblclick，wheel，mousemove，input，keyup，keydown，scroll 等
阻止事件冒泡:
event.stopPropagation()
复制代码什么是事件委托? 有什么用？
给父元素绑定事件，用来监听子元素的事件。只有能冒泡的事件才能做事件委托。
事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。
window.onload 和 DOMContentLoaded 的区别?
DOMContentLoaded 在 DOM 加载和解析好时触发。
window.onload 在样式表，脚本，图片等所有资源都加载好后才触发。
先触发 DOMContentLoaded，再触发 window.onload。
BOM
异步编程
Promise 解决了什么问题？
能很好的解决多个异步顺序执行导致的回调地狱。
除 Promise 外还有哪些异步编程解决方案？
Generator。 async/await。
用递归 和 Promise 实现异步的串行控制。
微任务和宏任务的差别是什么？
macro-task(宏任务)：定时器(setTimeout，setInterval)，用户交互事件等等。
micro-task(微任务)：Promise，process.nextTick。
同一层级下,微任务永远比宏任务先执行。从全局上下文退出前（全局的同步代码执行完毕后）,开始收集当前层级的微任务和宏任务，然后先清空微任务队列，再执行宏任务。
存储
本地存储 storage 和 Cookie 有什么差别？
数据传输方面: 在同源的 HTTP 请求中，会自动带上 Cookie 是数据。但不会带 storage 数据。
存储大小限制方面: storage 和 Cookie 都有存储大小的限制。但 storage 比 Cookie 能存的数据大得多，可以达到5M或更大。
有效期方面：localStorage 是数据一直有效。sessionStorage 关闭浏览器窗口前有效。Cookie 在设置的过期时间前有效。
能读取 cookie 策略是什么？
满足如下条件的 url 才能读取 cookie:
- url 的 host 和 cookie 的 domain 属性值相同或者是 domain 的子域名。
- url 的路径与 cookie 的 path 属性值相同。
其他
什么是防抖？什么是节流？有哪些使用场景？
节流指在一段时间内，只执行一次。用来控制事件发生的频率。如控制为 1秒 发生一次，甚至 1分钟 发生一次。例如：1分钟内，多次点击按钮提交表单，只有第一次点击有效。
防抖只执行最后一个被触发的，清除之前的异步任务。用来防止因事件触发次数过频繁，导致性能浪费。例如：窗口的 resize 事件，列表的 scroll 事件，输入框 input 事件，触发频繁很高，都可以用防抖来优化。
网络知识
HTTP 有哪些状态码? GET 和 POST 有什么区别？URI 的组成部分？什么是跨域及解决方案？Cookie 有哪些属性及作用？HTTP2 是什么，做了哪些改进？
TCP 和 UDP 有什么区别？TCP 三次握手的过程是怎样的？如何理解 TCP 的 keep-alive？
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
