请求得到响应后将获取到相应的资源,此时浏览器开始解析资源
这里会涉及一些概念:
- 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>
javaScript编译执行
主要是三个阶段
词法分析:js脚本加载完毕后,会首先进入语法分析阶段,它首先会分析代码块的语法是否正确,不正确则抛出“语法错误”,停止执行。
预编译:js有三种运行环境分别是 全局环境,函数环境,eval。每进入一个不同的运行环境都会创建一个对应的执行上下文,根据不同的上下文环境,形成一个函数调用栈,栈底永远是全局执行上下文,栈顶则永远是当前执行上下文。
执行:js虽然是单线程的,但是实际参与工作的线程一共有四个:JS引擎线程(主),事件触发线程,定时器触发线程,HTTP异步请求线程