java贪吃蛇论文详细的浏览器解析html过程
从头开始说起，可能有些地⽅不是很全，以后学习过程中慢慢补齐
1、⽤户在地址栏输⼊⼀个URL，⾸先在浏览器⾥查有⽆与当前域名对应的ip地址，若没有再查看操作系统有⽆缓存，若没有再查看路由器有⽆缓存；
若没有，会发送DNS请求到本地DNS服务器（⼀般为移动、电信等），查看本地DNS服务器有没有；若有，则在本地域名服务器查，采⽤递归查；
若仍然没有，本地DNS服务器回向根DNS服务器发起请求，采⽤迭代查。依次向顶级、权限域名服务器查，最终获取到对应的ip地址。
2、缓存服务器CDN
3、进⾏http请求，三次握⼿四次挥⼿
拓展：为啥是三次握⼿和四次挥⼿，不是其他次数呢？这⼏次连接中到底发⽣了什么？
4、服务器返回结果，304或202
304：客户端有缓存，直接使⽤客户端缓存就⾏
202：返回结果成功axios实例
拓展：客户端返回的状态码有哪些？
5、开始解析返回的HTML代码
浏览器渲染引擎从上往下执⾏代码（包括HTML,CSS和JS），解析html⽣成DOM树，同时解析CSS代码⽣成css rule tree，同时把DOM tree和css rule tree合并⽣成render tree，同时还会去请求另⼀些资源，所以渲染引擎会同时⼲很多事，迫不及待地把内容渲染出来，如果后⾯的代码会改变之前的样式，会引起回流和重绘。
6、计算图层布局
render tree⽣成之后，会进⾏计算图层布局，所有元素的相对位置和⼤⼩信息都在这⼀步计算
7、绘制图层
将页⾯图层转化为像素
8、整合所有图层，得到页⾯
继续详细解释第5步
外联的资源会不会影响当前DOM的解析呢？有些会有些不会，分为两类：阻塞型、⾮阻塞型，区分它们的标志是派发DOMContentLoaded事件的时间点，DOMContentLoaded的派发相当于DOM树的创建完成
阻塞型（DOMContentLoaded派发前）:
1、内联js代码
2、外联普通js代码
3、外联defer属性js代码
4、内联css代码
5、script标签之前的外联css⽂件（该css⽂件被js依赖）
说明：
1、为啥defer js代码也算阻塞型？
实际上defer js是在DOMContentLoaded派发前，DOM树创建完成之后执⾏的，应该不会阻塞dom树的解析，但是这⾥是⽤DOMContentLoaded的派发时间做区分的，因此它属于阻塞型。
2、为啥外联的在script标签以前的css⽂件是阻塞型？
因为后⾯的js⽂件会阻塞dom的解析，js代码⾥也有可能会获取样式，所以浏览器⼀般会把script标签之前的css⽂件都解析掉
⾮阻塞型（DOMContentLoaded派发后）：
1、外联async属性js代码
2、img
3、iframe
4、script标签之后的外联css⽂件
可以通过检查load事件来判断⾮阻塞事件是否完成
外联JS的种类
外联JS可分为三种：普通型，⾃带defer属性和⾃带async属性
1、普通型
外联JS⽂件⼀般通过script标签引⼊，默认是同步加载，即执⾏完js⽂件才继续执⾏下⾯的HTML代码。当浏览器解析到<script>标签时，会交由js引擎执⾏，同时不会解析script标签包含的内容，遇到</script>标签结束。
html个人网页完整代码顺序<script src='abcd'>console.log('1111')</script>
//不会输出1111
他在页⾯中有两种放置位置，第⼀种是在head标签内，第⼆种是在body标签⾥的最下⾯，</body>前⾯。
list set map区别head标签内：会先下载完所有head标签内的js代码，再去解析body标签内的HTML代码，当js⽂件过多过⼤时，浏览就会在短时间内显⽰空⽩，⽤户体验不好
body标签内：这样不会影响html代码的解析，但是对于⼀些依赖js的⽹页，就显得慢了。
所以最好的⽅法是⼀边解析，⼀边下载
2、⾃带defer属性
defer属性：⼀边解析HTML⼀边下载js⽂件，下载好之后放到⼀个序列⾥，等到DOM树创建完成之后在执⾏
android应用开发心得体会如果有多个外联defer js⽂件，则肯定会按照书写顺序执⾏，且⼀定在DOMContentLoad事件前执⾏，因此引⼊注意顺序
3、⾃带async属性
我是一个switch是什么意思async属性：⼀边解析HTML⼀边下载js⽂件，下载完成后⽴马执⾏，执⾏时仍然会阻塞html代码解析
如果有多个外联async js⽂件，则哪个先下载完先执⾏哪个，不⼀定按照书写顺序执⾏

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