浏览器引擎

1 前言 1-1 W3C标准 W3C标准，既一系列标准的集合，他的本质是结构标准语言。就像平时使用的HTML,CSS等都要遵守这些标准。我们这里只讨论W3C网页标准。根据网页主要有三部分组成:结构(Structure),表现(Presentation)和行为(Behavior)。对应的标准也分以下三方面: 结构化标准语言：HTML,XML,XHML 表现标准语言: CSS 行为标准语言: ECMAScript 为什么要遵循W3C标准? 对于我们开发者来说，我们是介于浏览器制造商和浏览器终端使用者的中间位置。也相当于说是一个接口的位置，也就是说我们要同时满足浏览器制造商和浏览器终端使用者的需求，用程序的语言来说就是“转换器”。也是说我们要想方设法的让我们的页面、我们的程序支持所有的浏览器，能够满足尽可能多多的用户。 HTML,XML,XHTML三者区别 HTML 指的是超文本标记语言(Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 XML 指可扩展标记语言（EXtensible Markup Language） XML 是一种标记语言，很类似 HTML XML 的设计宗旨是传输数据，而非显示数据 XML

进程 进程是cpu的资源分配的最小单位。 多进程 ：多进程指的是在同一个时间里，同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。多进程带来的好处是明显的，比如你可以听歌的同时，打开编辑器敲代码，编辑器和听歌软件的进程之间丝毫不会相互干扰。 浏览器是多进程的，浏览器的进程主要包括以下几种： Browser进程：浏览器的主进程（负责协调，主控） 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建 GPU进程：最多一个，用于3D绘制 浏览器渲染进程（内核） ：默认每个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程） 在浏览网页时，同时打开几个新的页面， 这就要打开几个浏览窗口，但一旦开启十几个窗口，整个计算机就会越来越慢。 多进程浏览器的优点 避免页面渲染影响整个浏览器 避免第三方插件影响整个浏览器 多进程充分利用多核优势 方便使用沙盒模型隔离插件等进程，提高浏览器稳定性 通俗的讲，就是用户打开多个窗口，如果其中一个窗口崩掉了，也不会影响整个浏览器，其他的界面照样正常运行 线程 一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线； 进程之间相互独立，但同一进程下的各个线程之间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)。 浏览器的渲染进程

要理解浏览器的工作原理首先要对浏览器有一个初步的认识（几个主流的浏览器：IE、Chrome、Firefox、afari、Opera），浏览器中最核心的部分是渲染引擎（Rendering Engine），也就是所谓的“浏览器内核” 　　其实浏览器的内核除渲染引擎外还包括JS引擎，前者决定了浏览器如何显示网页的内容以及页面的格式信息，主要负责对网页愈发的解释并渲染；后者则是对JavaScript进行解释、编译和执行，从而使网页达到一些动态效果 　　最开始的时候二者并没有很明确的区分，只不过随着JS引擎越来越独立，后来提起内核我们就更倾向于指的是渲染引擎 浏览器的工作流程 　　当我们在浏览器地址栏中敲如url回车后浏览器工作流程大致是这样的：浏览器开启网络请求线程，向服务器发送完整的http请求，再由服务器把数据返回到浏览器中，期间经历了一系列流程如：DNS查询、TCP/IP请求构建、五层因特网网络协议等 　　浏览器在接收到内容后首先会根据文件的编码格式如UTF-8将字节流转为字符流，然后语法解析器根据标签的开始、标签的结束、属性等将html解析成Token（比如<p class='test' >helloworld</p> 就可以拆分为<p标签的开始、class='test'属性、</p>标签的结束）接下来就会把这些词构成一颗DOM树 　　浏览器也会将CSS样式解析成CSSOM树

一、主要概念 1，浏览器内核 　　最初内核的概念包括渲染引擎与JS引擎，目前习惯直接称渲染引擎为内核，JS引擎独立。 最初： 因此以前称，chrome浏览器使用Chromium内核，blink渲染引擎，V8JS引擎。 目前： 因此现在称，chrome浏览器使用blink内核，V8JS引擎。 2，渲染引擎 　　Rendering Engine，一般习惯将之称为“浏览器内核”，主要功能是解析HTML/CSS进行渲染页面，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 3，JS引擎 　　专门处理JavaScript脚本的虚拟机、解释器，用来解释执行js代码。在早期内核也是包含js引擎的，而现在js引擎越来独立了，可以把它单独提出来。 二、主要浏览器内核 Chrome webkit->blink Firefox Gecko Safari webkit Opera Presto->blink IE -> Edge trident->EdgeHTML 备注：最近消息说微软要把edge浏览器引擎换成Chromium内核，看来trident与EdgeHTML算是结束了。 三、主要JS引擎 Chrome V8 Firefox SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-） Safari Nitro（4-）

