浏览器解析资源

最新推荐文章于 2024-08-22 19:58:04 发布

广东话的蛇皇

最新推荐文章于 2024-08-22 19:58:04 发布

阅读量547

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/114324118

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

请求得到响应后将获取到相应的资源，此时浏览器开始解析资源
在这里插入图片描述
这里会涉及一些概念：

BOM 指的是浏览器对象的集成（树）
DOM 指的是文档对象的集成（树）
window 指的是浏览器最顶层包裹对象
document 指的是文档最顶层包裹对象

html页面的加载
浏览器解析是从上往下一行一行地解析的。
解码：传输回来的其实都是一些二进制字节数据，浏览器需要根据文件指定编码（例如UTF-8）转换成字符串，也就是HTML 代码

预解析：预解析做的事情是提前加载资源，减少处理时间，它会识别一些会请求资源的属性，比如img标签的src属性，并将这个请求加到请求队列中。

符号化：符号化是词法分析的过程，将输入解析成符号，HTML 符号包括，开始标签、结束标签、属性名和属性值。它通过一个状态机去识别符号的状态，比如遇到<，>状态都会产生变化。

构建树：在上一步符号化中，解析器获得这些标记，然后以合适的方法创建DOM对象并把这些符号插入到DOM对象中。

浏览器的容错机制：你从来没有在浏览器看过类似”语法无效”的错误，这是因为浏览器去纠正错误的语法，然后继续工作。

CSS解析
一旦浏览器下载了 CSS，CSS 解析器就会处理它遇到的任何 CSS，根据语法规范解析出所有的 CSS 并进行标记化，然后我们得到一个规则表。

在匹配一个节点对应的 CSS 规则时，是按照从右到左的顺序的

异步加载javascript的三种方案
1.defer 异步加载，但要等到dom文档(整个页面解析完，dom树解析完)全部解析完成才会被执行，只有IE能用，也可以将代码写到内部（执行时不阻塞页面）可以把js写在script标签里。

<script type="text/javascript" src="tools.js" defer="defer"></script>

2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里。（执行时不阻塞页面）W3C标准，IE9以上可用

<script type="text/javascript" src="tools.js" aysnc="aysnc"></script>

3.创建script，插入到DOM中，加载完毕后callback

<script type="text/javascript">
	var script = document.createElement('script');
	script.type = "text/javascript";
	

	//IE方法用状态码，加载中时未loading
	if(script.readystate){
		script.onreadystatechange = function () {
		if(script.readystate == "complete" || script.readystate == "loaded"){
		}
	}
}else{
			script.onload = function () {
	//这里面的代码就可以保证在加载完资源后再执行，保证不会出现代码执行时资源来不及加载，该方法IE不兼容
	}
		}
		script.src = "tools.js";//加载，加载时间可能会大于程序执行时间（微妙单位）避免网速太快无法状态码改变触发事件所以放到事件绑定代码后
	document.head.appendChild(script);//插入执行
</script>