浏览器环境
五大主流浏览器内核
1.火狐Firefox: Gecko 引擎
2.苹果Safari: WebKit 引擎
3.谷歌Chrome: Blink 引擎
4.IE浏览器: Trident 引擎
5.欧朋Opera: presto引擎浏览器内核主要分成两部分:
渲染引擎(layoutengineerRenderingEngine)和JS引擎。
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
简单说就是把html和css音频视频等,转化成UI可以看到的东西
JS引擎则:解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎浏览器渲染的工作原理
1.浏览器一边下载 HTML 网页,一边开始解析。也就是说,不等到下载完,就开始解析。
2.解析过程中,浏览器发现<script>元素,就暂停解析,把网页渲染的控制权转交给 JavaScript 引擎。
3.如果<script>元素引用了外部脚本,就下载该脚本再执行
4.JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复往下解析 HTML 网页。
如果外部脚本加载时间过长(一直无法完成加载),那么浏览器就会一直
等待脚本下载完成,造成网页长时间失去响应,浏览器就会呈现"假死"
状态,这被称为"阻塞效应"
为了避免“阻塞效应”,我们要把js放在最后。
为了解决脚本文件下载阻塞网页渲染的问题,一个方法是对<script>元素加入defer属性。它的作用是延迟脚本的执行,等到 DOM 加载生成后,再执行脚本添加defer属性渲染顺序
1.浏览器开始解析 HTML 网页。
2.解析过程中,发现带有defer属性的<script>元素。
3.浏览器继续往下解析 HTML 网页,同时并行下载<script>元素加载的外部脚本。
4.浏览器完成解析 HTML 网页,此时再回过头执行已经下载完成的脚本。
添加async属性渲染顺序
1.浏览器开始解析 HTML 网页。
2.解析过程中,发现带有async属性的script标签。
3.浏览器继续往下解析 HTML 网页,同时并行下载<script>标签中的外部脚本。
4.脚本下载完成,浏览器暂停解析 HTML 网页,开始执行下载的脚本。
5.脚本执行完毕,浏览器恢复解析 HTML 网页。
我们无法控制js的加载顺序,哪个先加载完成哪个先运行
何时使用async和defer
如果加载的两个外部文件没有依赖关系,就可以用async,有依赖关系,就要用defer属性。
如果两个都写,就执行async