前端浏览器解析

当前主流浏览器（有自己的内核）

Google Chrome（Blink/webkit）

Firefox（gecko）

Safari（webkit）

IE（trident）

Opera（presto）

浏览器的作用

向服务器请求我们所需要的资源，这里的资源一般是html，也可以是pdf、图片、zip压缩包或者其他类型，资源的位置由用户使用URI（统一资源标识符）来指定，浏览器获取到html文件后会进行解析和显示，html中包含着js、css代码，这些代码的规范由W3C组织来规范

URL（统一资源定位符）

浏览器组成：shell + 内核

浏览器的shell部分

也是浏览器的外表界面，各大浏览器界面差异不同，有各自的特色，没有任何规范规定

浏览器内核部分

• 浏览器引擎，用于用户界面和呈现引擎之间传送指令
• 呈现引擎，用于解析请求回来的html文档，并显示到页面上

呈现引擎工作流程：

解析-parser

语言解析：编译原理把语言分为解释性语言和编译型语言

解释性语言：如php，JavaScript，python，解释型语言代码每执行一次就要进行一次解释翻译，解释性语言必须先解释再运行，效率较低，翻译和执行工具我们称之为解释器。语言执行过程：词法分析-语法分析-翻译解释执行

编译型语言：如c，c++，编译型语言通过编译器编译成计算机能执行的文件，一次编译永久使用，执行效率高。语言执行过程：词法分析-语法分析-编译成可执行文件

Java语言：解释+编译，Java的跨平台就是通过编译器编译成了字节码文件，然后通过各个平台的jvm进行解释执行

解析文档：遍历html文档节点构成解析树（语法树）

DOM树

CSS树

浏览器解析DOM、CSS、Javascript的顺序

早期浏览器遇到JavaScript脚本就会停止文档解析，先执行完JavaScript脚本然后再接着解析文档，h4、h5之后新增了script标签defer和async属性，defer属性的脚本会留到文档全部解析完成后执行，h5中async属性的脚本会在解析文档的同时进行JavaScript的解析执行

webkit和firefox都有预解析机制，预解析器会解析外部脚本、css样式、图片

css样式表

在解析css样式表时，浏览器一般会停止对JavaScript脚本的解析，因为JavaScript中可能会对css进行修改，所以一般css文件会在head标签引入，JavaScript脚本会在body中引入

呈现树会和DOM树同时进行构建，样式计算会计算出各个呈现对象的样式进行展示

• 网络，用于发送请求，提供浏览器底层支持
• JavaScript解释器，解释并执行JavaScript代码
• 数据存储，用于存储数据，比如cookie、session、localStorage、sessionStorage

参考自https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/