标签：异步 浏览器 请求 script 网络 文档 css 加载
浏览器加载网页
- 浏览器地址 网络请求 服务器返回一个数据包（html文档）
- 浏览器解析运行html代码（此时没有图片，css等外部资源）
- 遇到img标签和src属性会异步的开始请求资源网络请求服务器返回图片编码
- 遇到link-href script-src同样异步加载资源
- url 异步加载资源
- 所有的资源加载完毕了，才会触发window.onload
页面的渲染流程
请求网址对应的资源 得到资源 然后运行文档（简单的过程）
浏览器加载html文档是怎么加载到的
- 把标签 文本 注释 属性解析为节点树（DOM Tree）
- 解析DOMtreer中的节点时遇到不同的元素会有不同的操作
- style标签或是link-css遇到css代码 会把css代码解析为css样式结构体
- 遇到src会加载（网络请求）资源
- 把节点树和css样式结构体结合变成呈现树/渲染树
- 按照Render Tree绘制页面
重绘和重流
重绘：按照文档树的解构，重新绘制
回流：页面的元素排版布局数量和节点树中的位置发生改变就是回流
关系：回流一定发生重绘 重绘不一定引起回流
style的讲解
写在style里面的样式，会绘制成css样式结构体，不能用jd.styel.width来获取
var style1 = document.getComputedStyle(jd)
// style1.width就可以获取
加载事件对应的业务
脚本的异步加载
-
<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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。