浏览器原理
文章平均质量分 91
zxuanxuanz
这个作者很懒,什么都没留下…
展开
-
浏览器原理--浏览上下文组:如何计算Chrome中渲染进程的个数?
(1)在默认情况下,如果打开一个标签页,那么浏览器会默认为其创建一个渲染进程。(2)如果从一个标签页中打开了另一个新标签页,当新标签页和当前标签页属于同一站点(相同协议、相同根域名)的话,那么新标签页会复用当前标签页的渲染进程。 (1)通过标签点击该链接会打开新的b标签页,新标签页中的 window.opener 的值就是指向a标签页中的 window,这样就可以在新的b标签页中通过 opener 来操作a标签页了。这样我们可以说,这两个标签页是有连接的。(2)通过 JavaScript 中的 ...原创 2022-06-08 15:46:30 · 337 阅读 · 0 评论 -
浏览器原理--HTTPS:让数据传输更安全
(1)起初设计 HTTP 协议的目的很单纯,就是为了传输超文本文件,那时候也没有太强的加密传输的数据需求,所以 HTTP 一直保持着明文传输数据的特征。(2)但这样的话,在传输过程中的每一个环节,数据都有可能被窃取或者篡改,这也意味着你和服务器之间还可能有个中间人,你们在通信过程中的一切内容都在中间人的掌握中:(1)从 HTTP 协议栈层面来看,我们可以在 TCP 和 HTTP 之间插入一个安全层,所有经过安全层的数据都会被加密或者解密。(2)安全层有两个主要的职责:对发起 HTTP 请求的数据进行加密操作原创 2022-06-08 12:00:57 · 1464 阅读 · 0 评论 -
浏览器原理--安全沙箱:页面和系统之间的隔离墙
(1)从稳定性视角来看,单进程架构的浏览器是不稳定的,因为只要浏览器进程中的任意一个功能出现异常都有可能影响到整个浏览器,如页面卡死、浏览器崩溃等。(2)浏览器本身的漏洞是单进程浏览器的一个主要问题,如果浏览器被曝出存在漏洞,那么在这些漏洞没有被及时修复的情况下,黑客就有可能通过恶意的页面向浏览器中注入恶意程序,其中最常见的攻击方式是利用缓冲区溢出。(3)这种类型的攻击和 XSS 注入的脚本是不一样的。(1)浏览器内核和渲染进程1、浏览器被划分为浏览器内核和渲染内核两个核心模块,其中浏览器内核是由网络进程、原创 2022-06-07 18:03:54 · 812 阅读 · 0 评论 -
浏览器原理--跨站脚本攻击(XSS)、CSRF攻击
(1) XSS 全称是 Cross Site Scripting,为了与“CSS”区分开来,故简称 XSS,翻译过来就是“跨站脚本”。XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本,从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。(2)恶意脚本都能做哪些事情(3)恶意脚本是怎么注入的1、在一个反射型 XSS 攻击过程中,恶意 JavaScript 脚本属于用户发送给网站请求中的一部分,随后网站又把恶意 JavaScript 脚本返回给用户。当恶意 JavaScript原创 2022-06-07 17:38:54 · 2324 阅读 · 0 评论 -
浏览器原理--同源策略:为什么XMLHttpRequest不能跨域请求资源
(1) 如果两个 URL 的协议、域名和端口都相同,我们就称这两个 URL 同源。(2)浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。(3)源策略主要表现在 DOM、Web 数据和网络这三个层面。(1) 页面中可以嵌入第三方资源1、暴露了很多诸如 XSS 的安全问题,为了解决 XSS 攻击,浏览器中引入了内容安全策略,称为 CSP。2、CSP 的核心思想是让服务器决定浏览器能够加载哪些资源,让服务器决定浏览器是否能够执行内联 JavaScript 代码。通过这些手段就可以大大减少 XSS原创 2022-06-07 16:14:04 · 511 阅读 · 0 评论 -
浏览器原理--HTTP/3:甩掉TCP、TLS 的包袱,构建高效网络
(1)正常情况下的 TCP 传输数据过程:从一端发送给另外一端的数据会被拆分为一个个按照顺序排列的数据包,这些数据包通过网络传输到了接收端,接收端再按照顺序将这些数据包组合成原始数据,这样就完成了数据传输。(3)如果在数据传输的过程中,有一个数据因为网络故障或者其他原因而丢包了,那么整个 TCP 的连接就会处于暂停状态,需要等待丢失的数据包被重新传输过来。(丢包状态) 在 TCP 传输过程中,由于单个数据包的丢失而造成的阻塞称为 TCP 上的队头阻塞(4)TCP队头阻塞是怎么影响 HTTP/2 传输?1、H原创 2022-06-07 10:34:17 · 442 阅读 · 0 评论 -
浏览器原理--HTTP/2:如何提升网络速度?
(1)为网络效率做了大量的优化,最核心的有如下三种方式(2)HTTP/1.1 的资源下载方式(2)存在问题:HTTP/1.1对带宽的利用率却并不理想1、带宽是指每秒最大能发送或者接收的字节数。我们把每秒能发送的最大字节数称为上行带宽,每秒能够接收的最大字节数称为下行带宽。2、之所以说 HTTP/1.1 对带宽的利用率不理想,是因为 HTTP/1.1 很难将带宽用满。比如我们常说的 100M 带宽,实际的下载速度能达到 12.5M/S,而采用 HTTP/1.1 时,也许在加载页面资源时最大只能使用到 2.5M原创 2022-06-06 17:04:57 · 1051 阅读 · 1 评论 -
浏览器工作原理--HTTP/1:HTTP性能优化
HTTP 是浏览器中最重要且使用最多的协议,是浏览器和服务器之间的通信语言,也是互联网的基石。(1)HTTP/0.9 是于 1991 年提出的,主要用于学术交流,需求很简单——用来在网络之间传递 HTML 超文本的内容,所以被称为超文本传输协议。(2)HTTP/0.9 的一个完整的请求流程(3)特点 (1)支持多种类型的文件下载是 HTTP/1.0 的一个核心诉求,而且文件格式不仅仅局限于 ASCII 编码,还有很多其他类型编码的文件。(2)为了让客户端和服务器能更深入地交流,HTTP/1.0 引入了请求头原创 2022-06-06 14:35:40 · 525 阅读 · 0 评论 -
浏览器工作原理--页面性能:如何系统地优化页面?
(1)加载阶段的渲染流水线1、 并非所有的资源都会阻塞页面的首次绘制,比如图片、音频、视频等文件就不会阻塞页面的首次渲染。2、而 JavaScript、首次请求的 HTML 资源文件、CSS 文件是会阻塞首次渲染的,因为在构建 DOM 的过程中需要 HTML 和 JavaScript 文件,在构造渲染树的过程中需要用到 CSS 文件。(2)我们把这些能阻塞网页首次渲染的资源称为关键资源,基于关键资源,我们可以继续细化出来三个影响页面首次渲染的核心因素。 (3)优化方案:总的优化原则就是减少关键资源个数,降低原创 2022-06-06 11:10:37 · 288 阅读 · 0 评论 -
浏览器工作原理--分层和合成机制:为什么CSS动画比JavaScript高效?
每个显示器都有固定的刷新频率,通常是 60HZ,也就是每秒更新 60 张图片,更新的图片都来自于显卡中一个叫前缓冲区的地方,显示器所做的任务很简单,就是每秒固定读取 60 次前缓冲区中的图像,并将读取的图像显示到显示器上。(1)显卡显卡的职责就是合成新的图像,并将图像保存到后缓冲区中,一旦显卡把合成的图像写到后缓冲区,系统就会让后缓冲区和前缓冲区互换,这样就能保证显示器能读取到最新显卡合成的图像。通常情况下,显卡的更新频率和显示器的刷新频率是一致的。但有时候,在一些复杂的场景中,显卡处理一张图片的速度会变慢原创 2022-06-06 10:39:06 · 378 阅读 · 0 评论 -
浏览器工作原理--渲染流水线:CSS如何影响首次加载时的白屏时间?
一、原创 2022-05-27 15:16:30 · 239 阅读 · 0 评论 -
浏览器工作原理:DOM树:JavaScript是如何影响DOM树构建的?
一、DOM在渲染引擎中,DOM 有三个层面的作用从页面的视角来看,DOM 是生成页面的基础数据结构。 从 JavaScript 脚本视角来看,DOM 提供给 JavaScript 脚本操作的接口,通过这套接口,JavaScript 可以对 DOM 结构进行访问,从而改变文档的结构、样式和内容。 从安全视角来看,DOM 是一道安全防护线,一些不安全的内容在 DOM 解析阶段就被拒之门外了。简言之,DOM 是表述 HTML 的内部数据结构,它会将 Web 页面和 JavaScript 脚本连原创 2022-05-26 17:16:04 · 350 阅读 · 0 评论 -
浏览器工作原理--浏览器中的页面循环系统
一、概述渲染进程都有一个主线程,并且主线程非常繁忙,既要处理 DOM,又要计算样式,还要处理布局,同时还需要处理 JavaScript 任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条不紊地执行,这就需要一个系统来统筹调度这些任务,这个统筹调度系统就是我们今天要讲的消息队列和事件循环系统。二、消息队列消息队列是一种数据结构,可以存放要执行的任务。它符合队列“先进先出”的特点,也就是说要添加任务的话,添加到队列的尾部;要取出任务的话,从队列头部去取。三、...原创 2022-05-23 17:49:36 · 608 阅读 · 0 评论 -
浏览器工作原理--编译器和解释器:V8是如何执行一段Javascript代码的?
一、编译器和解释器(1)语言编译型语言:在程序执行之前,需要经过编译器的编译过程,并且编译之后会直接保留机器能读懂的二进制文件,这样每次运行程序时,都可以直接运行该二进制文件,而不需要再次重新编译了。比如 C/C++、GO 等都是编译型语言。解释型语言:编写的程序,在每次运行时都需要通过解释器对程序进行动态解释和执行。比如 Python、JavaScript 等都属于解释型语言。(2)编译器和解释器“翻译”代码之所以存在编译器和解释器,是因为机器不能直接理解我们所写的代码,所以在执行原创 2022-05-21 15:11:04 · 352 阅读 · 0 评论 -
浏览器工作原理--垃圾数据是如何自动回收的
一、栈垃圾回收当函数执行结束,JS引擎通过向下移动ESP指针(记录调用栈当前执行状态的指针),来销毁该函数保存在栈中的执行上下文(变量环境、词法环境、this、outer)。二、堆垃圾回收 代际假说 1、大部分对象存活时间很短2、不被销毁的对象,会活的更久 分类 V8 中会把堆分为新生代和老生代两个区域,新生代中存放的是生存时间短的对象,老生代中存放的生存时间久的对象。 新生代 (1)算法:Scavenge 算法(2)原理1、把新生代空间对半划分为两个区域,原创 2022-05-21 11:22:14 · 497 阅读 · 1 评论 -
浏览器工作原理--栈空间和堆空间
一、Javascript(1)在使用之前就需要确认其变量数据类型的称为静态语言,运行过程中需要检查数据类型的语言称为动态语言。(2)支持隐式类型转换的语言称为弱类型语言,不支持隐式类型转换的语言称为强类型语言。(3)语言类型(4)JavaScript 是一种弱类型的、动态的语言弱类型,意味着你不需要告诉 JavaScript 引擎这个或那个变量是什么数据类型,JavaScript 引擎在运行代码的时候自己会计算出来。 动态,意味着你可以使用同一个变量保存不同类型的数据。(5)J原创 2022-05-21 10:27:32 · 529 阅读 · 0 评论 -
浏览器工作原理--浏览器中的JavaScript执行机制
一、变量提升JavaScript 的执行机制:先编译,再执行(1)JavaScript 代码执行过程中,需要先做变量提升,而之所以需要实现变量提升,是因为 JavaScript 代码在执行之前需要先编译。(2)在编译阶段,变量和函数会被存放到变量环境中,变量的默认值会被设置为 undefined;在代码执行阶段,JavaScript 引擎会从变量环境中去查找自定义的变量和函数。(3)如果在编译阶段,存在两个相同的函数,那么最终存放在变量环境中的是最后定义的那个,这是因为后定义的会覆盖掉之前定原创 2022-05-20 15:01:14 · 817 阅读 · 0 评论 -
浏览器工作原理--渲染流程:HTML,CSS和JavaScript是如何变成页面的?
一、渲染流水线(1)由于渲染机制过于复杂,所以渲染模块在执行过程中会被划分为很多子阶段,输入的 HTML 经过这些子阶段,最后输出像素。我们把这样的一个处理流程叫做渲染流水线。(2)按照渲染的时间顺序,流水线可分为如下几个子阶段:构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。二、构建DOM树(1)原因:览器无法直接理解和使用 HTML,所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。(2)DOM树的构建过程构建 DOM 树的输入内容是.原创 2022-05-19 11:17:33 · 1206 阅读 · 0 评论 -
浏览器工作原理-- 导航流程:从输入URL到页面展示,这中间发生了什么?
一、导航用户发出 URL 请求到页面开始解析的这个过程,就叫做导航。一、大致流程1、首先,浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程。2、然后,在网络进程中发起真正的 URL 请求。3、接着网络进程接收到了响应头数据,便解析响应头数据,并将数据转发给浏览器进程。4、浏览器进程接收到网络进程的响应头数据之后,发送“提交导航 (CommitNavigation)”消息到渲染进程;5、渲染进程接收到“提交导航”的消息之后,便开始准备接收 HTML原创 2022-05-16 17:58:42 · 781 阅读 · 0 评论 -
浏览器工作原理--HTTP请求流程
一、HTTP(1) HTTP 协议,正是建立在 TCP 连接基础之上的。(2)HTTP 是一种允许浏览器向服务器获取资源的协议,是 Web 的基础。(3)HTTP 也是浏览器使用最广的协议。二、浏览器端发起 HTTP 请求流程在浏览器地址栏输入一个网址后:1、构建请求首先,浏览器构建请求行信息(如下所示),构建好后,浏览器准备发起网络请求。GET /index.html HTTP1.12、查找缓存(1)在真正发起网络请求之前,浏览器会先在浏览器缓存中查询是否有要.原创 2022-05-16 11:34:41 · 3223 阅读 · 0 评论 -
OSI和TCP/IP模型以及TCP和UDP小结
一、TCP1、面向连接的、可靠的、基于字节流的传输层协议。2、字节流服务是指,为了方便传输,将大块数据分割成以报文段为单位的数据包进行管理。3、保证数据有序和完整性。有重传机制4、建立连接三次握手,断开连接四次挥手。二、UDP1、面向无连接的、不可靠的、高效的传输层协议2、不需要建立连接,不需要验证数据报文,不需要流量控制,只会把想发的数据报文一股脑的丢给对端2、只是数据报文的搬运工,不保证有序且不丢失的传递到对端3、适用于实时性要求高的场景,如王者荣耀和直播三、OSI七层模型.原创 2022-05-14 17:02:48 · 30 阅读 · 0 评论 -
浏览器工作原理--TCP协议:如何保证页面文件能被完整送达浏览器?
一、FP(First Paint)衡量 Web 页面性能的重要的指标,指从页面加载到首次开始绘制的时长。二、IP :把数据包送达目的主机(网络层)(1)数据包要在互联网上进行传输,就要符合网际协议(Internet Protocol,简称 IP)标准。(2)计算机的地址就称为 IP 地址,访问任何网站实际上只是你的计算机向另外一台计算机请求信息。(3)如果要想把一个数据包从主机 A 发送给主机 B,那么在传输之前,数据包上会被附加上主机 B 的 IP 地址信息,这样在传输过程中才能正确寻原创 2022-05-14 11:12:46 · 703 阅读 · 0 评论 -
浏览器工作原理--Chorme架构
一、什么是并行处理计算机中的并行处理就是同一时刻处理多个任务,使用并行处理能大大提升性能。二、线程 VS 进程(1)线程是不能单独存在的,它是由进程来启动和管理的。(2)一个进程就是一个程序的运行实例:详细解释就是,启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。(3)线程是依附于进程的,而进程中使用多线程并行处理能提升运算效率。(4)四大特点:1、进程中的任意一线程执行出错,都会导致整原创 2022-05-13 15:35:07 · 1769 阅读 · 2 评论