专栏首页达达前端【综合篇】浏览器的工作原理:浏览器幕后揭秘

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

web(给达达前端加星标,提升前端技能)

了解浏览器是如何工作的,能够让你站在更高的角度去理解前端

浏览器的发展历程的三大路线,第一是应用程序web化,第二是web应用移动化,第三是web操作系统化。是不是有点不直白。

应用程序web化就是随着现在技术的发展,现在越来越多的应用转向了浏览器与服务器,就是B/S架构;web应用移动化,就是在移动设备应用,什么是移动设备呢。

“移动设备:也被称为行动装置(英语:Mobile device)、流动装置、手持装置(handheld device)等,是一种口袋大小的计算设备,通常有一个小的显示萤幕,触控输入,或是小型的键盘。因为通过它可以随时随地访问获得各种信息,这一类设备很快变得流行。和诸如手提电脑和智能手机之类的移动计算设备一起,PDA代表了新的计算机领域。”

移动设备的优点,方便性,灵活性,安全性,交互性,低成本。​

什么是应用程序Web化​

应用虚拟化、桌面虚拟化、服务器虚拟化......全球领先的云计算、虚拟化系统平台、应用程序发布和程序web化IT产品提供商--GOOSUU Networks公司[高速计算机科技]。

Web应用程序是一种通过Web访问的应用程序,好处就是用户容易访问的应用程序,只需要有浏览器即可,不需要再安装其他软件。​

应用程序的两种模式C/S、B/S

C/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 apis

dom(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.observe

mutaionObserver

promise

构造函数里的代码是同步执行的。

微任务可以多个同时执行,宏任务一次只能执行一个。

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); // loading

document.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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第82节:Java中的学生管理系统

    删除,点击超链接,点击弹出对话框式是否进行删除,如果确定,就删除,超链接执行的是js方法,在js里访问,跳转servlet,,servlet中调用dao方法。

    达达前端
  • 小程序flex布局

    目录的规范,所有组件要放在components目录下,所有图片要放在images目录下,模型文件时用于编写各类业务的模型,需要放在models文件下。

    达达前端
  • 2019年底前的web前端面试题初级-web标准应付HR大多面试问题

    当margin给一个值的时候,指四个方向。 当margin给二个值的时候,指的是上下 左右

    达达前端
  • Mac必备软件(2)-浏览器(Chrome长期更新)

    2016-07-0915:19:52 发表评论 321℃热度 个人喜欢收集一些软件,特别是好软件、新软件,手机上一直都是100+个软件,多多尝试软件,顺便收集...

    timhbw
  • 欲先攻其事必先利其器,博客站长必备软件推荐

    正所谓欲先攻其事必先利其器,作为一名独立博客站长配备安全、高效的应用软件来提升自己工作效率是一个很重要的工作,因为站长们在电脑端的操作会涉及很多网站安全、账号密...

    明月云服务
  • 前端开发面试题总结之——HTML

    ---- 相关知识点 web标准、 web语义化、 浏览器内核、 兼容性、 html5... 题目&答案 Doctype作用?严格模式与混杂模式如何区分?它们有...

    用户1667431
  • 在IE中启动火狐——自定义浏览器链接协议

    有时候需求就是这么奇葩,特别是在这个浏览器混战收尾的节骨眼上,有的客户正在将全单位的浏览器统一到Chrome、有的正在统一到Firefox、还有...

    用户1183026
  • 任意密码重置的一个场景

    背景 做授权渗透的时候要求要写明文传输漏洞,这就导致很多没有上 HTTPS 的网站为了修这个明文传输的问题,用尽了各种奇葩的做法,其中见得比较多的就是使用 RS...

    FB客服
  • 扒一扒浏览器的安全机制

    *本文原创作者:梅孜,本文属FreeBuf原创奖励计划,未经许可禁止转载 随着互联网深入人们的生活,浏览器的发展更加丰富多彩,其种类多样,版本更新速度也日益提...

    FB客服
  • 九彩拼盘的前端技能

    Joel

扫码关注云+社区

领取腾讯云代金券