浏览器文件下载顺序
经典的用户输入url发生了什么?这里就不过多的赘述。自行去找相关的文章,这里用一张图来简要说明浏览器下载html/css/js等静态文件顺序
浏览器内核以及页面渲染过程
所有下载下来的静态资源再浏览器内核中解析,常见浏览器内核有以下这些:
- Gecko:早期Netscape和Mozilla Firefox浏览器浏览器使用;
- Trident:微软开发,IE4~IE11浏览器中使用
- Webkit:苹果基于KHTML开发、开源的,用于Safari,Google Chrome之前也在使用;
- Blink:是Webkit的一个分支,Google开发,目前应用于Google Chrome、Edge、Opera等; 内核通常有两部分组成:webCore(html/css渲染) 和 js引擎(v8)
内核解析渲染这些静态资源过程如下图:
js引擎
javascript为高级语言需要js引擎转化为对应CPU所认识的机器指令来执行.
常见的js引擎有这些:
- SpiderMonkey:第一款JavaScript引擎,由Brendan Eich开发(JavaScript作者);
- Chakra:微软开发,用于IE浏览器;
- JavaScriptCore:Apple公司开发,WebKit中的引擎;
- V8:Google开发的js引擎,也是现在浏览器和node中常用的js引擎;
V8工作原理
总结
文章主要用流程图的方式把浏览器对页面的渲染过程和V8对js代码的解析运行过程简单描述了一遍,平时前端开发,浏览器和V8对于我们来说就是一个黑盒,无需关心他怎么运行;但是如果了解他整个运行对我们学习js作用域、变量提升的理解有很大帮助!