【综合篇】浏览器的工作原理：浏览器幕后揭秘

web（给达达前端加星标，提升前端技能）​ 了解浏览器是如何工作的，能够让你站在更高的角度去理解前端浏览器的发展历程的三大路线，第一是应用程序web化，第二是web应用移动化，第三是web操作系统化。是不是有点不直白。应用程序web化就是随着现在技术的发展，现在越来越多的应用转向了浏览器与服务器，就是B/S架构；web应用移动化，就是在移动设备应用，什么是移动设备呢。“移动设备：也被称为行动装置（英语：Mobile device）、流动装置、手持装置（handheld device）等，是一种口袋大小的计算设备，通常有一个小的显示萤幕，触控输入，或是小型的键盘。因为通过它可以随时随地访问获得各种信息，这一类设备很快变得流行。和诸如手提电脑和智能手机之类的移动计算设备一起，PDA代表了新的计算机领域。”移动设备的优点，方便性，灵活性，安全性，交互性，低成本。​ 什么是应用程序Web化​ 应用虚拟化、桌面虚拟化、服务器虚拟化......全球领先的云计算、虚拟化系统平台、应用程序发布和程序web化IT产品提供商--GOOSUU Networks公司[高速计算机科技]。Web应用程序是一种通过Web访问的应用程序，好处就是用户容易访问的应用程序，只需要有浏览器即可，不需要再安装其他软件。​ 应用程序的两种模式C/S、B/SC/S是客户端/服务器端程序，就是说这类程序一般独立运行。B/S是浏览器端/服务器端应用程序，这类应用程序一般借助IE等浏览器来运行。WEB应用程序一般是B/S模式。Web应用程序首先是“应用程序”，和用标准的程序语言，如C、C++等编写出来的程序没有什么本质上的不同。Web应用程序有自己独特的地方，就是它是基于Web的，而不是采用传统方法运行的。换句话说，它是典型的浏览器/服务器架构的产物。为什么要学习Web应用程序​ Web应用程序开发，是目前软件开发领域的三大方向之一。什么是web应用移动化​ 前端是个很大的概念，是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面，现在的说法一般是指Web前端，也就是针对于网页端开发的工作。Web App指的是【Web application】，也就是以浏览器作为客户端的软件。Mobile Web App 指在手机端打开的Web App，移动设备应用，渲染流程过于复杂且性能不及原生应用，离线时用户无法使用，无法接收消息推送，移动端没有一级入口。什么是web操作系统化​ ​ web操作系统第一是利用web技术构建一个纯粹的操作系统，如ChromeOS第二是浏览器的底层结构往操作系统架构方向发展。基于 HTML5 构建 Web 操作系统​ HTML5 具有兼容性好，安全性高，功能丰富，开发便捷等优点，特别适合如 Web 操作系统一类的富客户端互联网应用的前端开发。浏览器逐渐走向操作系统，浏览器中引入多种编程语言的支持，简化渲染流程，使得渲染过程更加高效，加大了对系统设备特性的支持，提供对复杂web项目开发的支持。浏览器中的JavaScript执行机制，浏览器端的Event Loop，浏览器的渲染机制与优化。web apisdom(document)ajax（xmlhttprequest）timeout(setTimeout)浏览器里面跑了很多进程，多进程，浏览器是multi-process，进程包含了线程，进程是我们操作系统执行的最小的单位，一个进程占用一个端口，一个进程里面可以包含多个线程。一个浏览器只有一个browser process，负责管理tabs，协调其他process和render process存至memory内的bitmap绘制到页面上的。​ 浏览器端的Event Loop​ 一个函数执行栈，一个事件队列，一个微任务队列。​ 每个事件队列中取一个事件时有微任务就把微任务执行完，才开始执行事件。一段代码的运行从一段JavaScript源码，解析，抽象语法树，执行上下文，解释器，字节码，编译器。执行栈ECStack执行栈foo()，query()，hello()，web apis中，dom，ajax，setTimeout任务队列onLoad，onClick。事件队列添加事件，（其他事件，样式计算，布局，定时器，JavaScript，dom，click）取出事件-》单线程执行事件，单线程，一次只能处理一个事件。JavaScript的核心​ 对象，原型链，构造函数，执行上下文堆栈，执行上下文，变量对象，活动对象，作用域链，闭包，this。运行时的描述对于每个执行上下文，三个重要的属性，变量对象，作用域链，this。执行上下文，第一，函数的形参，当进入到函数执行上下文时，变量对象的一个属性，其属性名就是形参的名字，其值就是实参的值，对于没有传递的参数其值为undefined。函数声明，变量对象的一个属性，其属性名和值都是函数对象创建出来的，如果变量对象已经包含了相同名字的属性，则替换它的值。变量声明，变量对象的一个属性，其属性名即为变量名，其值为undefined，如果变量名和已经声明的函数名或者函数的参数名相同，则不会影响已经存在的属性。变量对象​ 全局对象是一个进入任何执行上下文前就创建出来的对象，此对象以单例形式存在，它的属性在任何地方都可以直接访问，其生命周期随着程序的结束而终止。全局对象在创建的时候，这些属性也被初始化，math，string，date，parseInt等等，同时，其中一些对象会指向全局对象本身，比如dom中，全局对象上的window属性就指向了全局对象，但是，并非所有的实现都是。在引用全局对象的属性时，前缀通常可以省略，因为全局对象是不能通过名字直接访问的，然而 ，通过全局对象上的this值，以及通过dom中的window对象这样递归引用的方式可以访问到全局对象。​ 函数上下文中的变量对象在函数的执行上下文中，变量对象在进入函数上下文的时候创建出来，初始化的时候会创建一个arguments属性，其值就是arguments对象。它的属性有，callee对当前函数的引用，length实参的个数，properties-indexes的个数等于arguments.length，arguments对象的properties-indexs的值和当前形参是共享的。处理上下文代码的阶段​ 分两个阶段，第一，进入执行上下文，第二，执行代码。函数的形参（当进入函数执行上下文时），变量对象的一个属性，其属性名就是形参的名字，其值就是实参的值，对于没有传递的参数，其值为undefined函数声明，变量对象的一个属性，其属性名和值都是函数对象创建出来的，如果变量对象已经包含了相同名字的属性，则替换它的值变量声明，变量对象的一个属性，其属性名即为变量名，其值为undefined，如果变量名和已经声明的函数名或者函数的参数名相同，则不会影响已经存在的属性。微任务和宏任务对页面渲染的影响​ setTimeout的不确定性是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按针对网页进行的重绘。设置这个api的目的是为了让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果，代码中使用这个api，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。宏任务，tasks，一些异步任务的回调会依次进入macro task queue，等待后续被调用，异步任务：​ 微任务，jobs，另一些异步任务的回调会一次进入micro task queue，等待后续被调用，异步任务包含：process.nextTick(Node都有)promise.then()object.observemutaionObserverpromise构造函数里的代码是同步执行的。​ ​ 微任务可以多个同时执行，宏任务一次只能执行一个。​ ​ ​ ​ Promise宏任务，Promise.then是微任务，宏任务先，console.log，再到微任务。​ 浏览器内核分成两部分：渲染引擎和js引擎目前使用的主流浏览器有五个：Internet Explorer、Firefox、Safari、Chrome 浏览器和 Opera。浏览器的主要功能是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI（统一资源标示符）指定。​ 呈现引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在 8000 个块以内。主流程示例​ 图：WebKit 主流程​ 图：Mozilla 的 Gecko 呈现引擎主流程​ 解析的过程可以分成两个子过程：词法分析和语法分析。​ 图：从源文档到解析树解析通常是在翻译过程中使用的，而翻译是指将输入文档转换成另一种格式。​ 图：编译流程​ 学习浏览器的工作原理第一，可以评估web开发项目的可能性，第二，从更高的纬度去审视页面，第三，在快节奏的技术迭代中把握本质。为啥打开一个页面，有4个进程Chrome打开一个页面需要启动多少进程？可以点击Chrome浏览器右上角的“选项”菜单，选择“更多工具”子菜单，点击“任务管理器”。查看进程，任务管理器。多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。一个进程就是一个程序的运行实例。线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率。进程中的任意一线程执行出错，都会导致整个进程的崩溃。线程之间共享进程中的数据。当一个进程关闭之后，操作系统会回收进程所占用的内存。进程之间的内容相互隔离。单进程浏览器时代单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里，单进程浏览器不稳定、不流畅和不安全。多进程浏览器时代最新的Chrome浏览器包括：1个浏览器（Browser）主进程、1个 GPU 进程、1个网络（NetWork）进程、多个渲染进程和多个插件进程。仅打开了1个页面，为什么有4个进程因为打开1个页面至少需要1个网络进程、1个浏览器进程、1个GPU进程以及1个渲染进程，共4个。多进程模型提升了浏览器的稳定性、流畅性和安全性，但是资源占用大，体系架构复杂。什么叫FP，指的是首次渲染，影响FP指标的是网络加载速度。如何保证页面文件能被完整地送达浏览器呢？从“数据包如何送达主机”“主机如何将数据包转交给应用”和“数据是如何被完整地送达应用程序”这三个方面。互联网中的数据是通过数据包来传输的​ TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。一个完整的TCP连接的生命周期包括了“建立连接”“传输数据”和“断开连接”三个阶段。​ 互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错。IP负责把数据包送达目的主机。UDP负责把数据包送达具体应用。TCP保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。丢包一般是什么原因 网络问题，线路故障，路由错误等底层的问题都有可能导致丢包你怎么理解 HTTP 和 TCP 的关系？HTTP是建立在TCP协议之上的，属于应用层，TCP提供给HTTP可靠的连接，HTTP给应用提供更方便的使用接口。 http协议是超文本协议，浏览器发出http请求，TCP会把请求向底层传递知道web服务器，然后web服务器返回http请求的response，浏览器渲染数据，下层为上层提供服务。HTTP协议和TCP协议都是TCP/IP协议簇的子集。HTTP协议属于应用层，TCP协议属于传输层，HTTP协议位于TCP协议的上层。请求方要发送的数据包，在应用层加上HTTP头以后会交给传输层的TCP协议处理，应答方接收到的数据包，在传输层拆掉TCP头以后交给应用层的HTTP协议处理。建立 TCP 连接后会顺序收发数据，请求方和应答方都必须依据 HTTP 规范构建和解析HTTP报文。为啥打开第二次网站，速度比较快，第一次比较慢呢？​ HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础，HTTP是浏览器使用最广的协议。​ ​ 为啥打开第二次快呢？因为第一次加载时，缓存了一些耗时的资源，浏览器缓存的有DNS缓存和页面资源缓存。浏览器的一个请求从发送到返回是一个怎样的过程？【综合篇】Web前端性能优化原理问题​ 首先，用户从浏览器进程里输入请求信息，然后，网络进程发起url请求，服务器响应url请求后，浏览器进程就又要开始准备渲染进程了，渲染进程准备好后，向渲染进程提交页面数据，渲染进程接收后，开始解析页面和加载。用户发出URL请求到页面开始解析的这个过程，就叫做导航。​ 渲染是怎么变成页面的呢？HTML的内容是由标记和文本组成。CSS又称为层叠样式表，是由选择器和属性组成。JavaScript（简称为JS），使用它可以使网页的内容“动”起来。构建DOM树浏览器无法直接理解和使用HTML，所以需要将HTML转换为浏览器能够理解的结构——DOM树。​ ​ 重排和重绘都是渲染进程的主线程中进行的，减少这类操作可以减少主线程的资源占用，提高主线程绘制效率。在编写js时尽量减少dom操作或合并dom操作，dom操作需要重新生成dom树，如果影响布局就需要重新生成布局树，再重新生成分层树，再进行绘制。​ 变量提升​ 什么是JavaScript中的声明和赋值​ ​ JavaScript引擎把变量的声明和函数的声明提升到代码开头的“行为”。变量被提升后，会给变量设置默认值，这个默认值就是undefined。​ 函数和变量在执行之前都提升到了代码开头。代码中出现相同的变量或者函数怎么办？会覆盖。为什么JavaScript代码会溢出呢？调用栈就是用来管理函数调用关系的一种数据结构。什么是函数调用，函数调用就是运行一个函数。什么是JavaScript的调用栈管理执行上下文的栈称为执行上下文栈，又称调用栈。​ 栈溢出，是一种用来管理执行上下文的数据结构，符合后进先出的规则，调用栈是有大小的。一篇文章带你了解JavaScript中的函数表达式，递归，闭包，变量，this对象，模块作用域​ ​ ​ ​ 回流，重绘。引起回流的因素，第一是dom节点增加或者是删除，第二是元素的尺寸，边距，填充，边框，宽高，第三dom节点位置变化，第四dom节点display显示与否，第五，页面渲染初始化，浏览器窗口尺寸变化，向浏览器请求某些样式信息。浏览器性能优化回流比重绘的代价更高，回流的花销更render tree有多少节点需要重新构建有关系，使用队列处理来优化，尽可能减少重绘和回流原理，浏览器会维护一个队列，把所有会引起的回流，重绘的操作放入在这个队列，等队列中的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。时间线定义：在浏览器加载页面开始的那一刻到页面加载完全结束的这个过程中，按照顺序发生的每一件事情的总流程，就是时间线。时间线产生过程，页面加载就产生一个document对象，js就起作用了，涉及到dom功能体就生效了。查看文档解析的三个状态变化// 只要 readyState 状态发生变化就触发，浏览器JS引擎实时监听console.log(document.readyState); // loadingdocument.onreadystatechange = function() {    console.log(document.readyState); // interactive -> complete}监听 DOMContentLoaded// 监听 DOMContentLoaded：在'interactive' ：文档解析完成之后触发document.addEventListener('DOMContentLoaded', function(){    console.log('DOMContentLoaded');}, false);window.onload 与 DOMContentLoaded 区别window.onload：在文档加载完成之后触发DOMContentLoaded：在文档解析完成之后触发​ ​ ​ ​ ​ 渲染流程：HTML、CSS、JavaScript是如何变成页面？从 HTML 到 DOM、样式计算、布局、图层、绘制、光栅化、合成和显示DOM树:渲染进程将 HTML 内容转换为能够读懂的DOM 树结构。样式计算：渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 DOM 节点的样式。布局树：创建布局树，并计算元素的布局信息。分层：对布局树进行分层，并生成分层树。绘制：为每个图层生成绘制列表，并将其提交到合成线程。光栅化：合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。合成：合成线程发送绘制图块命令DrawQuad给浏览器进程。显示：浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。服务器端处理浏览器端发送过来的HTTP请求1、返回请求（成功状态码200，没找到页面404，响应行、响应头、响应体）2、断开连接（服务器向客户端返回请求数据，关闭TCP连接）3、重定向页面二次打开会很快？1、DNS缓存2、页面资源缓存为了解决UDP数据包传输过程容易丢失，引入TCP。TCP：把数据完整地送达应用程序，是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP两个特点：1、对于数据包丢失的情况，TCP提供重传机制；2、TCP引入数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件。“FP”指从页面加载到首次开始绘制的时长。影响FP指标：网络加载速度。HTTPWebSocket都是基于TCP/IP的，TCP/IP是优化Web页面的加载速度的根基。IP通过IP地址信息把数据包发送到指定的电脑，而UDP通过端口把数据包分发给正确程序。​ JavaScript中的变量分为基本类型和引用类型​ 原始值，存在栈内存stack，并且不可改变值，引用值，值指针存在栈内存，值存在堆内存。访问堆内存中的数据，从栈内存中获取该对象的地址引用，再从堆内存中获取我们想要的数据。​ ​ 学习一下【面试需要】掌握JavaScript中的this，call，apply的原理什么是作用域链，什么是闭包呢？变量是通过作用域链来查找，什么是词法作用域，其作用域链是由词法作用域决定的。​ 整个词法作用域链的顺序是：foo函数作用域—>bar函数作用域—>main函数作用域—>全局作用域。全局执行上下文、函数执行上下文和eval执行上下文，通过函数的call方法来设置函数执行上下文的this指向。​ 数据是如何存储的？我们把这种在使用之前就需要确认其变量数据类型的称为静态语言。我们把在运行过程中需要检查数据类型的语言称为动态语言。​ JavaScript是一种弱类型，动态的语言。来吧！一文彻底搞懂引用类型！在JavaScript的执行过程中， 主要有三种类型内存空间，分别是代码空间、栈空间和堆空间。常情况下，栈空间都不会设置太大，主要用来存放一些原始类型的小数据。堆空间很大，能存放很多大的数据。原始类型的赋值会完整复制变量值，而引用类型的赋值是复制引用地址。垃圾数据是如何自动回收的？使用后的数据不需要了，就称为垃圾数据，不删除，就会越来越多，就需要进行回收，垃圾数据回收分为手动回收和自动回收。产生的垃圾数据是由垃圾回收器来释放的，并不需要手动通过代码来释放。调用栈中的数据是如何回收的【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await一篇文章带你了解JavaScript中的面向 “对象”浏览器工作原理浏览器的组成交互部分（UI）网络请求部分（Socket）JavaScript引擎部分（解析执行JavaScript）渲染引擎部分（渲染HTML、CSS等）数据存储部分（cookie、HTML5中的本地存储LocalStorage、SessionStorage）​ HTTP请求报文和响应报文格式​ DNS 解析过程​ 解析过程​ ​ 你每天都在使用的HTTP协议，到底是什么鬼？TCP的 “三次握手” 和“四次挥手”，到底是什么鬼？​ ​ 线程VS进程：1、线程是不能单独存在的，它是由进程来启动和管理的2、启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。使用Promise，告别回调函数​ 封装异步代码，让处理流程变得线性输入数据和输出结果​ 分析了产生回调地狱的原因：多层嵌套的问题；每种任务的处理结果存在两种可能性（成功或失败），需要在每种任务执行结束后分别处理这两种可能性。浏览器的三大进化路线：​ PWA，全称是Progressive Web App渐进式网页应用，渐进式+Web应用，它是一套理念，渐进式增强Web的优势，并通过技术手段渐进式缩短和本地应用或者小程序的距离。web应用缺点Web应用缺少离线使用能力，Web应用还缺少了消息推送的能力，Web应用缺少一级入口。什么是Service Worker​ 拦截请求和缓存资源​ 浏览器涉及很多概念，不仅繁多而且琐碎，包括网络、渲染、安全，以及大前端相关的大量概念。参考链接http://taligarsiel.com/Projects/howbrowserswork1.htm#The_browsers_we_will_talk_about推荐阅读  点击标题可跳转【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await【面试需要-Vue全家桶】一文带你看透Vue前端路由【面试需要】掌握JavaScript中的this，call，apply的原理2019年的每一天日更只为等待她的出现，好好过余生，庆余年 | 掘金年度征文进来就是一家人【达达前端技术社群⑥】觉得本文对你有帮助？请分享给更多人关注「达达前端」加星标，提升前端技能在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话，求点赞，求关注，求分享，对暖男我来说真的非常有用！！！感谢阅读，原创不易，喜欢就点个[在看] or [转发朋友圈]，这是我写作最大的动力。意见反馈若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。这是一个有质量，有态度的公众号点关注，有好运​ 好文章，我在看❤️

本文章由javascript技术分享原创和收集