随着微信公众号，小程序，小游戏越来越普及，前端 HTML5 开发需求也逐渐变大。虽然笔者工作中不直接参与HTML5开发，但经常与前端打交道，故对其中的一些概念打算整理一下。
不管是前端开发人员还是前端用户，最常接触的就是“浏览器”， 主要包括了手机端的 Chrome( android 平台)； Safari( IOS平台)； FireFox ， IE （ Windows平台） 等，浏览器可以理解为一个呈现给用户最终效果的应用。
作为用户了解到以上内容基本可以满足日常使用需要，那么开发人员编写的HTML5代码是如何通过浏览器展示在用户眼前的呢？作为开发人员笔者大致整理了如下流程：
1. 首先开发人员编写的 HTML5代码是存放在服务器的某个路径下。举个例子例如百度，它的HTML5的相关文件都会存放在百度公司的云服务器的某个路径下，然后百度公司会在云服务器上建立一个映射，让访问 https://www.baidu.com 的网络请求，指向云服务器中存放的百度首页的文件，这样当用户在浏览器中输入百度的域名，最终显示的就是百度的首页。
2. 上述过程可能只需要很短暂的时间，但其中可以拆分成如下几步
1） 用户输入百度网址，浏览器向百度云服务器请求资源
2） 百度云服务器收到请求，返回开发人员编写的Html5 内容
3）浏览器收到这些HTML5数据后，交给 浏览器引擎中的一个叫"HTML解析器"的模块
4） HTML解析器会根据数据是 CSS 还是 JS等来判断下一步是交给 CSS解析器还是 JS引擎
5) 经过上述解析后，最终HTML5代码会以较美观的方式呈现在浏览器上
3. 上述流程中，比较关键的步骤是3）和4），执行这两步的其实是浏览器中的“渲染引擎”；所以笔者理解上 “渲染引擎” 也是浏览器的核心部分。
不同的厂家开发了不同的渲染引擎；例如 WebKit ( 被使用在 Safari, Chrome 以及Android浏览器上)；Tridend(IE)、Gecko(FireFox);
其中webkit是苹果发起的一个开源项目，目前占据垄断地位，基于webkit开发的还有 Web OS (据笔者了解一些国外的电视机例如三星，Sony的操作系统是基于Web OS), Chrome OS
4. Webkit的内部结构从底层往上依次是：
1）操作系统： 运行在计算机裸机上的最基础的软件，任何其他软件都必须在操作系统的支持下才能工作，webkit也是运行在操作系统上的。
2）第三方库： 主要包括图形库，网络库，视频库，数据存储库等
3） 中间层：这一层包括三个部分
a) WebCore: 这部分是各浏览器的共享使用部分，包括 Html解析器，CSS解析器，DOM解析器
b) WebKit引擎：默认引擎是 JavaScript Core； 在谷歌系列产品中被替换为 V8引擎
c) Webkit Ports：各浏览器的非共享部分，由于平台差异、第三方库和需求的不同等原因，导致不同浏览器性能和功能差异的关键部分
4) WebKit 嵌入式接口：该接口主要供浏览器调用，与移植密切相关，不同的移植有不同的接口规范。
综上所述，我们在手机或电脑上打开某个网站，硬件依赖于手机（电脑）和网络设备以及云服务器；软件依赖于浏览器，软件方面最核心的是“渲染引擎”，起到了将开发人员编写的HTML5语言，转换成了网页呈现给了用户。
