CSS
选择器
样式生效的优先级是怎样的？
优先级从高到低: !important > 内联样式 > ID 选
优先级从高到低: !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 的区别是什么？
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）
一个盒子由四个部分组成：content、padding、border、margin
块级元素，行内元素，行内块级元素有什么区别？
块级元素宽度默认撑满父元素，占一行。
行内元素。多个行内元素会显示在一行(宽度够的情况下)。行内元素设置宽度无效。设置上下的 margin 无效，左右有效。
行内块级元素的部分特性和块级元素一样，部分特性和行内元素一样。能设置高度。多个能显示在一行。
什么是 BFC，有哪些使用场景？
BFC 是块级格式化上下文，简单的来说创业项目，BFC就是创建一个盒子，盒子内部的元素布局不影响盒子外部的元素。
使用场景:
如何用 Flex 布局实现水平，垂直方向的 居中对齐，两端对齐？换多行显示？如何撑满容器的剩余部分？容器空间不够，如何缩小？
flex-direction属性决定的是主轴的方向，即是项目的排列方向
row：flex容器的主轴与当前写入模式的内联轴具有相同的方向。主开始方向和主结束方向分别相当于当前写入模式的开始方向和结束方向。
row-reverse: 与'row'相同，只是主开始方向和主结束方向交换了。
column: flex容器的主轴与当前写入模式的块轴方向相同。主开始方向和主结束方向分别相当于当前书写模式的前/头和后/脚方向。
column-reverse: 与'column'相同，只是主开始方向和主结束方向交换了。
flex-wrap属性：根据伸缩容器中的可用空间，指定伸缩项是否换行以及它们换行到多行或多列的方向。
flex-wrap: nowrap: 不换行。（所有弹性项目都将在一行上）
flex-wrap: wrap: 换行，第一行在上方。（弹性项目将从上到下缠绕在多行上）
wrap-reverse: 换行，第一行在下方。（弹性项目将从下到上缠绕在多行上）
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性:指定在解析了任意灵活长度和自动边距后，伸缩项如何沿伸缩容器的主轴对齐。(定义了项目在主轴上的对齐方式)
flex-end弹性物品被打包到行尾。第一个伸缩项的结束边缘被放置在伸缩容器的末端
center弹性物品被打包在线的中间。flex项目在直线上放置冲洗彼此对齐线的中心,与等量的main-start边缘之间的空白行和第一项之间的线,主要目的的边缘线,最后一项
space-between弹性项目均匀地分布在这条线上。如果剩余的自由空间是负的，或者一行上只有一个flex项目，这个值与' flex-start '相同。
space-around弹性项目均匀地分布在线中，在两端有一半大小的空间。
align-items属性：指定伸缩容器中伸缩项的对齐值。
flex-start：交叉轴的起点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content属性：指定当与flex-direction属性定义的轴垂直的轴上有额外空间时，flex项目的行如何在flex容器内对齐。
flex-start：交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
stretch：轴线占满整个交叉轴
绝对定位的定位规则是怎样的？
绝对定位元素根据更加离它最近的 position 不为 static 的父元素来定位。
如何实现绝对定位元素的水平居中?
.elem {
left: 50%;
transform: translateX(-50%);
}position 属性有哪些值？
static, relative, absolute, fixed, sticky。
两个元素有重叠部分，哪个显示在上面的规则是怎么样的？
详细:
容器的 y 方向 overflow：auto。子元素要超出容器的 x方向怎么处理？
子元素 Portal 到容器上级元素里。
响应式
怎么做响应式布局？
设置 viewport。。需要做响应式处理的地方用 媒体查询(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;
}兼容性
你遇到过哪些兼容性问题，是怎么解决的？
如何减少兼容性问题？
使用新的 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 是函数作用域箭头函数的this，let 是块作用域。
什么是闭包？闭包有哪些使用场景？
闭包：定义在一个函数内部的函数，可以重用函数内部变量，又保护变量不被污染的一种机制
使用场景：
场景一：保护私有变量
场景二：延迟执行
场景三：延续局部变量的寿命
this 在五种场景（默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定）的指向是怎样的？
this默认绑定：函数调用时无任何调用前缀的情景，默认绑定时this指向全局对象（非严格模式），但需要注意的是，在严格模式环境中，默认绑定的this指向undefined，如果在严格模式下调用不在严格模式中的函数，并不会影响this指向
隐式绑定：如果函数调用时，前面存在调用它的对象，那么this就会隐式绑定到这个对象上，如果函数调用前存在多个对象，this指向距离调用自己最近的对象。
this显式绑定：通过call、apply以及bind方法改变this的行为箭头函数的this，如果在使用call之类的方法改变this指向时，指向参数提供的是null或者undefined，那么 this 将指向全局对象。
new绑定：js中的构造函数只是使用new 调用的普通函数，它并不是一个类，最终返回的对象也不是一个实例，只是为了便于理解习惯这么说罢了。
那么new一个函数究竟发生了什么呢，大致分为三步：
1.以构造器的prototype属性为原型，创建新对象；
2.将this(可以理解为上句创建的新对象)和调用参数传给构造器，执行；
3.如果构造器没有手动返回对象，则返回第一步创建的对象
箭头函数的this：箭头函数的this指向取决于外层作用域中的this，外层作用域或函数的this指向谁，箭头函数中的this便指向谁，一旦箭头函数的this绑定成功，也无法被再次修改，
聊聊 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。
微任务和宏任务的差别是什么？
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 事件，触发频繁很高，都可以用防抖来优化。
注册会员查看全部内容……
限时特惠本站每日持续更新海量各大内部创业教程，年会员只要98元，全站资源免费下载
点击查看详情
站长微信：9200327
