不加载执⾏js_⼀个页⾯从输⼊URL到加载完成，这个过程发
⽣了什么？
⼀个页⾯从输⼊ URL 到加载完成，这个过程发⽣了什么？
1. 浏览器把请求的 URL 交给 DNS 解析，到真实 IP；根据真实 IP 地址，向服务器发起 http 请求
2. 服务器处理 http 请求，返回数据
3. 浏览器接收数据（HTML、CSS、JS、媒体⽂件如图⽚视频等）
4. 浏览器根据接收到的资源⽂件，进⾏页⾯加载渲染
页⾯的渲染过程
1. 根据 HTML 构建 DOM Tree
2. 根据 CSS 构建 CSS Tree
3. 将两颗树合并为 Render Tree（由这⾥可知若 CSS 没有加载完成，页⾯⽆法⽣成 Render Tree，所以 CSS 加载会阻塞页⾯的渲
染）
4. 浏览器根据 Render Tree 渲染页⾯网站底部代码js特效
5. 如遇到 <script> 则暂停渲染，优先加载并执⾏ JS 代码，执⾏完成再继续渲染（如果<script>元素引⽤了外部脚本，就下载该脚本再
执⾏；否则就直接执⾏ JS 代码）
由于渲染引擎和 JS 引擎的互斥性，执⾏ JavaScript 会阻塞 HTML 的解析和渲染，因此我们应当把<script>标签都放在页⾯底部，这样即使遇到脚本失去响应，⽹页主体部分也已被渲染。
渲染的三个步骤：
渲染
1. layout 计算布局：（⽂档流， 盒模型， 计算各个元素的⼤⼩、位置）
2. paint 绘制：（将边框颜⾊、⽂字颜⾊、阴影等都画出来）
3. composite 合成：根据层叠关系显⽰画⾯
如何优化页⾯的渲染？
1.如何防⽌ CSS 阻塞渲染？
对 CSS 进⾏压缩
合理使⽤缓存
减少 HTTP 请求，将多个 CSS 合并成⼀个⽂件，或者直接写成内联样式（缺点就是不能缓存）
2.在页⾯渲染时，如果遇到的 <script> 标签引⽤了外部⽂件，页⾯渲染过程中包含了请求⽂件以及执⾏⽂件的时间，但页⾯的⾸次渲染可能并不依赖这些⽂件，这些请求和执⾏⽂件的动作反⽽延长了页⾯加载的时间。为了避免这种现象，<script> 标签有三个属性：async 属性。⽴即请求⽂件，但不阻
塞渲染引擎，⽂件加载完毕后再阻塞渲染引擎并⽴即执⾏⽂件内容。
async
defer
defer 属性。⽴即请求⽂件，但不阻塞渲染引擎，页⾯渲染完成之后再执⾏⽂件内容。
type = "module"）。让浏览器按照 ECMA Script 6 标准将⽂件当作模块进⾏解析，默认阻塞type 属性，对应值为“module”（type = "module"
type
效果同 defer，也可以配合 async 在请求完成后⽴即执⾏。
除此之外还应当注意：
当渲染引擎解析 HTML 遇到 <script> 标签引⼊⽂件时，会⽴即进⾏⼀次渲染（三个步骤）。所以构建⼯具会把编译好的引⽤ JavaScript 代码的 script 标签放⼊到 body 标签底部，因为当渲染引擎执⾏到 body 底部时会先将已解析的内容渲染出来，然后再去请求相应的JavaScript ⽂件。如果是内联脚本（
即不通过 src 属性引⽤外部脚本⽂件直接在 HTML 编写 JavaScript 代码的形式），渲染引擎则不会渲染。
辨析 load 和 DOMContentLoaded:
辨析
前者：页⾯的全部资源加载完成，包括图⽚、视频等
后者：DOM 渲染完成，此时的图⽚、视频还可能没有加载完
⼀般使⽤后者判定页⾯是否加载完成
回流和重绘
引起 DOM 树结构变化，页⾯布局变化的⾏为叫回流。
只是样式的变化，不会引起 DOM 树变化，页⾯布局变化的⾏为叫重绘。
重绘不⼀定会引起回流，回流⼀定伴随重绘。
回流⽐重绘的代价要更⾼。我们应该怎么避免回流
CSS层⾯：
1. 避免使⽤ table 布局。
2. 尽可能在 DOM 树的最末端改变 class。
3. 将动画效果应⽤到 position 属性为 absolute 或 fixed 的元素上。
JS层⾯：
1. 避免频繁操作样式，最好⼀次性重写 style 属性，或者将样式列表定义为 class 并⼀次性更改 class 属性。
2. 也可以先为元素设置 display: none，操作结束后再把它显⽰出来。因为在 display 属性为 none的元素上进⾏的DOM操作不会引发
回流和重绘。绘。
3. 也可以先为元素设置 display: none，操作结束后再把它显⽰出来。因为在 display 属性为 none 的元素上进⾏的 DOM 操作不会引
发回流和重绘。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。