浏览器引擎 | 易学教程

深入理解Javascript单线程谈Event Loop

阅读更多关于深入理解Javascript单线程谈Event Loop

假如面试回答 js 的运行机制时，你可能说出这么一段话： “Javascript 的事件分同步任务和异步任务，遇到同步任务就放在执行栈中执行，而碰到异步任务就放到任务队列之中，等到执行栈执行完毕之后再去执行任务队列之中的事件。 ” 但你能说出背后的原因吗？ 1. 线程与进程进程：是系统资源分配和调度的单元。一个运行着的程序就对应了一个进程。一个进程包括了运行中的程序和程序所使用到的内存和系统资源。线程：线程是进程下的执行者，一个进程至少会开启一个线程（主线程），也可以开启多个线程。 2.同步和异步同步和异步关注的是：消息（结果）通信机制。同步：发出调用后，在没有得到结果前，该调用不返回。但是一旦调用返回，就得到返回值异步：发出调用后，调用直接返回，没有返回结果。但结果由回调函数给出，至于什么时候给出，不知道。（这个回调函数肯定是在当前 js 执行完后才执行） 3.阻塞与非阻塞阻塞和非阻塞关注的是：程序在等待调用结果时的状态 . 阻塞调用：调用结果返回之前，当前线程被挂起。调用线程只有在得到结果后才会返回。非阻塞调用：在不能立刻得到结果之前，该调用不会阻塞当前线程。 4. 为什么 JavaScript 是单线程？ JavaScript 是单线程，程序按照顺序排列，前面的必须处理好，后面的才会执行。 JavaScript

浏览器引擎——渲染引擎和JavaScript引擎

阅读更多关于浏览器引擎——渲染引擎和JavaScript引擎

渲染引擎主要作用：1.解释html和css。2.绘制页面。每种浏览器的渲染引擎可能会不一样，但都遵循W3C标准开发而成，方便Web技术的互相兼容性。比较常见的几种渲染引擎 IE: Trident Firefox: Gecko Safari:Webkit Chrome:Blink JavaScript引擎主要作用：解释并执行JavaScript。每种浏览器也会有不同的JavaScript引擎，但都遵循ECMAScript标准开发而成，便于兼容JavaScript技术。比较常见的几种JavaScript引擎 IE: Chakra Firefox: TraceMonkey Safari: Nitro Chrome: V8 引擎怎么工作？引擎的目的：读取和编译JavaScript代码。谷歌的V8引擎，用C ++编写，也编译和执行JavaScript源代码，处理内存分配，垃圾收集剩余物。它的设计包括两个编译器，它们直接将源代码汇编到机器代码中。未完待续。。。来源： CSDN 作者：赵自煜（赵超）链接： https://blog.csdn.net/zhaoshidaye666/article/details/103530359

浏览器基础

阅读更多关于浏览器基础

浏览器基础浏览器的组成人机交互部分（UI）网络请求部分（Socket） JavaScript引擎部分渲染引擎部分（渲染HTML、CSS等）数据存储部分（cookie、HTML5中的本地存储LocalStorage、SessionStorage）主流渲染引擎介绍渲染引擎又叫排版引擎或浏览器内核主流的渲染引擎有 Chorm浏览器：Blink引擎（webkit的一个分支） Safari浏览器：webkit引擎 FirFox浏览器：Gecko引擎 Opera浏览器：Blink引擎 Internet Explore浏览器：Trident引擎 Microsoft Edge浏览器：EdgeHTML引擎（Trident的一个分支）工作原理解析HTML构建DOM树，DOM是w3c组织推荐的处理可扩展置标语言的标准编程接口构建渲染树，渲染树并不等同于DOM树，因为像head标签或display：none这样的元素就没必要放到渲染树中了，但是他们在DOM树中对渲染树进行布局，定位坐标大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫做layout或reflow 绘制渲染树，调用操作系统底层API进行绘制操作浏览器访问网站过程在浏览器中输入地址浏览器通过用户在地址栏中输入的URL构建HTTP请求报文浏览器发送DNS解析请求

