学习笔记：
性能黄金准则：只有10%~20%的最终用户响应时间花在了下载HTML文档上，其中的80% ~90%时间花在了下载页面中的所有组件上。
网站加载的速度严重影响用户体验，也决定着这个网站的生死存亡。下面总结一下前端工程师如何来提高页面的加载速度。
首先，我们要知道，浏览器从发送一个请求到返回都经历了什么？
第一步：浏览器提出域名解析请求,并将该请求发送给本地的域名服务器（domain 与 ip 转化）；
第二步：当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回；
第三步：如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器（DNS服务器）,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址；
第四步：本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址；
第五步：重复第四步,直到找到正确的纪录；
第六步：返回的ip地址到浏览器，浏览器根据ip地址，根据网路传输协议，带着请求相关参数发送到网络中经过局域网、交换机、路由器到主干网络最后到达服务端；
第七步：请求进入服务端，先进入controller层进行相关的逻辑处理以及请求的分发，然后调用model层，model是和数据进行交互的，model会进行读取数据库的相关操作；
第八步： 最终会通过view 层将渲染好的页面返回给网络，再按照原路进行返回到达浏览器，进行render渲染，呈现在用户面前。
请求过程中一些潜在的性能优化点：
- DNS是否可以通过缓存减少DNS查询时间？
- 网络请求的过程走最近的网络环境？
- 相同的静态资源是否可以缓存？
- 能否减少HTTP请求大小？
- 减少HTTP请求数量
- 服务端渲染
所以，深入理解HTTP请求的过程是前端性能优化的核心！！！
一、DNS解析优化
-
减少DNS查询次数
DNS查询过程需要消耗20ms，在DNS查询过程中，浏览器什么都不会做，保持空白。如果DNS查询很多，网页性能会受到很大影响。若网页内容来自各个不同的domain，则客户端首次解析这些domain需要消耗一定的时间，但由于DNS查询结果会缓存在浏览器中一段时间，所以DNS查询只对首次访问时的速度有影响。
减少DNS查询次数需要减少 来自不同domain的请求 的数量，如尽量将外部域的对象下载到本地服务器上。 -
DNS缓存
若DNS查询很多，网页性能会受到很大影响，因此需要用到DNS缓存。
不同浏览器的对DNS的缓存机制不同：IE对DNS记录默认的缓存时间为30分钟，firefox和chrome对DNS记录的默认缓存时间是1分钟。
缓存时间长：减少DNS的重复查询，减少时间。
缓存时间短：及时检测服务器IP的变化，保证访问的正确性。
二、网络请求的过程走最近的网络环境
在网络中，优化点有带宽、网络选择和缓存。在网络请求的过程中好多公司都会使用CDN，使用CDN就可以解决网络选择还有缓存的问题。但是在访问CDN的过程中会涉及到一个问题，就是CDN是请求静态资源用的，对于静态资源来说，请求中携带的cookie是没有用的，所以，我们希望在请求资源的时候将http request中携带的cookie给去掉 ，但是很多时候，会将CDN的域名弄得和本身网站的域名相同，这样就会将主站的一些cookie通过网络携带到CDN的服务端，这实际上是对网络无畏的损耗，所以我们CDN的域名也要注意，CDN的域名不要和主站的域名一样，这样就可以防止访问CDN的时候还携带着主站cookie这个问题。
使用CDN能够解决网络选择以及缓存的问题，但对于一些接口，我们是没办法用CDN的，那么对于一些接口，我们怎么样去 做一些缓存呢？其实除了CDN，我们还可以在浏览器端做一些相关的缓存策略，对于浏览器缓存，一些相同的接口、相同的资源就可以从浏览器端读取数据。这样的话，我们的访问速度又得到了提升。
上面解决了网络选择和缓存的问题，那么带宽方面怎么优化呢？就引出了减少HTTP请求数量以及减少HTTP请求资源的大小的问题。
三、资源的压缩与合并
资源的合并的目的：减少HTTP请求的数量。
资源的压缩的目的：减少HTTP请求资源的大小。
资源的压缩
- HTML压缩
- CSS压缩
- JS压缩和混乱
HTML压缩：
删除空格、回车、注释等对于写代码有意义，对于浏览器解析无意义的HTML文档内容
如何进行HTML压缩：
- 使用在线网站进行压缩
- 用nodejs提供的html-minifier工具压缩
- 后端模板引擎渲染压缩（在服务端进行HTML压缩）
CSS压缩：
删除无效代码（注释 无义字符）、进行CSS语义化合并，从而减少文件大小，提高CSS渲染速度
如何进行CSS压缩：
- 使用在线网站进行压缩
- 用nodejs提供的html-minifier工具对HTML中的CSS进行压缩
- 使用clean-css对CSS进行压缩
JS压缩与混乱：
无效字符的删除、剔除注释、代码语义的缩减和优化（变量名缩短）、JS压缩与混乱之后也是对前端代码的保护
如何进行JS压缩与混乱：
- 使用在线网站进行压缩
- 用nodejs提供的html-minifier工具对HTML中的JS进行压缩
- 使用uglyfyjs对JS进行压缩
资源的合并
当然文件合并不一定都是优点，也会有一些问题 ：
- 首屏渲染的问题。若合并后文件很大，首屏渲染会延迟到整个大的文件请求回来之后再执行。
- 缓存失效问题。任意一个文件的改变都会造成合并之后的文件失效。
文件合并的建议：
- 公共库合并，将公共库单独打包成一个文件，不会影响公共库的缓存。
- 不同页面的合并， 针对现在的单页应用开发的，按需加载（不同页面JS单独打包）
如何进行文件合并：
- 使用在线网站进行文件合并。
- 使用nodejs实现文件合并。
- 使用构建工具进行文件合并。
四、图片相关的优化
谈到图片优化，得知道png8/png24/png32之间的区别：
- png8----256色----支持透明
- png24----2^24色----不支持透明
- png32----2^32色----支持透明
1.选择图片的时候要考虑到图片的大小、色彩丰富程度等因素。每种图片都有自己的特点，要针对不同的场景选择合适的图片格式。
各种图片格式适应的业务场景：
- jpg 有损压缩，压缩率高，不支持透明；适用于大部分不需要透明图片的业务场景
- png 支持透明，浏览器兼容性好；适用于大部分需要透明图片的业务场景；
- webp 压缩程度更好，在ios webview有兼容性相关问题，适用于安卓全部
- svg矢量图，代码内嵌，相对较小，适用于图片样式相对简单的场景（解析HTML标签成矢量图，如iconfont字体图标）
2.进行图片压缩。针对真实图片情况舍弃一些无关紧要的色彩信息
进行图片压缩后，舍弃了一些无关紧要的色彩信息，但人的视觉感觉是一样的，这样既减少了图片的大小，又不用影响用户体验。
3.CSS雪碧图
CSS雪碧图，是把你网站上用到的一些图片整合到一张单独的图片中（减少HTTP请求的数量）。但这样会存在一个问题：整合图片比较大时，一次加载比较慢（要控制整合图片的大小）。
4.Image inline
将图片的内容内嵌到HTML当中（减少HTTP的请求数量）。
5.使用矢量图
使用svg进行矢量图的绘制，使用iconfont解决icon的问题。
6.webp图片格式
webp图片格式是由谷歌开发的一种旨在加快图片加载速度的图片格式。webp使用最优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差别 的图像质量。同时具备无损和有损的压缩模式，在JPEG和PNG的转换效果都非常优秀、稳定和统一。
图片压缩的网站:https://tinypng.com/
将图片转换成webp：fis构建工具
根据场景选择合适的优化方案，可以让页面的加载速度和渲染速度提高很多。
扫一扫
1203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
