【综合篇】Web前端性能优化原理问题

快来打我* 2021-08-19 14:46 313阅读 0赞

（给达达前端加星标，提升前端技能）

![format_png][]

**想要成为一名合格的Web前端工程师，Web前端性能优化是一个必须要掌握的知识，那么应该怎么进行Web前端性能优化呢？--达达前端**

**Web前端性能优化原理问题![format_png 1][]**

前端性能优化，资源的合并与压缩，图片编码的原理，以及类型的选择，浏览器的渲染机制，懒加载，预加载，浏览器存储，缓存机制，PWA和Vue-SSR等。

技术栈，Vue.js和Chrome，调试工具performance和layers。那么什么是前端性能优化原理的点，涉及作用以及原理，如何与真实的项目场景结合，理论结合实战经验，进行量化分析。

前端优化，一般是先基础优化（图片编码原理等问题），高一点 即为 进阶优化（浏览器的渲染机制，浏览器的存储，优化），结合服务端进行优化（首屏渲染等问题）等。

前端性能优化方案，最小化HTTP的请求，使用内容交付网络，避免空src或是href，添加过期或者是缓存控制标头，gzip组件，将styleSheets放在顶部，将脚本放在最下面，避免css表达式，减少dns的查找，将js和css设置为外部，避免重定向，配置etag，使用ajax缓存，减少dom元素的数量，没有404，减少cookie的大小，不缩放HTML中的图像，避免使用过滤器，使用favicon.icon小型且可缓存。

**面试官拷问![format_png 2][]**

面试官：为什么要进行前端优化？图片在前端是如何解码的？浏览器渲染加载的过程是如何进行的？懒加载和预加载的原理是什么样的？懒加载和预加载的应用场景是什么样的？PWA和VUE-SSR等原理的是怎么样的？

面试官深度拷问每个优化性能后的原理是怎么样的？结合你自己做过的项目性能优化的原理是怎么样的？说说你在项目中使用过性能优化后的感悟心得？说说每个性能优化原理最适合的场景过程。

面试人员想要了解你掌握多少性能优化的原理，了解你做过项目上是否使用过性能优化，分析自身做过的项目，找到需要性能优化的点，选择合适的性能优化等。

影响前端性能的有图像，样式表，脚本，flash等，减少组件的数量，减少所需的HTTP请求的数量，即可加快页面的速度。

![format_png 3][]

**前端性能优化，资源的合并与压缩![format_png 4][]**

合并文件是一种通过将所有脚本合并为一个脚本，类似将所有css合并为一个样式表来减少HTTP请求数量的方法。

实现性能优化，第一，减少我们的HTTP请求的数量，以及减少请求的资源大小，第二，资源的压缩与合并的原理是什么。压缩与合并前是什么样的效果，压缩与合并后又有什么区别。

**拷问：****浏览器的一个请求从发送到返回是一个怎样的过程？![format_png 5][]**

![format_png 6][]

url分解，协议名称，层级url的标记符号，固定不变，访问资源需要的凭证信息，从哪个服务器获取数据，需要连接的端口号，指向资源的层级文件路径，查询字符串，片段id。

客户端，走HTTP应用层，tcp传输层，ip网络层，数据链路层网络

分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层往上走。

应用层客户端发送HTTP请求，报文首部，空行，报文主体，报文首部含请求行，请求首部字段，实体首部字段，其他。

SYN （Synchronize Sequence Numbers）同步序列编号

