持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

1.网络请求

1. 首先会进行dns查询，根据域名得到ip。然后建立tcp链接
2. 浏览器发起http请求，服务端收到http请求，将response返回到浏览器
3. 浏览器收到请求响应，得到html源代码

继续请求静态资源

1. 浏览器端收到html源代码，然后开始解析html。解析html过程中，遇到静态资源还会继续发起网络请求
2. 如js css 图片 视频等
3. 注意：静态资源可能有强缓存，此时不必请求

2.解析：字符串 => 结构化数据

1. 如果是html，则构建dom树
2. 如果是css，则构建cssom树
3. dom树和cssom树两者结合，形成render tree

优化解析

1. css放在head中，不要异步加载css
2. js放在body下面，
3. img提前定义 width height

3.渲染

1. 计算各个dom的尺寸，定位，最后绘制到页面
2. 遇到js可能会执行
3. 异步css,图片加载，可能会重新触发渲染

网络请求：dns解析，http请求

解析：dom树, cssom树,render tree

渲染：计算，绘制，同时执行js

上面讲到了从输入url到页面展示的完整过程

下面再讲解下重绘和重排的区别

重绘和重排的区别

重绘

元素外观改变，如颜色，背景色

但元素的尺寸，定位不变。不会影响其他元素的位置

重排

重新计算尺寸和布局，可能会影响其他元素的位置

如元素高度增加，可能会使相邻元素下移

区别

重排比重绘影响大，消耗更大

减少重排的方法

1.集中修改样式或者直接切换css class

2.修改之前先设置display:none，脱离文档流

3.使用bfc特性，不影响其他元素位置

4.频繁触发resize scroll的话，使用节流和防抖

5.使用createDocumentFragment来批量操作dom

6.优化动画，使用css3和requestAnimationFrame

BFC

1.块级格式化上下文

2.内部的元素无论如何改动，都不会影响其他元素的位置

触发bfc的条件

1.根结点html

2.float: left/right

3.overflow:auto/scroll/hidden

4.display: inline-block/table/table-row/table-cell

5.display:flex/grid的直接子元素

6.position: absolute/fixed