2022年前端面试必须学会的知识点-前端优化篇（持续更新中...）

一、前端性能优化的方面？

一般我从这几个方面来考虑：体积大小，页面加载速度，页面响应速度

体积大小

压缩HTML、CSS、JavaScript，图片等资源，js库和UI库按需加载，

页面加载速度

缓存，页面路由懒加载，

页面响应速度

页面预加载，尽量避免js操作dom，尽量使用CSS3动画

1、减少HTTP请求数目

因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。下面介绍减少HTTP请求数目的方法：

A、CSS Sprites：国内俗称 CSS 精灵，即雪碧图，这是将多张小图片合并成一张图片，达到减少 HTTP 请求的一种解决方案。可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数，节省命名词汇量（由命名多张图片文件变成一张）。

B、合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。

C、采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

2、缓存
使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）。

A、缓存一切可缓存的资源

B、使用长Cache（使用时间戳更新Cache）

C、使用外联式引用CSS、JavaScript

3、压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip。
A、压缩（例如，多余的空格、换行符和缩进、注释）
B、启用GZip

4、使用首屏加载（对一些重要内容优先加载显示，一些次要内容可延迟加载）

首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。

5、按需加载（按需加载可能会导致很多的重绘，影响渲染性能）

将不影响首屏的资源和当前屏幕资源不用的资源，放到用户需要时在加载，可以大大提升重要资源的显示速度和降低总体流量。

A、LazyLoad
B、滚屏加载
C、通过Media Query加载

6、预加载

大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面，但Loading时间过长，会造成用户流失。
A、可感知Loading(如进入空间游戏的Loading)
B、不可感知的Loading（如提前加载下一页）

C、对用户行为分析，可以在当前页加载下一页资源，提升速度。

7、避免重定向
重定向会影响加载速度，所以在服务器正确设置，避免重定向。
8、异步加载第三方资源
第三方资源不可控，会影响页面的加载和显示，因此要异步加载第三方资源。

9、控制资源文件加载优先级
资源文件处理不当会阻塞页面加载、渲染，因此在使用时需要注意以下几点：

A、CSS写在头部，JavaScript写在尾部或异步。
B、避免图片和iFrame等的空Src，空Src会重新加载当前页面，影响速度和效率。

C、尽量避免重设图片大小，重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。

D、图片尽量避免使用DataURL，DataURL图片没有使用图片的压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长。

图片优化

1、压缩图片

图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。
A、使用智图压缩（制图是基于window系统的一款压缩图片的软件，转化为合适的图片格式）
B、使用其它方式代替图片（使用CSS3；使用SVG；使用IconFont）
C、使用Srcset（设置响应式图片，根据不同的屏幕分辨率和设备像素比，尽可能选择高分辨率的图片）
D、选择合适格式的图片（webP优于JPG；PNG8优于GIF）
E、选择合适的大小（首次加载不大于1014KB；基于手机屏幕一般宽度不宽于640）

CSS优化

1、尽量避免在HTML标签中使用style属性。( 因为在HTML标签中的style会阻塞页面的渲染 )

2、避免使用CSS表达式。（因为其执行频率很高，当页面滚动或者鼠标移动的时候，就会执行，这会带来很大的性能损耗）
3、移除空的CSS规则。（空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则）。
4、正确使用display的属性。（display属性会影响页面的渲染）。
    （a）、display:inline后不应该再使用width、height、margin、padding以及float
    （b）、display:inline-block后不应该再使用float
    （c）、display:block后不应该再使用vertical-align
    （d）、display:table-*后不应该再使用margin或者float
5、不滥用float。（float在渲染时计算量比较大，尽量减少使用）。
6、不滥用Web字体。（Web字体需要下载，解析，重绘当前页面，尽量减少使用）。
7、不声明过多的font-size。（过多的font-size引发CSS树的效率）。
8、值为0时不需要任何单位。（为了浏览器的兼容性和性能，值为0时不要带单位）。
9、标准化各种浏览器前缀

    （a）、无前缀应放在最后。
    （b）、CSS动画只用（-webkit-，无前缀）两种即可。
    （c）、其它前缀为“-webkit- -moz- -ms-无前缀”四种（-o-Opera浏览器改用blink内核，所以淘汰）。
