前端性能优化笔记

前端性能优化可以从下载资源上着手优化

1、 资源越小下载的越快,压缩文件(html,css,js等)
服务器端的资源文件被压缩的越小,客户端在下载的时候,就越快
图片优化,不用的时候不加载(懒加载),选择合适的图片类型

2、 路径上,通过CDN(content delivery network), 内容分发网络,让资源下载的更快
使用CDN的好处

采用CDN的时候,不带cookie,可以减少请求头的大小
减少主域的压力
实现静态资源和动态资源分离
同一个域名下请求的数量是有限的,通过浏览器工具的network可看到request数量
安全问题,但主域不工作的时候,CDN可以响应请求

3、 浏览器缓存
每次请求时,不是重新去请求数据,而是从缓存中读取数据。具体参考http缓存

前端性能测试工具

pageSpeed 重点测试页面的加载速度

  • 首次内容绘制FCP(frist conntentful paint) 浏览器将第一个dom渲染到屏幕的时间,也就是通常所说的白屏时间
  • 文档加载时间DCL(domContentLoaded)

lighthouse 侧重于用户体验

  • 首次有意义的绘制FMP(frist meaningful paint) ,就是说主要内容出现在页面上的时间,用户希望看到的主要内容出现在屏幕上的时间

首屏出现后,即FCP出现后,尽快出现有意义的绘制,即尽快出现FMP
通过计算关键元素的渲染时间来测量FCP,比如测量主要css的加载完成时间,或者测量关键图片的加载完成时间等等。
如何测量呢,通过新的APT,如PerformanceObserver, PerformanceEntry可计算加载完成时间。

浏览器控制台

浏览器控制台中newtork中的disable cache 顾名思义就是不允许缓存
意思就是浏览器端,肯定去发送http请求,并且请求头中带上:
'cache-control: no-cache'; 这样一定去请求响应

通过浏览器控制台去进行性能分析的时候,经常查看的地方,主要有瀑布图(Timing),蓝线与红线(DOMContentLoaded,Load的时间)
通过查看瀑布图,可看到是在哪些地方花时间了,然后看能不能在这里进行优化
DOMContentLoaded的时间: html文档被加载和解析成DOM的时间
Load的时间: 所有资源被加载完成, 包括css,js,图片,视频,音频等

前端性能优化还可以从下载资源后,页面进行渲染性能优化

优化首屏时间

首屏时间指的是:在用户没有与浏览器交互的情况下,在浏览器上看到完整内容并且达到可以交互的状态的这一段时间。

优化css的发送过程:
如果css很大,超过15kb, 则需要通过外联加载,
如果很小,比如不到1kb, 可是直接放在head中,通过inline的方式加载进来,(可通过构建工具将css导入到head中)
这样可以加速首屏的时间。

js放在body底部的理由

都说js放在底部可以让页面尽快呈现,理由是什么呢。

渲染引擎取得内容之后,在进行渲染的时候,
1、先解析html构建dom树,同时解析css构建规则树
2、通过第一步生成的dom树和规则树构建render树
3、布局render树
4、根据布局绘制,最后显示页面

我的疑惑:
body底部的js如果没有被执行完成,DOM树能生成码?

理解: DOM树的构成是由解析器从上至下,一步一步输出的,DOM树构建的同时,浏览器还会构建呈现树。
也就是说,浏览器每解析一个节点的同时,也开始构建呈现树,只要这个节点被解析完成,就可以通过js获取这个节点。
当解析完html,dom content loaded完成。
也就是说,出现在js前面的dom节点,可以通过js获取前面的dom进行相关的操作,
也就是说js的执行不需要等DOM树全部被解析完。

也就是说DOM树完成之前需不需要等待body中的js执行完?

正常情况下,DOM树完成之前需要等待body中的js执行完,也就是说DOM content loaded完成之前,需要所有的js执行完。
除非script是defer或者是async加载的,就不会影响DOM的生成。

script标签放在body底部加载的话,为什么不会影响dom树的构建?

script标签的位置,不影响DOM content loaded的时间。
但是会影响首屏的时间。
首屏的时间就是输入url后,达到与浏览器进行交互的时间。
首屏的内容被渲染出来,便不一定是DOM content loaded已经完成。
因为渲染和DOM解析是同步进行的,首屏需要的内容的DOM被解析成功,并且首屏需要的内容的css被解析完,
到此为止的渲染树被构建,进而布局,开始绘制,首屏需要的内容被绘制完成则就是首屏的时间。

参考文献:
https://www.cnblogs.com/caizh...
https://www.html5rocks.com/zh...

阅读 1.3k

推荐阅读
目录