前端性能优化笔记

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

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...