浏览器环境

浏览器环境

五大主流浏览器内核
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