前端性能优化笔记

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

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

二、 路径上，经过CDN（content delivery network）， 内容分发网络，让资源下载的更快
使用CDN的好处

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

三、 浏览器缓存
每次请求时，不是从新去请求数据，而是从缓存中读取数据。具体参考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放在底部可让页面尽快呈现，理由是什么呢。

渲染引擎取得内容以后，在进行渲染的时候，
一、先解析html构建dom树，同时解析css构建规则树
二、经过第一步生成的dom树和规则树构建render树
三、布局render树
四、根据布局绘制，最后显示页面

个人疑惑：
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...