网络请求

浏览器加载网页

1. 浏览器地址 网络请求 服务器返回一个数据包（html文档）
2. 浏览器解析运行html代码（此时没有图片，css等外部资源）
   • 遇到img标签和src属性会异步的开始请求资源网络请求服务器返回图片编码
   • 遇到link-href script-src同样异步加载资源
   • url 异步加载资源
3. 所有的资源加载完毕了，才会触发window.onload

页面的渲染流程

请求网址对应的资源 得到资源 然后运行文档（简单的过程）

浏览器加载html文档是怎么加载到的

1. 把标签 文本 注释 属性解析为节点树（DOM Tree）
2. 解析DOMtreer中的节点时遇到不同的元素会有不同的操作
   • style标签或是link-css遇到css代码 会把css代码解析为css样式结构体
   • 遇到src会加载（网络请求）资源
3. 把节点树和css样式结构体结合变成呈现树/渲染树
4. 按照Render Tree绘制页面

重绘和重流

重绘：按照文档树的解构，重新绘制

回流：页面的元素排版布局数量和节点树中的位置发生改变就是回流

关系：回流一定发生重绘 重绘不一定引起回流

style的讲解

写在style里面的样式，会绘制成css样式结构体，不能用jd.styel.width来获取

var style1 = document.getComputedStyle(jd)
// style1.width就可以获取

加载事件对应的业务

脚本的异步加载

1. ​

<script src="script.js"></script>

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script async src="script.js"></script>

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

<script defer src="myscript.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

然后从实用角度来说呢，首先把所有脚本都丢到 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能预加载和懒加载

标签：异步,浏览器,请求,script,网络,文档,css,加载
来源： https://www.cnblogs.com/shuilifang/p/16635053.html