浏览器的基础知识
一、浏览器
浏览器市场份额报告
最新的浏览器市场份额报告显示，chrome、IE8以及一些其他开源浏览器已占据主流浏览器市场的大半江山。
1、 浏览器的主要功能
浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置，关于URI的部分在之后的HTTP协议这部分再进行详细的研究。
2、浏览器的主要组成结构
-
用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
-
浏览器引擎 － 用来查询及操作渲染引擎的接口。
-
渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
-
网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
-
UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
-
JS解释器 － 用来解释执行JS代码。
-
数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
3、渲染引擎（The rendering engine）
渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。
默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。
- 主流的浏览器渲染引擎有：
- Geoko——Mozilla自主研发的渲染引擎(FireFox 使用的就是Geoko)；
- webkit——Webkit是一款开源渲染引擎，它本来是为Linux平台研发的，后来由Apple移植到Mac及Windows上（类似chrome,Safari使用的是Webkit引擎）；
4、浏览器的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
需要注意的是，浏览器渲染的过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
webkit主流程.png
Geoko渲染引擎主流程
5、解析与DOM树构建（Parsing and DOM tree construction）
-
解析（Parsing－general）
解析一个文档，指的是将文档转换为具有一定意义的结构——编码可以理解和使用的东西。解析的结果通常是表达文档结构的节点树，称为解析树或语法树。 -
文法（Grammars）
解析基于文档依据的语法规则——文档的语言或格式。每种可被解析的格式必须具有由词汇及语法规则组成的特定的文法，称为上下文无关文法。人类语言不具有这一特性，因此不能被一般的解析技术所解析。 -
解析器－词法分析器（Parser－Lexer combination）
-
转换（Translation）
二、CSS和JS在网页中的放置顺序是怎样的？
css一般是放在<head></head>标签内，而JS一般是放在<body></body>标签内的最后位置，外链方式为<script src=" "></script>中，内置样式为<script></script>。
-
其实对于css而言，样式表不是一定要放在<head></head>,但是如果将css样式表放在文档底部，考虑到浏览器是自上而下的对网页文档进行解析，当浏览器将html结构已经解析完毕，而css的样式有可能还未完成，这样对用户的体验会有影响，故一般是将其放在<head></head>标签内，让样式表被优先解析；
-
JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。因此一般将JS放置在<body></body>的末尾位置，这样减少对于页面的下载和渲染的影响。
知乎上关于几个html标签顺序排放问题的讨论
知乎上的相关讨论
三、解释白屏和FOUC
-
白屏问题
-
如果把样式放在底部，对于IE浏览器，chrome等（CSS全部加载后再呈现,有可能等待时间长），在某些场景下(新窗口打开，刷新等)页面会出现白屏，而不是内容逐步展现。
-
使用@import标签，即使CSS放入link, 并且放在头部,也可能出现白屏。
-
对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。 但在加载JavaScript时，会禁用并发，并且阻止其他内容的下载。所以把JavaScript放入页面顶部也会导致白屏现象。
-
FOUC
Flash of Unstyled Content "无样式内容闪烁“：有些浏览器是边渲染边呈现，CSS放置body标签底部，会出现加载html结束后才一次性加载css样式，从而导致页面闪烁。
