高级JS--浏览器底层机制!什么是浏览器底层机制？你了解浏览器底层机制吗?

浏览器机制

浏览器拿到代码后，会渲染和解析代码，最后在页面中渲染除图形和效果

• 渲染HRML/CSS代码：基于WC3规范规定，进行编写代码，浏览器按照WC3规范进行解析(通俗来说浏览器就相当于一个画家来按照你的需求来给你绘画),由GUI渲染线程来进行处理
• 渲染JS代码：ECAMScript(ECMA-262[代表ECMAScript的版本号])规则，交给JS引擎线程去处理
  +如果在渲染代码中，遇到了link/img/script[src=‘XXX’]/audio/viodeo等都需要从服务器获取资源，此时浏览器需要开辟HTTP线程，从服务器端获取到这些对应的资源文件(文件中的代码)拿到代码之后才可以进行解析

例子：例如你随意打开一个官网，你去在控制台查看结构，
就会发现首先看到的都只是HTML结构，没有css和js，
那么在渲染页面的过程中 遇到了link或者带有src的script标签
则单独专门去服务器拿取数据

具体渲染过程

第一步

小科普：
什么是结点:文本.注释等等
HTTP：获取数据操作都是HTTP请求

1. GUI在渲染HTML代码的时候,会分析出结点之间的嵌套关系，从而绘制出DOM树(DOM-Tree)[自上而下全部识别一遍知道了嵌套关系从而生成DOM-Tree]

• 如果在渲染过程中遇到了link，则开辟新的HTTP线程去获取资源文件，GUI不受影响，继续向下渲染它是 ‘异步操作’
• 如果遇见style则无需获取资源，代码本身就有,此时GUI直接去渲染即可‘同步操作’
• 如果遇见的是@import也会开辟新的HTTP去获取资源但是此时会阻碍GUI的渲染，只有当样式资源获取后，GUI才会渲染新拿到的资源样式代码’同步操作’
  建议：代码少的情况下使用style内嵌式即可(尤其是移动端，经常这样干
  如果代码继续使用style，则会导致HTML请求速度降低，此时使用Link(外链式，因为link不是阻碍GUI的渲染),除特殊情况不建议使用@impor导入式，他会非常消耗你的性能耗费渲染时间，因为每一次都必须上一个执行完，才能执行下一个，需要等待

面试题：link和@import的区别？

只需要一句话：link不会阻碍GUI的渲染，在GUI渲染的同时开辟新的线程去获取资源文件这是一个异步操作，而@import会阻碍GUI的渲染，只有等资源获取到之后GUI才可以继续向下渲染这是一个同步操作。

第二步