10、避免让选择符看起来像正则表达式。
11、高级选择器执行耗时长且不易读懂，避免使用。

js优化

 1、用一个变量保存列表的length的值，避免每次执行的时候到要计算该值。

2、缓存DOM的选择与计算，避免每次Dom选择都要重新计算。

3、尽量使用ID选择器，ID选择器是最快的。（因为用id访问时，只要找到元素就停止在DOM上查找；而用其他选择器去查找元素则要对DOM所有节点都访问一遍。）

4、减少重绘和回流

    （a）、避免不必要的DOM操作
    （b）、尽量改变Class而不是Style，使用classList代替className
    （c）、避免使用document.write
    （d）、减少drawImage
5、尽量使用事件代理，避免批量绑定事件。（当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，借助事件冒泡机制，可以将事件委托到body，document等元素上，这样等于一个页面就只有一个事件触发，避免直接把事件添加到多个对象上）
6、touch事件优化，使用touchstart、touchend代替click。（响应速度快，但应注意touch响应过快，易引发误操作)。
减少DOM的操作

DOM操作为什么会影响性能？

在浏览器中，DOM的实现和ECMAScript的实现是分离的。例如，在IE中，ECMAScript的实现在jscript.dll中，而DOM的

实现在mshtml.dll中；在chrome中使用webkit的WebCore处理DOM和渲染，但ECMAScript是在V8引擎中实现的，其他浏览器

情况类似，所以通过Javascript调用dom接口，是相当于两个模块的交互。相比较在同一模块中的调用，这种跨模块的调用其性

能损耗是很高的，但DOM操作对性能影响最大是因为它导致了浏览器的重绘和重排。

浏览器渲染原理

从下载文档到渲染页面的过程中，

1）浏览器会通过解析HTML文档来构建DOM树

2）解析CSS产生CSS render tree(不包括位置和大小属性)

3）javascript在代码解析的过程中，可能会修改生成的dom树、和css render tree，之后根据dom树和css  render tree构建渲染树（包括位置和大小属性），在这个过程中css会根据选择器匹配HTML元素。渲染树包括了每个元素的大小，边距等样式属性

渲染树中不包含隐藏元素及head元素等不可见元素。最后浏览器根据元素的坐标和大小来计算每个元素的位置，并绘制这些元素到页面上。

渲染优化

1、HTML使用viewport。（viewport可以加速页面的渲染），如以下代码：

<meta name=”viewport” content=”width=device-width, initial-scale=1″>
2、减少DOM节点

3、动画优化
（a）、尽量使用CSS3动画。
（b）、合理使用requestAnimationFrame动画代替setTimeout。
（c）、适当使用Canvas动画，5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）。

4、高频事件优化。（ Touchmove、Scroll事件可导致多次渲染）

（1）、使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染。
（2）、增加响应变化的时间间隔，减少重绘次数。

5、GPU加速
CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用。

SSR？

SSR也就是服务端渲染，也就是将vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把HTML直接返回给客户端
SSR有着更好的SEO，并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部拓展库时需要特殊处理，服务端渲染应有程序也需要处于node.js的运行环境。还有就是服务端会有更大的负载需求。

Web Worker本质上是让主线程专注于UI渲染；相似的有安卓和IOS原生开发,小程序，都是主线程负责UI工作，将渲染和逻辑完全分离

二、SPA（单页应用）首屏加载速度慢怎么解决？

    let a = performance.getEntriesByName('first-content-paint')[0]

    console.log(a)

    速度慢？

    网络延迟，资源文件体积太大，重复请求，脚本堵塞

    解决方案？

    减小入口文件体积：路由懒加载

    静态资源本地缓存：采用http缓存，设置cache-control

    UI框架按需加载

    组件重复打包：配置commonsChunkPlugin的minChunks：3，表示吧使用3次及以上的包抽离出来，放进公共依赖文件，避免重复加载

    图片资源压缩

    开启Gzip压缩：c拆包之后，在进行gzip压缩，安装comperssion-webpack-plugin，需要服务端配合

    使用SSR服务端渲染：建议使用Nuxt.js实现

三、如何检测页面加载性能

组件性能问题？timeline工具