JS异步开发

阅读更多关于 JS异步开发

1,前言　　众所周知，JS语言是单线程的，在实际的开发过程中，JS的同步操作会阻塞页面乃至整个浏览器的运行，在用户看来就是页面卡住，只有同步操作进行完毕之后才会进行其他的处理，这种同步等待的用户体验极差，所以JS中引入了异步编程思想，主要就是不阻塞主线程的运行，用户直观的感受就是页面不会卡住. 2,概念　　2.1,浏览器的进程和线程　　首先可以确定一点是浏览器是多进程的，比如打开多个窗口可能就对应着多个进程，这样可以确保的是页面之间相互没有影响，一个页面卡死也并不会影响其他的页面。同样对于浏览器进程来说，是多线程的，比如我们前端开发人员最需要了解的浏览器内核也就是浏览器的渲染进程，主要负责页面渲染，脚本执行，事件处理等任务。为了更好的引入JS单线程的概念，我们将浏览器内核中常用的几个线程简单介绍一下　　　　（1）：GUI渲染线程负责渲染浏览器页面，解析html+css,构建DOM树，进行页面的布局和绘制操作，同事页面需要重绘或者印发回流时，都是该线程负责执行。　　　　（2）：JS引擎线程 JS引擎，负责解析和运行JS脚本，一个页面中永远都只有一个JS线程来负责运行JS程序，这就是我们常说的JS单线程　　　　　　　　注意： JS引擎线程和GUI渲染线程永远都是互斥的，所以当我们的JS脚本运行时间过长时，或者有同步请求一直没返回时，页面的渲染操作就会阻塞

setTimeout 的黑魔法

阅读更多关于 setTimeout 的黑魔法

setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实.有着一个很不平凡的名字--定时器.让年少的我天真的以为自己可以操纵未来.却不知朴实之中隐含着惊天大密.我还记得我第一次用这个函数的时候,我天真的以为它就是js实现多线程的工具.当时用它实现了一个坦克大战的小游戏,玩儿不亦乐乎.可是随着在前端这条路上越走越远,对它理解开始产生了变化.它似乎开始蒙上了面纱,时常有一些奇怪的表现让我捉摸不透.终于,我的耐心耗尽,下定决心,要撕开它的面具,一探究竟. 要说setTimeout的渊源,就得从它的官方定义说起.w3c是这么定义的 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。看到这样一个说明,我们明白了它就是一个定时器,我们设定的函数就是一个"闹钟",时间到了它就会去执行.然而聪明的你不禁有这样一个疑问,如果是settimeout(fn,0)呢?按照定义的说明, 它是否会立马执行 ?实践是检验真理的唯一标准,让我们来看看下面的实验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> alert(1); setTimeout("alert(2)", 0); alert(3); <

浏览器的细说

阅读更多关于浏览器的细说

一：对浏览器的内核了解：浏览器内核由两个部分组成：渲染引擎和 JS引擎渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。 JS引擎：解析和执行JavaScript来实现网页的动态效果。二.常见的浏览器内核有哪些？ IE浏览器内核：Trident内核，也被称为IE内核 Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核 Firefox浏览器内核：Gecko内核，也被称Firefox内核 Safari浏览器内核：Webkit内核 Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核 360浏览器、猎豹浏览器内核：IE+Chrome双内核搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+ Webkit（高速模式）百度浏览器、世界之窗内核：IE内核三.JS引擎的组成有：编译器：将源代码编译成抽象语法树，在某些引擎中还包含将抽象语法树转换成字节码。解释器：在某些引擎中，解释器主要是接收字节码，解释执行这个字节码，同时也依赖垃圾回收机制等 JIT

浏览器内核

阅读更多关于浏览器内核

