1、浏览器的一个请求从发送到返回都经历了什么？
1.发送URL请求到DNS服务器，获取域名对应的 web服务器的ip地址
2.与web服务器建立TCP/IP协议
3.浏览器向web服务器发送HTTP GET请求
4.web服务器响应请求，并返回指定url的数据
5.浏览器下载web服务器返回的数据并解析html源文件
6.生成Dom树，解析js和css，渲染页面
image.png
image.png
01.请求过程中一些潜在的性能优化点
image.png
2、资源的合并与压缩
目标：
* 减少http请求数量
* 减少请求资源的大小
操作方式：
* html压缩
image.png
* css压缩
image.png
* js压缩与混乱
image.png
image.png
* 文件合并
image.png
image.png
3、图片相关的优化操作
01.不同格式图片常用的业务场景
* jpg有损压缩，压缩率高，不支持透明 —— 大部分不需要透明图片的业务场景
* png支持透明，浏览器兼容好 —— 大部分需要透明图片的业务场景
* webp压缩程度更好，在ios webview有兼容性问题 —— 安卓全部
* svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景 —— 图片样式相对简单的业务场景
02.CSS雪碧图
image.png
03.Image inline
image.png
04.使用矢量图
image.png
05.在安卓下使用webp
image.png
4、懒加载与预加载
* 懒加载：一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值
* 懒加载作用：减少无效资源的加载，提高用户体验，减轻服务器的压力，优先加载可视区域的内容。
* 预加载：就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就可以直接从缓存中获取资源
* 预加载作用：在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间
* 实现预加载的几种方法：
* 使用HTML标签
* 使用image对象
* 使用XMLHttpRequest对象，虽然存在跨域问题，但会精细控制预加载过程
* 使用PreloadJS库
image.png
5、css、js 的加载与执行 ———— html页面加载渲染的过程
在页面加载时，浏览器把获取到的HTML代码解析成一个DOM树，DOM树里包含了所有HTML标签，包括display：none隐藏，还有用JS动态添加的元素等。
render tree（渲染树）类似于DOM tree（DOM树），但区别很大，因为render tree能识别样式，同时render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点（比如display：none的节点，还有head节点），因为这些节点不会用于呈现，而且不会影响呈现，所以就不会包含到render tree中。
image.png
实质：DOM tree（DOM树）结合CSS，就渲染除了render tree（渲染树）
image.png
渲染步骤：
* 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。
* 第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。
* 第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。
* 第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。
* 第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。
image.png
6、回流（layout）与重绘（paint）
image.png
回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)
何时需要回流：当页面布局和几何属性改变时就需要回流
image.png
重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘
image.png
回流与重绘的区别：
image.png
新建DOM的过程：
image.png
Chrome创建图层的条件：
image.png
实际项目中应对回流 & 重绘的优化操作：
image.png
