认识浏览器

对于前端开发而言，最必不可少的工具就是浏览器，但是之前对于浏览器的了解只是停留在使用的层面，最近决定对于浏览器需要重新认识一下它，根据以前的使用和《WebKit技术内幕》这本书为大家做一下分享，当然在下面的说法中，也可能存在不详尽或者有误的地方，欢迎指正

浏览器介绍

浏览器的功能：网络、资源管理、网页浏览、多页面管理、插件和扩展、书签管理、历史记录管理、设置管理、下载管理、账号和同步、安全机制、隐私管理、外观主题、开发者工具等

网络：它是第一步，浏览器通过网络模块来下载各种各样的资源，例如HTML文本、JavaScript代码、样式表、图片、音视频文件等。网络部分其实非常重要，因为它耗时比较长并且需要安全访问互联网上的资源

资源管理：从资源下载或者本地获取资源，并将它们管理起来，这需要高效的管理机制，例如如何避免重复下载资源、缓存资源等，都是它们需要解决的问题

网页浏览：这是浏览器的核心也是最基本、最重要的功能，它通过网络下载资源并从资源管理器获得资源，将它们转变为可视化的结果（浏览器内核的最终要的功能）

多页面管理：支持多个页面同事加载，解决多页面的相互影响和安全等问题也非常重要，解决方法：使用进程或者使用线程来绘制网页

插件和扩展：插件是用来显示网页特定内容的，而扩展则是增加浏览器新功能的软件或者压缩包

安全机制：本质是提供一个安全的浏览器环境，避免用户信息被各种非法工具窃取和破坏，这可能包括显示用户访问的网站是否安全，为网站设置安全级别、防止浏览器被恶意代码攻破等

开发者工具：审查HTML元素、调试JavaScript代码，改善网页性能等

浏览器核心的种类

浏览器的种类实在是太多，如IE、Firefox、Chrome、Opera等，但是浏览器内核的种类就比较少了，分别是Trident、Gecko、WebKit和Presto、Blink，对于Trident来说，代表的产品就是Internet Explorer（IE），Gecko的代表就是Mozilla Firefox，WebKit的代表就是Safari、Chrome，Presto的代表是Opera（之前版本），现在Opera使用的是Blink内核

Blink内核是开源引擎WebKit中的WebCore组件的一个分支，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用，Blink目前是从WebKit直接复制出的一个版本，将与Chromium无关的Ports都去掉，将代码结构重新整理

浏览器之间产生兼容性的原因

通过上面就可以看出，因为不同的浏览器可能使用不同的浏览器内核，因为内核的不同所以导致各个浏览器对于网页的解析产生了差异，在做前端方面的工作时，对于兼容性的问题的解决，可以从三方面入手：HTML、CSS、JavaScript

HTML差异性主要体现在对HTML5的支持上，

关于JavaScript的兼容性：

• 事件绑定的方法，addEventListener和attachEvent（IE）

• event属性获取目标元素的方法，event.target和event.srcElement（IE）

• Ajax的实现方式，XMLHttpRequest和ActiveXObject（IE）

• DOM元素的属性，childNodes和children，childNodes它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点，通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点，children只返回HTML节点，甚至不返回文本节点

• 对于IE浏览器，有event.x和event.y属性，在Firefox下，event.pageX和event.pageY是存在的

  ​

一些关于WebKit的概念

当我在看那本书的时候，就看到这样几个概念，觉得比较容易混淆，所以专门列举出来

WebKit：一个开源的项目，其前身来自于KDE的KHTML和KJS，该项目专注于网页内容的展示，开发出一流的网页渲染引擎，该项目包含两部分，一部分是WebCore，其中包含着对HTML、CSS等很多W3C规范的实现，第二部分是狭义的WebKit，它主要包含各个平台的移植并提供相对应的Web接口，也就是WebView或者类似WebView，这些接口提供操作和显示网页的功能。目前使用WebKit的主流的浏览器包括Chrome, Safari, QtWebKit, Android Browser以及众多的移动平台的浏览器

WebKit2：相对于狭义的WebKit而言，不是简单的第二个版本，它是新的API层，最主要的变化在于将网页的渲染置于单独的进程，而接口层在另外一个进程，它们之间使用IPC来通讯。对于接口的调用者来说，中间的IPC和地下的是现实透明的，这样做的最明显的好处是，当网页的渲染出现问题的时候，不会阻碍Web解口的调用者进程，提高了浏览器的稳定性和安全性

Chromium：是建立在WebKit上的开源项目，由Google发起，引入了很多先进的技术，如跨进程模型、沙箱模型等，也支持很多新的规范，如WebGL、Canvas2D、CSS3以及HTML5特性

Chrome：是Google公司的浏览器产品，基于Chromium开源项目，但是Chrome的代码却没有开源，因为含有Google的私有Code和很多服务，Chrome可以自动更新，Chrome的版本更细是落后于Chromium的

WebKit架构

上面的图来自《WebKit技术内幕》书中，由此也可以看出大体上分为了四个层次：

1.最底层为操作系统层，这个也就说明了WebKit可以运行在不同的操作系统上

2.所依赖的第三方库：主要有图形库、音频库、视频库

3.WebKit层，它又可以分为三部分WebCore、JavaScriptCore、WebKit Ports

WebCore：与平台无关，可以被多个浏览器移植使用，起加载和渲染网页的部分，具体包括了HTML解释器（HTML解析）、CSS解释器（CSS解析）、SVG、DOM、渲染树（RenderObject树、RenderLayer树等），以及Inspector（Web Inspector、调试网页）

JavaScriptCore：在WebKit中起到的作用是解析和提供执行环境

WebKit Ports：WebKit中的非共享部分，所谓一个WebKit Port，并没有确切的形式，可以看作是OS，平台（应用程序框架），JS引擎，以及各种第三方库的一个组合，详细介绍

4.WebKit接口层：主要是提供嵌入式编程接口，提供给浏览器调用

博文开始正常更新中，希望对你有用 ^_^