ACK  (Acknowledgement）确认字符

过程，用户先在浏览器中输入一个url，浏览器内部中的核心代码会将这个输入的url拆分解析，然后将domain传给dns服务器，dns服务会根据domain查询相关的post对应的ip地址，然后将ip地址传递给浏览器，浏览器有ip地址，就知道浏览器要到哪里去，持有ip地址知道这个请求发送到哪里去。就跟随协议，请求的参数都会在协议中携带，发送到网络中去，然后通过局域网，交换机，路由器，主干网络，到达服务端。

服务端是有一个MVC的架构的，请求首先会进入Controller中，在Controller中进行相关的逻辑处理，以及请求的分发，调用Model层，负责和数据进行交互，model层会读取Redis和db里面的数据。然后通过view层给到网络，由服务端到浏览器端，浏览器主要是做render的过程，render的过程就是通过浏览器请求回来的HTML，css，JavaScript等渲染的过程，会形成相关的dom树，以及对应的css树，在页面上进行相应的样式渲染。

**拷问，从浏览器到服务器的过程中，那几个点，哪些过程可以进行我们的前端优化呢？![format_png 7][]**

client浏览器与server通过http协议通讯，http协议属于应用层协议，http属于tcp协议，所以client与server主要通过socket进行通讯。

tcp属于传输层协议，走https需要会话层tls,ssl等协议。

浏览器，dns服务器，服务器等，dns上我们可以进行缓存，来优化前端性能，路由器层面，url层面进行数据缓存，这样访问的时间就会被缩短了很多。

网络请求的过程，带宽，网络的选择，涉及到缓存，可以使用cdn，cdn是请求静态资源用的，请求静态资源，那么cookie是没有用的，所以希望在请求静态资源中，把这个cookie给去掉，这里注意cdn的域名不要和主站的域名一致，防止携带cookie。

如何减少我们HTTP请求的大小，每一个HTTP请求都要走网络环境才能达到我们的服务器，每一次请求都有网络环境的损耗，把多次HTTP请求减少到一次，减少网络环境中的损耗。也可以从服务器端出发，先把反映到页面中效果进行渲染，然后直出到网页上。

每一次请求都有网络环境的损耗，我们可以把多次HTTP请求合并成一次，从而减少相同的环境损耗。

带宽，一个HTTP的请求大小能够较小的话，访问就比较快一些，浏览器端的渲染过程，使用框架，就要从浏览器中进行渲染，框架中的模板是要在浏览器中进行渲染的，这个在框架中进行渲染，不利于首屏，对首屏有很大的损耗，不利于前端的性能。

服务器的渲染，将HTML渲染后直出到我们浏览器页面，不是在浏览器中进行渲染了。

前端性能优化点，通过HTTP请求的过程，可以了解到，我们可以通过dns进行缓存从而减少dns查询的时间，网络请求的过程走最近的网络环境，相同的静态资源进行缓存，减少HTTP请求的大小，减少HTTP请求，服务器端渲染，从业务中进行前端优化点。

重点，深入了解一下HTTP的请求过程，就可以知道前端性能优化的核心要点

**资源的合并与压缩![format_png 8][]**

减少资源体积，gzip压缩，js混淆，css压缩，图片压缩。

减少HTTP请求的数量即为合并，减少HTTP请求的大小即为压缩。可以对HTML进行压缩，css进行压缩，js进行压缩和混乱，文件合并，开启gzip等。

**进行HTML压缩![format_png 9][]**

第一使用在线网站压缩，使用html-minifier工具进行压缩，后端模板引擎渲染压缩。

**进行css压缩![format_png 9][]**

css sprite是减少图像请求数量的首选方法，将背景图像合并为单个图像。

CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

第一进行无效代码的删除，第二是css语义合并，使用在线网站压缩，使用html-minifier对HTML中的css进行压缩，使用clean-css对css进行压缩。

用CSSbackground-image和background-position属性显示所需的图像段

**进行js的压缩和混乱![format_png 10][]**

第一删除无效字符，剔除注解，代码语义的缩减和优化，代码的保护，可以使用在线网站进行压缩，html-minifier对html中的js进行压缩，使用uglifyjs2对js进行压缩

（1）将table改为div布局

（2）缩减精简div、span、ul、li等系列标签

（3）删除多余空格

（4）表格类型布局时候适当使用table替代div布局

（5）网页GZIP压缩

**文件的合并![format_png 11][]**

文件与文件之间有插入的上行请求，增加了N-1个网络延迟，受丢包问题影响更加严重，经过代理服务器时可能会被断开。合并文件存在首屏渲染问题，缓存失败问题，js文件比较大，请求比较慢，得请求回来后才会首屏HTML渲染，js是由缓存的，文件合并如果其中某个js文件有变化，就会导致缓存失败的问题，如果文件不合并，修改其中的某一个js文件，只会导致该文件缓存失效，其他的不会受影响。文件合并，存在很严重的缓存失效问题。

那么是否进行文件的合并，建议可以将公共库单独打包成一个文件，业务单独打包成一个文件，不同页面的合并，将不同页面的js不同打包，

如何进行文件合并，在线网站进行文件合并，使用nodejs实现文件合并

**实战资源和与压缩![format_png 12][]**

实战页面开发，网站进行压缩与合并，fis进行自动化的压缩与合并。

压缩前

![format_png 13][]

压缩后

![format_png 14][]

**前端自动化的构造实现压缩与合并![format_png 15][]**

fis3是一款百度内的构建工具，start->getSource()->所有文件是否编译完成，（单文件的编译，另个走向为打包的过程）。

fis3的配置文件，fis-conf.js

![format_png 16][]

**压缩后，优化前后性能对比，还是要性能优化得好，大的资源效果很明显![format_png 17][]**

加载优化，合并CSS，JavaScript，合并小图片，缓存一切可以缓存的资源，使用外联样式引用CSS和JavaScript，压缩HTML，css，JavaScript，启用GZIP，使用首屏加载，按需加载，滚屏加载，增加加载进度条，减少cookie，避免重定向，异步加载第三方资源。

css优化，css写在头部，JavaScript写在尾部，避免图片和Frame等的空Src，尽量避免重设置图片大小，图片尽量避免使用DataURL，尽量避免写在HTML标签中写style属性，避免css的表达式，移除空的css规则，正确使用display的属性，不滥用float，不滥用web字体，不滥用过多的Font-size，值为0时不需要任何单位，标准化各种浏览器前缀，避免让选择符看起来像正则表达式。

渲染优化，HTML使用viewport，减少dom节点，尽量使用css3动画，合理使用requestAnimationFrame动画代替setTimeout，适当使用Canvas动画，Touchmove，Scroll事件会导致多次渲染，使用CSS3 transitions，CSS3 3d，transforms，Opacity，Canvas等来触发GPU渲染。

脚本优化，减少重绘和回流，缓存dom选择与计算，缓存列表length，尽量使用事件代理，避免批量绑定事件，尽量使用id选择器，使用touchstart，touchend代替click。

图片优化，使用css3，svg，iconfont代替图片，使用srcset，web优与jpg，png8优于gif，首次加载不大于1014kb，图片不宽于640。

注意，在我们修改后端响应时间缩短一半时，整体响应事件只能减少5-10%，而优化前端性能，缩短一半时，整体响应可以减少40-45%。

> 前端优化的意义 HTTP请求的过程是进行优化的核心 压缩和合并的原理

**图片优化的过程![format_png 18][]**

图片加载处理，图片预加载，图片懒加载，首屏加载时进度条的显示。异步请求的优化，使用正常的json数据格式进行交互，部分常用数据的缓存。

图像映射将多个图像合并为一个图像，整体大小大致相同，但是减少HTTP请求的数量可以加快页面的速度。

png8、png24、png32区别

png8为256颜色，支持透明，png24为2的24次幂，不支持透明，png32为2的24次幂，支持透明。

jpg有损压缩，压缩率高，不支持透明，png支持透明，浏览器兼容好，webp压缩程度更好，在ios webview有兼容性问题，svg矢量图，代码内嵌，相对较小。

jpg使用场景，用在不需要透明图片，png使用场景，用在需要透明图片的场景，webp用在安卓，svg矢量图用在图片样式相对简单的业务。

css雪碧图，把一些图片整合到一张单独的图片中，用来减少请求数量，问题出在图片大，如果没有加载成功的话，慢，也是有问题的。image inline，把图片的内容内嵌到HTML上，与HTML存在，作为base64的格式，可以减少你的网站的HTTP请求数量。使用矢量图svg，绘制功能，使用iconfont解决icon问题。

webp使用在安卓下，它具更好的图像数据压缩算法，和无损和有损的压缩模式，alpha透明，动画的特性。

HTML渲染过程：顺序执行（词法分析），并发加载，是否阻塞，依赖关系，引入方式。

css阻塞，css head中阻塞页面的渲染，css阻塞js的执行，css不阻塞外部脚本的加载。

js阻塞，引入js阻塞页面的渲染，js不阻塞资源的加载，js顺序执行，阻塞后续js逻辑的执行。

**图片压缩与拼接![format_png 19][]**

PNG、PNG-8、PNG-24以及JPEG格式图片区别

PNG格式适合对透明度有要求的情形，PNG-8处理不了复杂色域下的渐变，PNG-24可以几乎不失真地保留渐变

**图片压缩方法![format_png 20][]**

使用Photoshop自带图片压缩，文件—存储为Web所用格式，一般情况下，JPEG选择输出质量为70~80%可以保证视觉上几乎没有差异。

页面体积

优化前后文件体积压缩率 = 优化后的体积÷优化前的体积

![format_png 21][]

**懒加载原理![format_png 22][]**

什么是懒加载的定义是对于图片而言，图片资源，对于商城项目图片是很多的，页面很长的业务场景适用，减少无效资源的加载，并发加载的资源过多会阻塞js的加载。

当图片进入到我们可视区域，去请求加载资源

懒加载的效果延迟加载

**预加载****原理![format_png 23][]**

图片等静态资源使用前提前请求，资源在使用时从缓存中加载，提高用户体验。

**什么是重绘与回流的机制？![format_png 24][]**

频繁重绘与回流会导致ui频繁渲染，导致JavaScript变慢。回流，当render tree中的一部分因为元素的规模尺寸，布局等改变需要重新构建，会触发回流，重绘，当render tree中的一些元素需要修改属性，这些属性不影响元素的外观，风格，布局，就叫做重绘，如修改颜色等。

所以回流一定会引起重绘，但是重绘不一定会引起回流。

**掌握一些css属性![format_png 25][]**

**![format_png 26][]**

将频繁重绘回流的元素单独出来，作为一个独立的图层，那么这个元素的重绘回流就只能影响这个图层中。

把一个元素独立成独立的图层，用css属性

避免使用触发重绘，回流的css属性，重绘和回流很频繁可以独立出来。

**浏览器存储![format_png 27][]**

了解什么是localstorage，cookie，sessionstorage，indexdb

了解pwa和service worker的应用

多种浏览器存储方式共存

**什么是cookie![format_png 28][]**

用cookie给服务端传递相关信息，让服务端来分别当前请求的是哪个客户端，cookie是1993年有的，它的目的就是为了区分HTTP的请求情况，本来HTTP请求就是无状态的，就是请求之后的连接就关闭了，cookie就是去维护客户端的状态。

用于浏览器端和服务端的交互，客户端自身数据的存储。

cookie有限制，作为浏览器存储大小有4kb左右，需要设置过期时间。

cookie的生成方式，http response header的set-cookie，通过document.cookie可以读写cookie，cookie中的相关域名下面-cdn的流量损耗，httponly。

**LocalStorage![format_png 29][]**

专门用于浏览器存储，大小5M左右，接口封装好，本地缓存的方案，可提高首屏的加载速度。

**SessionStorage![format_png 30][]**

会话级别的浏览器存储，大小5M左右，在客户端使用，不和服务端进行通信，接口封装较好。

**pwa是什么![format_png 31][]**

它是一种web app 新模型，并不是指某一种前沿的技术，是一种渐进式的web app，是通过一系列新的web特性。pwa在没有网咯的环境中也能提供基本的页面访问，web app没有网是接收不到基本页面的展示，但是pwa不会出现未连接到网络就导致显示不了页面。它很快速，对网页渲染以及网络数据访问很快速，融入特性，可以被添加到手机桌面等。

**service worker是什么![format_png 32][]**

它是一个脚本，浏览器独立于当前网页，将其在后台运行，实现一些不依赖的页面。具有拦截和处理网络请求的特性。

**缓存策略![format_png 33][]**

缓存，DNS缓存，CDN部署与缓存，http缓存

了解cache-control，last-modified，etag。httpheader的属性，Cache-control属性，max-age，s-maxage，private，public，no-cache，no-store。

浏览器在DNS解析中会消耗一定的时间，对一些访问量高的来说，需要做好DNS的缓存工作，CDN缓存，CDN作为静态资源文件的分发，做好静态资源的缓存工作，就能加快网站的加载速度，

移动到优化，使用cache，减少重定向，首屏优化，保证首屏加载数据小于14kb，不滥用web字体。

**服务端性能优化![format_png 34][]**

服务器是node.js，所以也能进行优化。

![format_png 35][]

![format_png 36][]

谷歌PageSpeed团队的测试表明，30~50KB（压缩后）是每个JavaScript文件大小的合适范围：既大道了能够减少小文件带来的网络延迟，还能确保递增及分层式的执行。--web性能权威指南

![format_png 37][]

减少HTTP请求，合并js文件，合并css文件，使用css sprite，使用base64表示简单的图片。

移动端优化，长列表滚动优化，函数防抖和函数节流，使用touchstart，touchend代替click，html的viewport设置，开启gpu渲染加速。

![format_png 38][]

**浅谈Web前端优化的本质与方法![format_png 39][]**

一、减少过多的HTTP外部请求

二、在恰当的位置使用CSS

三、优化代码

参考链接

推荐阅读  点击标题可跳转

[【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await][Vue_vue_-es7_async_await]

[【面试需要-Vue全家桶】一文带你看透Vue前端路由][-Vue_Vue]

[【面试需要】掌握JavaScript中的this，call，apply的原理][JavaScript_this_call_apply]

[2019年的每一天日更只为等待她的出现，好好过余生，庆余年 | 掘金年度征文][2019_ _]

[进来就是一家人【达达前端技术社群⑥】][Link 1]

觉得本文对你有帮助？请分享给更多人

关注「达达前端」加星标，提升前端技能

在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。

非常感谢读者能看到这里，如果这个文章写得还不错，觉得「**达达**」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话， **求点赞，求关注，求分享，对暖男我来说真的**

**非常有用！！！**

感谢阅读，原创不易，喜欢就点个\[**在看**\] or \[**转发朋友圈**\]，这是我写作最大的动力。

**意见反馈**

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

**这是一个有质量，有态度的公众号**

点关注，有好运

![format_png 40][]

好文章，我在看❤️

[format_png]: /images/20210724/8a0c4f2e82ff4a2683dd21fcbe10bf34.png
[format_png 1]: /images/20210724/7b9f9a2e443f431186eaeab4e6dc14d4.png
[format_png 2]: /images/20210724/14c21426c43d495ba5dee53c5a50d4b3.png
[format_png 3]: /images/20210724/6a559fb73bcb481285041803c449feb6.png
[format_png 4]: /images/20210724/10ef99c4aae248b9becd3bc5cac44f5c.png
[format_png 5]: /images/20210724/d465264224ba49d384b73fd96d3b2833.png
[format_png 6]: /images/20210724/e58eff7487e7465e99f91053e06ec2eb.png
[format_png 7]: /images/20210724/4847747b6a474b24a1a8f7bfab652218.png
[format_png 8]: /images/20210724/48535dce535c4da5bd99b6edd7a80272.png
[format_png 9]: /images/20210724/dd1c127aa92e441085602a327edb1cd4.png
[format_png 10]: /images/20210724/d5d16dec64784ebbab991606bff9f6e2.png
[format_png 11]: /images/20210724/00363bd9d04845c3b81d15fc80856ea6.png
[format_png 12]: /images/20210724/2933350e1a7345a38167947ebe2075bc.png
[format_png 13]: /images/20210724/2028eb77e7e8429e9d95bc5bccbaf911.png
[format_png 14]: /images/20210724/71ba348b5c204022942c126c50c05603.png
[format_png 15]: /images/20210724/be247a2c6ee64645b59791c347c65f3d.png
[format_png 16]: /images/20210724/0db491fd2f754e0f9613effb73ff013a.png
[format_png 17]: /images/20210724/92fec10382ba4073a7700b9d78f491c1.png
[format_png 18]: /images/20210724/27e4f294f79d4da1b63b1b0aef857080.png
[format_png 19]: /images/20210724/4e9a0aa5e72745b2803b7fd17dcd9b69.png
[format_png 20]: /images/20210724/912a36e8db474deea4e8b09453bded2d.png
[format_png 21]: /images/20210724/51e36278f80a48338a6ac6331c2c7000.png
[format_png 22]: /images/20210724/f64519d653f946f681b93c5b4468c481.png
[format_png 23]: /images/20210724/916ff7216dbc4b3ebd0943216e25f137.png
[format_png 24]: /images/20210724/14f7aeb29b5c498b832efdcb66dc83a3.png
[format_png 25]: /images/20210724/27a8bab26b1646a996dc69dd68196372.png
[format_png 26]: /images/20210724/857362fb92444bedaa6be20168abe242.png
[format_png 27]: /images/20210724/6ff4986f78e74ef1bb9507fc29757361.png
[format_png 28]: /images/20210724/1d25b6ceba87469b9330f5f5bf14dd08.png
[format_png 29]: /images/20210724/ac4fb9caae65468d9d8609cd6a508b23.png
[format_png 30]: /images/20210724/ad06ea0fd0bd44f9bc6ded17e5e25cf8.png
[format_png 31]: /images/20210724/3ce8bc6c7ba94e06a937d118c87f5bf5.png
[format_png 32]: /images/20210724/33e0c289396f4f96ac76c0bbc06eacb9.png
[format_png 33]: /images/20210724/6327338133054477a1075305749c2756.png
[format_png 34]: /images/20210724/8e424b84a11a4e2296d9ea008e9200ba.png
[format_png 35]: /images/20210724/9c111523944b4fb3bec9b4642d915696.png
[format_png 36]: /images/20210724/2141b503515848f7849af1782210241a.png
[format_png 37]: /images/20210724/3509dd65974248d6a8dbdaddf8c6bbdf.png
[format_png 38]: /images/20210724/0b19808958a34f49beb237565d16870e.png
[format_png 39]: /images/20210724/aeeeb0c7eca14484ad23c3f8d4de7ff5.png
[Vue_vue_-es7_async_await]: https://blog.csdn.net/qq_36232611/article/details/103951684
[-Vue_Vue]: https://blog.csdn.net/qq_36232611/article/details/103942481
[JavaScript_this_call_apply]: https://blog.csdn.net/qq_36232611/article/details/103929527
[2019_ _]: https://blog.csdn.net/qq_36232611/article/details/103929511
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI1NTcxOTQ1Nw%3D%3D&chksm=ea30f158dd47784e5b86cf496c3317f0f6a67b8ea1c4d90f80108e6ee96969e66f697545b4bb&idx=4&mid=2247487510&scene=21&sn=bb1a9b513613521272c4c5a7d8e7063f#wechat_redirect
[format_png 40]: /images/20210724/df7519fe9a6a47a8a87fcdf826c8c59b.png