浏览器一般分为外壳和内核两个部分，我们一般比较常见的就是外壳，而内核却很少见到，大多数人也不了解。今天我们来讲讲浏览器的内核。现在市面上比较常见的浏览器有IE 百度 Chrome QQ浏览器搜狐 Firefox Safari Opera ,浏览器最重要的是浏览器的内核，浏览器内核是浏览器核心，用于显示网页内容及页面的格式信息。浏览器内核又分为两个部分，渲染引擎(layout engineer 或者 Rendering Engine)和js引擎，渲染引擎负责负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。js引擎负责解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。 IE浏览器： IE是微软旗下的浏览器，国内用户较多

v8

阅读更多关于 v8

V8 - 开源，由Google开发，用C ++编写 Rhin- 由Mozilla基金会开源，完全用Java开发 SpiderMonkey 第一个JavaScript引擎，Netscape Navigator，Firefox JavaScriptCore 苹果公司为Safari开发 KJS 最初由Harri Porten为KDE项目的Konqueror网络浏览器开发 Chakra** (JScript9) Microsoft Edge Chakra** (JavaScript) Microsoft IE9-IE11 Nashorn 作为OpenJDK的一部分，由Oracle Java语言和工具组编写 JerryScript 一个物联网的轻量级引擎链接：https://www.jianshu.com/p/81f6ded64ab2 来源： https://www.cnblogs.com/hshy/p/12008753.html

浏览器组成和各引擎工作原理

阅读更多关于浏览器组成和各引擎工作原理

1.浏览器的主要构成部分 1.用户界面 2.浏览器引擎(负责窗口管理、Tab进程管理等) 3.渲染引擎(有叫内核，负责HTML解析、页面渲染) 4.JS引擎(JS解释器，如Chrome和Nodejs采用的V8) 这里面最核心的就是渲染引擎和JS引擎，后面会详细介绍这两个引擎的相关内容。常见浏览器的渲染引擎和JS引擎如下：注：新版本的Chrome采用的渲染引擎是Blink，Blink是由谷歌团队从Webkit衍生开发出来的引擎，主要有应用到Chrome和Opera浏览器。 2.从进程和线程的角度来理解浏览器工作 1）进程和线程进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）线程是cpu调度的最小单位（线程是建立在进程的基础上的一个程序运行单位，一个进程中可以有多个线程）进程可以类比为工厂，线程就是工厂里面的工人，一个工厂可以包含一个或者多个工人，工人之间可以相互协作，并且共享工作空间 2）浏览器的多进程架构现代的浏览器采用的都是多进程架构，主要包含以下三种进程： 1.Browser进程浏览器的主线程，主要负责浏览器的页面管理、书签、前进后退、资源下载管理等，整个浏览器应用程序只有一个，对应上述浏览器组成中的浏览器引擎。 2.渲染进程内核进程、负责页面渲染、JS执行，对应的是上述的渲染引擎和JS引擎，一个浏览器可以包含多个渲染进程

浏览器渲染机制

阅读更多关于浏览器渲染机制

线程和进程进程和线程的概念可以这样理解：进程是一个工厂，工厂有它的独立资源--工厂之间相互独立--线程是工厂中的工人，多个工人协作完成任务--工厂内有一个或多个工人--工人之间共享空间工厂有多个工人，就相当于一个进程可以有多个线程，而且线程共享进程的空间。进程是 cpu 资源分配的最小单位（是能拥有资源和独立运行的最小单位，系统会给它分配内存）线程是 cpu 调试的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程。核心还是属于一个进程。）浏览器是多进程的浏览器是多进程的，每打开一个 tab 页，就相当于创建了一个独立的浏览器进程。浏览器包含的进程： Browser 进程：浏览器的主进程（负责协调，主控），只有一个，作用有：负责浏览器的界面显示，与用户交互，如前进，后退等负责各个页面的管理，创建和销毁其它进程将 Rendered 进程得到的内存中的 Bitmap ,绘制到用户界面上网络资源的管理，下载第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建。 GPU 进程：最多一个，用于 3D 绘制等。浏览器渲染进程（浏览器内核）（ Render 进程，内部是多线程的）：默认每个 Tab 页面一个进程，互不影响。主要作用为：页面渲染，脚本执行，事件处理等在浏览器中打开一个网页相当于新起了一个进程

订阅浏览器引擎