一、主流浏览器
浏览器可以分为两部分，外壳+内核。其中外壳的种类相对比较多，内核则比较少。
外壳：
Shell，浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。
内核：
浏览器内核分成两部分：渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎，负责请求网络页面资源加以解析排版并呈现给用户
主要组件包括：
1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是所看到的除了用来显示所请求页面的主窗口之外的其他部分
2. 浏览器引擎 － 用来查询及操作渲染引擎的接口
3. 渲染引擎 － （浏览器兼容问题的原因）用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6. JS解释器 － 用来解释执行JS代码。
7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。
常见浏览器渲染引擎：Trident、Gecko、Webkit、Blink
Trident内核：IE浏览器，360，猎豹，百度；
Gecko内核：火狐；
Presto内核：Opera7及以上版本（已废弃）
Webkit内核:遨游，Safari、Chrome谷歌浏览器；
Blink内核:Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器，大部分国产浏览器最新版本都采用Blink；
对浏览器兼容问题，一般分，HTML，Javascript兼容，CSS兼容。 其中html相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是。
渲染引擎工作原理：
渲染流程可简单地理解成一个线性串联的变换过程的组合，原始输入为URL地址，最终输出为页面Bitmap，中间依次经过了Loader（加载）、Parser（解析）、Layout（布局）和Paint（绘制）模块。
<1>渲染引擎先解析 HTML，将标签转换成树的节点——叫作”DOM树”。然后解析CSS样式数据，包括外联样式和内联样式。样式信息和 HTML 中的可视指令一起用于创建另一棵树——渲染树（此时只是html元素与自身css的组合，即先把元素样子做好了，还没有放到指定位置）。渲染树包含具有可视属性（如颜色和尺寸）的矩形。矩形按正确的顺序显示在屏幕上。
<2>渲染树构建完成后，就进入”Layout布局/回流“流程（此时网页整体显示效果已经在引擎内部有了但是还没有放到界面上）。也就是给每个节点分配正确的坐标——节点应该显示在屏幕上的哪个位置。
<3>下一步就是重绘Paint——将遍历渲染树，通过用户界面（UI）后端层绘制每个节点。Paint模块负责将Render树映射成可视的图形，它会遍历Render树调用每个Render节点的绘制方法将其内容显示在一块画布或者位图上，并最终呈现在浏览器应用窗口中成为用户看到的实际页面。
重要的是要理解这是一个循序渐进的过程。为了更好的用户体验，渲染引擎将尽可能快地在屏幕上呈现内容。它不会等到所有的 HTML 都解析完成才开始构建和布局渲染树。当程序还在持续处理来自网络层的内容时，它已经解析和呈现了部分内容。
二、常见问题
CSS兼容问题：
10.随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方案：css里 *{margin:0;padding:0;}
JQurey版本支持问题： jQuery 2版本以上是不支持 IE6，7，8 浏览器
使用的是 IE6，7，8 浏览器的话，你就得选择使用jQuery1.9版本的，或者，你也可以通过条件注释在使用 IE6，7，8 浏览器的时候只允许包含 jQuery 1.9.
条件注释代码如下：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/223485.html原文链接：https://javaforall.net