关于一些排版引擎介绍 （1）Trident Triident 是Interent Explorer（IE）浏览器使用的引擎。Trident 在 Windows 操作系统中被设计为一个功能模块，使得其他软件的开发人员可以便捷地将网页浏览功能加入到其开发的应用程序里。 国内很多的双核浏览器提供了“兼容模式”，该模式便是使用了 Trident 引擎。其代表软件有遨游、世界之窗、QQ浏览器、猎豹安全浏览器、360安全浏览器、360极速浏览器等。 （2）EdgeHTML 微软公司在 Windows10 操作系统中提供了一个新的浏览器 Microsoft Edge，其最显著的特点是使用了新引擎EdgeHTML。EdgeHTML 在速度方面有了极大的提升，在 Trident 基础上删除了过时的旧技术支持代码，增加了许多对现代浏览器的技术支持。 （3）Gecko Gecko 是 Mozilla FierFox（火狐浏览器）使用的引擎，其特点是源代码完全公开，可开发程度很高，全世界的程序员都可以为其编写代码、增加功能。Gecko 原本是有网景公司开发的，现在由 Mozilla 基金会维护。Gecko 是跨平台的，支持在 Windows、 Linux 和 macOS 等操作系统上运行。 （4）WebKit WebKit 是一个开放源代码的浏览器引擎，其所包含的 WebCore 排版引擎和

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( function(){ alert(’你好!’); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了. 同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑! 但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解: div.onclick = function(){ setTimeout( function(){document.getElementById(’inputField’).focus();}, 0); }; 既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚定的信念已开始动摇. 直到最后某一天 , 你不小心写了一段糟糕的代码: setTimeout( function(){ while(true){} } ,

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( function(){ alert(’你好!’); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了. 同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑! 但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解: div.onclick = function(){ setTimeout( function(){document.getElementById(’inputField’).focus();}, 0); }; 既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚定的信念已开始动摇. 直到最后某一天 , 你不小心写了一段糟糕的代码: setTimeout( function(){ while(true){} } ,

五大主流浏览器内核的源起以及国内各大浏览器内核总结 首先来捋一下内核的概念： 浏览器内核又分为两部分：渲染引擎(layout engineer 或者 Rendering Engine) 和JS引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，然后输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释也会有不同，所以渲染的效果也不相同。所有网页浏览器。电子邮件客户端以及其它需要编辑、显示网路内容的应用程序都需要内核。JS引擎则是解析Javascript语言，执行Javascript语言来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分很明确，后来JS引擎越来越独立，内核就倾向于指渲染引擎。有一个网页标准计划小组制作了一个ACID来测试引擎的兼容性和性能。 内核的种类很多，如果再加上没什么人使用的非商业免费内核的话，大概有10多种，但是常见的浏览器内核可以分为这四种： Trident、Gecko、Blink、Webkit 五大主流浏览器（按诞生顺序介绍）： 1、IE（Internet Explore）浏览器 IE的诞生起源于1994年，当时微软为了对抗几乎占据市场百分之九十份额的网景Netscape Navigator（导航者），准备在windows中开发自己的浏览器，取名为Internet Explorer

作者：贝程学院 浏览器内核分为两部分：渲染引擎（Layout Engine 或者 Rendering Engine）和 JS 引擎。早期渲染引擎和 JS 引擎并没有明显区分，随着 JS 引擎越来越独立，内核逐渐变成了渲染引擎的代名词。渲染引擎包括： HTML 解释器 CSS 解释器 布局 网络 存储 图形 音视频 图片解码器 等等 渲染引擎简介 浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。 Webkit是一款开源渲染引擎，它本来是为Linux平台研发的，后来由Apple移植到Mac及Windows上 一.基本概念 DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。 CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。 Render Tree: DOM和CSSOM合并后生成Render Tree。 Layout: 计算出Render Tree每个节点的具体位置。 Painting：通过显卡，将Layout后的节点内容分别呈现到屏幕上。 二.浏览器页面渲染和浏览器工作过程 页面渲染是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的过程

平时在工作中，要优化自己开发的WEB应用的性能，一般是遵循以下几个原则： 1.减少网络请求。 2.压缩、合并静态资源文件，以此来减轻网络传输的带宽压力和资源消耗。 3.代码逻辑层面上的性能优化、比如减少循环次数、减少DOM操作的次数（减少DOM的获取与修改次数）等。 这里就来讲一下为什么DOM操作会影响WEB应用的性能。 DOM与ES的关系 DOM（Document Object Model，文档对象模型）是一个独立于语言的、用于操作XML和HTML文档的程序接口（API），我们可以通过调用其中的方法函数并传入指定的参数来使用。DOM在浏览器中主要用于与HTML文档打交道，并且使用DOM API来访问文档中的数据。DOM是个与ES语言无关的API，它在浏览器中的接口却是用JavaScript来实现的，因此DOM就成了现在JS编码中的重要部分。 在各大浏览器中，DOM的位置与JavaScript的位置是相互独立的（渲染引擎与JS引擎相互独立） 浏览器 JS位置 DOM位置 IE JavaScript的实现名为JScript，位于jscript.dll文件中 DOM的实现则存在另一个库中，名为mshtml.dll（内部称为trident） safari JavaScript部分是由独立的SquirelFish引擎来实现。 DOM和渲染是使用webkit中的webcore实现