# 中等

# 1、webpack优化手段

# 时间

缩减范围
缓存副本
定向搜索
提前构建
并行构建
可视结构

# 体积

分割代码
摇树优化
动态垫片
按需加载
作用提升
资源压缩

# 2、CSS怎么开启硬件加速

transform：translateZ（0）/translate3d（0，0，0）
will-change： opacity、transform、top、left、bottom、right；

# 渲染引擎为哪些特定节点创建新的图层呢？

第一点：拥有层叠上下文属性的元素会被提升为单独的一层。
第二点：需要裁剪（clip）的地方也会被创建为图层。

# 3、常见的设计模式

工厂模式
单例模式
发布订阅/观察者模式
装饰器模式

# 4、缓存策略

存储图像、网页等资源主要缓存在disk cache，操作系统缓存文件大部分都放在memory cache中。具体浏览器会自动分配，看谁的资源利用率不高就分配给谁。

查找顺序

service-worker -> memory-cache ->Disk cache -> Push cache;

# 强缓存

max-age
expires

# 协商缓存

Etag/if-none-Match
last-modified/if-modified-since

cache-control：

no-store
no-cache
public/private
s-max-age

# 刷新对缓存影响

ctrl+F5 强制刷新，直接从服务器加载，跳过强缓存和协商缓存
f5刷新，会跳过强缓存，但是会检查协商缓存
浏览器地址中写入url，回车，会依次强缓存-协商缓存去查。

# 5、https加密过程

# 客户端怎么验证数字证书

首先浏览器读取证书中的证书所有者、有效期等信息进行一一校验。
浏览器开始查找操作系统中已内置的受信任的证书发布机构CA，与服务器发来的证书中的颁发者CA比对，用于校验证书是否为合法机构颁发
如果找不到，浏览器就会报错，说明服务器发来的证书是不可信任的，如果找到，那么浏览器就会从操作系统中取出颁发者CA的公钥，然后对服务器发来的证书里面的签名进行揭秘。
浏览器使用相同的hash算法根据证书内容计算出信息摘要，将这个计算的值与证书解密的值做对比
对比结果一致，则证明服务器发来的证书的合法，没有被冒充。此时浏览器就可以读取证书中的公钥，用于后续加密。

# 6、flex：1由哪些属性组成

由flex-grow、flex-shrink、flex-basis三个属性的所写。

# flex-grow: 定义项目放大的比例

默认为0，即使存在剩余空间，也不会放大；

所有项目的flex-grow为1：等分剩余空间(自动放大占位)；

flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n位。

# flex-shrink: 定义项目缩小的比例/

默认为1；即：如果空间不足，该项目则缩小；

所有项目的flex-shrink为1：当空间不足时，缩小的比例相同。

flex-shrink为0：空间不足时，该项目不会缩小。

flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

# flex-basis：定义再分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。

默认值为auto，即项目原本大小。

设置后项目将占据固定空间。

# 7、304是什么意思，一般什么场景出现，命中强缓存返回什么状态码

304表示命中协商缓存。

请求头last-modified的日期与响应头的last-modified一致
请求头if-none-match的hash与响应头的etag一致这两种情况会返回Status Code: 304

强缓存命中，状态码为200

# 8、pushState、replaceState可以触发popState嘛。

答案是：不能。

仅改变网址，页面不会真的跳转，也不会获取新的内容，本质上网页还停留在原页面上。

history.go()、back()、forWard()会触发popState

# 9、tree-shaking是什么，原理是什么？

tree-shaking是删除重复代码和未引用的代码一种手段。

原理：利用ESModule引入的静态分析，故而编译的时候正确判断到底加载了哪些模块。

静态分析程序流，判断哪些模块和变量未被使用或者引用，进而删除对应代码。

# commonJS和ES Module的区别

commonJS是值的一个拷贝，ES Module是值的一个引用
CommonJS是运行是加载，ES Module是编译时输出接口
commonJS是单个值的导出（一个对象），ES Module可以导出多个
commonJS是动态语法可以写在判断中，ES Module只能写在顶层模块。
CommonJs的this是当前模块，ES Module的this是undefined。

# 10、babel是什么

babel，是一个JS编译器，它可以让开发者在开发过程中使用各类方言（jsx、flow、ts）而无需担心它的运行环境，因为它可以按需转换为低版本兼容的代码。

@babel/core

@babel/parser

@babel/traverse

@babel/generator

# 11、原型链判断

Object.prototype.__proto__; // null
Function.prototype.__proto__; // Object.protoType
Object.__proto__; // Funtion.protoType
Object instanceof Function; // true
Function instanceof Object; // true
Function.prototype === Function.__proto__; // true

# 12、 RAF、RIC

requestAnimationFrame：告诉浏览器在下次重绘之前执行传入的回调函数(通常是操纵 dom，更新动画的函数)；由于是每帧执行一次，那结果就是每秒的执行次数与浏览器屏幕刷新次数一样，通常是每秒 60 次。

requestIdleCallback：会在浏览器空闲时间执行回调，也就是允许开发人员在主时间循环中执行低优先级任务，而不影响一些延迟关键事件。如果有多个回调，会按照先进先出原则执行，但是当传入了timeout，为了避免超时，有可能会打乱这个顺序。

← 21-30 困难 →