浏览器知识
文章平均质量分 65
记录浏览器相关的知识
凡尘向天
这个作者很懒,什么都没留下…
展开
-
浏览器工作原理学习(二十二)
网络安全协议HTTPS中间人攻击:在HTTP传输过程总,截取传输内容,伪造和篡改传输内容。数据会经过用户电脑、WiFi路由器、运营商和目标服务器。每个环节数据都有可能被窃取或篡改。在HTTP协议栈中引入安全层:所有经过安全层的数据都会被加密或者解密。即对发起HTTP请求的数据进行加密操作和对接收到HTTP的内容进行解密操作。HTTPS第一版对称加密加密和解密都使用相同的密钥。安全层握手协商:浏览器发起加密套件列表(加密方法)+client-random给服务器;服务器返回加密套件+.原创 2022-02-11 15:02:05 · 332 阅读 · 0 评论 -
浏览器工作原理学习(二十一)
浏览器安全分为三大块:Web页面安全、浏览器网络安全和浏览器系统安全。Web页面安全什么是同源策略如果两个URL的协议、域名和端口都相同,我们就称这两个URL同源。浏览器默认两个相同的源之间是可以相互访问资源和操作DOM的。如果两个不同的源之间若想要相互访问资源或者操作DOM,那么会有一套基础的安全策略的制约,这就是同源策略。同源策略主要表现在DOM、Web数据和网络这个三个层面。DOM层面:同源策略限制来自不用源的JS脚本对当前DOM对象的读写操作。数据层面:同源策略限制了 不.原创 2022-02-10 18:23:24 · 1989 阅读 · 0 评论 -
浏览器工作原理学习(二十)
HTTP/0.9HTTP是浏览器最重要且使用最多的协议,是浏览器和服务器之间的通信语言。HTTP/0.9:用于网络之间传递HTML超文本的内容,被陈伟超文本传输协议。超文本传输协议HTTP/0.9的请求过程HTTP基于TCP协议,所以客户端先要根据IP地址、端口和服务器建立TCP连接,而建立连接的过程就是TCP协议三次握手的过程。建立好连接之后,会发生一个GET请求行的信息,如GET/index.html用来获取index.html。服务器接收请求信息之后,读取对应的HTML文件,.原创 2022-02-10 14:30:31 · 949 阅读 · 0 评论 -
浏览器工作原理学习(十九)
浏览器的三大进化路线应用程序Web化Web应用移动化Web操作系统化渐进式网页应用(PWA)PWA是一套理念,渐进式增强Web的优势,并通过技术手段渐进式缩短和本地应用或者小程序的距离。Web应相对于本地应用缺少了什么Web应用缺少离线使用能力,在离线或者弱网环境下基本上是无法使用的。而用户需要的是沉浸式的体验,在离线或者弱网环境下能够流程地使用时用户对一个应用的基本要求。Web应用缺少了消息推送能力。Web缺少一级入口,也就是将Web应用安装到桌面,在需要的时候直接.原创 2022-02-09 17:53:55 · 75 阅读 · 0 评论 -
浏览器工作原理学习(十八)
DOM的缺陷JS操作DOM时会影响到整个渲染流水线的。DOM提供了一组JS接口用来遍历或者修改节点,这会引发重排或者重绘。强制同步布局和布局抖动问题也大大降低渲染效率。复杂的页面,DOM结构也就复杂,没触发一次重排或者重绘都是非常耗时的。什么是虚拟DOM将页面改变的内容应用到虚拟DOM上,而不是直接应用到DOM上。变化被应用到虚拟DOM上时,虚拟DOM不是去渲染页面,而是调整虚拟DOM的内部状态,这样操作虚拟DOM的代价就变得很轻。在虚拟DOM收集到足够的改变时,再把这些变化一.原创 2022-02-09 15:50:12 · 55 阅读 · 0 评论 -
浏览器工作原理学习(十七)
1.显示器是如何显示图像的每个显示器都有固定的刷新频率,通常是60HZ,也就是每秒更新60张图片,更新的图片都来自于显卡中一个叫前缓冲区的地方,显示器就是每秒固定读取60次前缓冲区中的图像,并将读取的图像显示到显示器上。显卡的职责就是合成新的图像,并将图像保存到后缓冲区中,一旦显卡把合成的图像写到后缓冲区,系统就会让后缓冲区和前缓冲区互换,这样就能保证显示器都能读取到最新显卡合成的图像。一般情况下显卡的更新频率和显示器的刷新频率是一致的,但有时候复杂的场景中,显卡处理成一张图片的速度会变慢,这样就会原创 2022-02-09 14:29:04 · 1863 阅读 · 0 评论 -
浏览器工作原理学习(十六)
请求陷入排队的几种情况页面中的资源是有优先级的,比如CSS、HTML、JS等哦都是页面中的核心文件,所以优先级最高。而图片、视频、音频这类资源就不是核心资源,优先级就比较低,通常当后者遇到前者时,就需要让路,进入待排队状态。浏览器会为每个域名最多维持6个TCP连接,如果发起一个HTTP请求时,这6个TCP连接都处于忙碌状态,那么这个请求就会处于排队状态。网络进程在为数据分配磁盘空间时,新的HTTP请求也需要短暂地等待磁盘分配结束。优化实践线上耗时项排队实践过久,可以让一个站点下面的资.原创 2022-02-09 10:10:34 · 807 阅读 · 0 评论 -
浏览器工作原理学习(十五)
微任务与宏任务宏任务为了协调任务在主线程上执行,页面进程引入消息队列和事件循环机制,渲染进程内部会维护多个消息队列,主线程从这些任务队列中取出任务执行,这写消息队列种的任务称为宏任务。微任务第一种:把异步回调函数封装成一个宏任务,添加到消息队列尾部,当循环系统执行到该任务的时候执行回调函数。第二种:在主函数执行结束后,当前宏任务结束之前执行回调函数,这通常都是以微任务形式体现。本质是:微任务就是一个需要异步执行的函数,执行时机是在主函数执行结束之后、当前宏任务结束之前。每个宏.原创 2022-02-08 13:59:06 · 221 阅读 · 0 评论 -
浏览器工作原理学习(十四)
WebAPI:setTimeout浏览器如何实现setTimeout执行一段异步任务,需要先将任务添加到消息队列中。为了保证回调函数能在指定时间内执行,定时任务的回调函数不能直接添加到消息队列。延迟队列:维护消息队列中需要延迟执行的任务列表。...原创 2022-02-07 11:05:36 · 266 阅读 · 0 评论 -
浏览器工作原理学习(十二)
编译器和解释器按语言的执行流程,可以把语言划分为编译型语言和解释型语言。编译型语言:在程序执行前,需要经过编译器的编译过程,并且编译之后会直接保留机器能读懂的二进制文件,这样每次运行程序时,都可以直接运行该二进制文件,而不需要重新编译。解释性语言:在程序运行时每次都需要通过解释器对程序进行动态解释和执行。编译器工作流程:编译器依次对源代码进行词法分析、语法分析,生成抽象语法树(AST)——>词义分析生成中间代码——>代码优化生成二进制文件——>直接执行。解释器工作流程:解释.原创 2022-01-18 14:03:51 · 79 阅读 · 0 评论 -
浏览器工作原理学习(十一)
语言类型在使用前需要确认其变量数据类型的称为静态语言©,运行过程中需要检查数据类型的语言称为动态语言(js)。在赋值时,语言回进程隐式类型转换,这类语言被称为弱类型语言,不支持隐式类型转换额语言称为强类型语言。JS数据类型JS是一种弱类型的、动态的语言:弱类型即不需要声明变量类型JS引擎在运行代码的时候会自己计算出来,动态即可以使用一个变量保存不同类型的数据。原始类型:Boolean、Null、Undefined、Number、Sybmol、String、BigInt。引用类型:O.原创 2022-01-17 16:17:10 · 303 阅读 · 0 评论 -
浏览器工作原理学习(十)
this在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。但JS的作用域机制并不支持这一点,为此,JS高出了this机制。this 和作用域链是2套不同的系统。什么是this?this是和执行上下文绑定的, 每个执行上下文中都有一个this。分三种类型:全局执行上下文中的this,函数中的this,eval中的this。全局执行上下文中的this是指向window对象的,这是this合作用域链唯一的交点,作用域链的最底端包含了window对象,全局执行上下文中的this也是.原创 2022-01-17 11:13:06 · 335 阅读 · 0 评论 -
浏览器工作原理学习(九)
作用域链什么是作用域链?每个执行上下文的变量环境中,都包含了一个外部引用,用来指向外部的执行上下文,我们把外部引用称为outer。JS引在执行全局上下文中查找,这个查找的链条就是被称为作用域链。什么是词法作用域?词法作用域是指作用域是由代码中函数声明的位置来决定的,所以词法作用域是静态的作用域,通过它就能够预测代码在执行过程中如何查找标识符。词法作用域是代码编译阶段就决定好的,和函数怎么调用没关系。块级作用域中变量查找:块级作用域内词法环境——>块级作用域变量环境——&.原创 2022-01-12 16:52:47 · 200 阅读 · 0 评论 -
浏览器工作原理学习(八)
作用域全局作用域中的对象在代码中的任何地方都能访问,其生命周期伴随着页面的生命周期。函数作用域就是在函数内部定义的变量或者函数,并且定义的变量或函数只能在函数内部访问,函数执行结束后,函数内部定义的变量会被销毁。块级作用域就是使用一对大括号包裹的一段代码,比如函数、判断语句、循环语句甚至是单独的一个{}都会被是为一个块级作用域,JS在ES6之后引入块级作用域。变量提升所带来的问题变量容易在不被察觉的情况下被覆盖掉:JS在执行上下文时,先使用函数执行上下文里面的变量。本应销毁的变量没.原创 2022-01-12 10:39:43 · 174 阅读 · 0 评论 -
浏览器工作原理学习(七)
在执行前就进行编译并创建执行上下文的三种情况当JS执行全局代码得时候,会编译全局代码并创建全局执行上下文,而且在整个页面的生存周期内,全局执行上下文只有一份。当调用一个函数的时候,函数体内的代码会被编译,并创建函数执行上下文,在函数执行结束后,会被销毁。当使用eval函数的时候,eval的代码也会编译,并创建执行上下文。调用栈(用来管理函数调用关系的一种数据结构)什么是函数调用?本质是,就是运行一个函数,在执行函数前,JS引擎会为代码创建全局执行上下文,包含了声明的函数和变量。.原创 2022-01-11 17:37:15 · 140 阅读 · 0 评论 -
浏览器工作原理学习(六)
JS执行上下文在执行过程中,若使用未声明的变量JS会报错。在一个变量定义前使用它,不会出错,但是该变量的值为undefined,而不是定义时的值。在一个函数定义前使用它,不会出错,且函数能正确执行。变量提升(Hoisting)JS代码在执行过程中,JS引擎会把变量的声明部分和函数的声明部分提升到代码开头,这一行为被称为变量提升。变量提升后,会给变量设置默认值undefined。//变量提升 // 函数声明 function showName (){ console.log.原创 2022-01-11 14:20:05 · 149 阅读 · 0 评论 -
浏览器工作原理学习(五)—— 渲染流程的深入学习
渲染流程——页面是如何工作的HTML内容是由标记和文本组成。标记也称为标签,每个标签都有自己的语义,浏览器会根据标签的予以来正确展示HTML内容。CSS也称为层叠样式表,是由选择器和属性组成。渲染机制氛围多个子阶段,输入的HTML经过这些二子阶段最后输出像素。这个处理流程称为渲染流水线。按渲染时间顺序,构建DOM树——>样式计算——>布局阶段——>分层——>绘制——>分块——>光栅化——>合成。构建DOM树HTML文件经由HTML解析器解析.原创 2022-01-10 17:22:50 · 314 阅读 · 0 评论 -
浏览器工作原理学习(四)
从浏览器里,从输入URL到页面展示,这中间发送了什么?浏览器进程接收用户输入的URL请求,浏览器进程将该URL转发给网络进程。当用户在地址栏输入查询关键字时,地址栏会判断输入的关键字是搜索内容,还是请求的URL。如果是搜索内容,地址栏会使用浏览器默认的搜索引擎来合成新的带搜索关键字的URL。如果是符合URL规则,地址栏会根据规则把内容加上协议合成为完整的URL。在进入到网络进程之前,浏览器给当前页面一次执行beforeunload事件的机会(允许页面推出前执行一些数据清理操作,或取消导航.原创 2022-01-10 14:51:58 · 255 阅读 · 0 评论 -
浏览器工作原理学习(三)
HTTP协议HTTP是一种允许浏览器向服务器获取资源的协议,是Web的基础,也是浏览器使用最广的协议。HTTP协议作为应用层协议,用来封装请求的文本信息。HTTP的内容是建立在TCP链接基础之上的。浏览器发起HTTP流程浏览器构建请求行信息。查找浏览器缓存(本地保存资源副本),若找到了:浏览器会拦截请求,返回资源的副本并结束请求,如果缓存查询失败则进入网络请求阶段。请求DNS服务器获取域名对应的IP地址,同时浏览器也提供DNS数据缓存服务(如果某个域名解析过,浏览器会缓存解析结果.原创 2022-01-07 15:23:04 · 1080 阅读 · 0 评论 -
浏览器工作原理学习(二)
衡量web页面性能的一个重要指标FP(first paint):指从页面加载到首次开始绘制的时长。网络加载速度会影响FP。在网络中,一个文件通常会被拆分为很多数据包来进行传输。互联网,实际上是一套理念和协议组成的体系架构。IP是如数据包送达目的主机IP协议,也就是网际协议,计算机的地址就称为IP地址。访问任何网站实际上只是你的计算机向另外一台机计算机请求信息。IP头包含IP版本,源IP地址、目标地址、生存时间。主机A上层(要传输的文件)——>主机A网络层(数据包+IP头).原创 2022-01-06 18:06:22 · 833 阅读 · 0 评论 -
浏览器工作原理学习(一)
一、进程 VS 线程进程:进程是一个程序运行的实例,启动一个程序的时候操作系统会为该程序创建一块内存,用来存放代码,运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。线程:线程是进程的一个实体,是进程的一条执行路径。关系:1.进程中的任意一线程执行出错,都会导致整个进程的崩溃。2.线程之间共享进程中的数据,线程之间可以对进程的公共数据进行读写操作。3.当一个进程关闭之后,操作系统会回收进程所占用的内存,即使进程内的线程因为操作不当导致内存泄漏,当进程退出时,这些内存都会被.原创 2022-01-06 15:08:02 · 441 阅读 · 0 评论 -
浏览器同源策略
同源是指什么?如果两个URL的协议,主机,端口一致,则称这两个URL是同源。同源策略是一个重要的安全策略,它用于限制一个origin的文档或者加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。在页面中通过about:blank或者javascript:URL执行的脚本会继承打开该URL的文档的源,因为这类URL没有包含源服务器的相关信息。脚本可以将document.domain的值设置为当前域或其当前域的父域document.domain = ''//.原创 2021-04-28 09:36:45 · 121 阅读 · 0 评论 -
浏览器页面加载机制
网页加载过程浏览器一边下载HTML网页,一边开始解析(调用渲染线程负责渲染浏览器界面HTM元素,将HTML代码解析为DOM,CSS代码解析为CSSOM)。<head>元素内容会先被解析,此时浏览器还没开始渲染页面解析过程中 发现</script>标签,GUI 线程会被挂起,浏览器会停止解析去下载 JavaScript 脚本,下载玩抽调用js引擎线程去执行脚本。执行完毕后,调用被挂起的GUI线程继续解析HTML网页。此时<body>元素内容开始被解析,浏览器.原创 2021-04-27 17:05:51 · 635 阅读 · 0 评论 -
浏览器渲染原理之js引擎
BOM与DOMBOM:浏览器对象模型,用来设置浏览器的属性、行为,提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作。DOM:文档对象模型,用来设置文档中标签的属性,是针对XML的基于树的API。描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。DOM本身是与语言无关的API,<script>标签通过<script>标签可以直接将js代码嵌入网页。.原创 2021-04-27 14:41:51 · 274 阅读 · 0 评论 -
浏览器渲染原理之渲染引擎
浏览器组件浏览器引擎:查询与操作渲染引擎的接口。渲染引擎:请求显示内容,解析请求到的内容(HTML、css),并将结果显示到窗口中(核心)。js引擎:解析执行js代码(核心)。网络:网络请求,如HTTP请求。数据存储持久层:浏览器将所有的数据存到内存中,如cookies。渲染引擎如何处理网页解析代码:HTML代码解析为DOM,CSS解析为CSSDOM(自自上而下加载)。对象合成:将DOM和CSSDOM合成一个渲染树。布局:计算出渲染树的布局(渲染树转换为网页布局称为"布局流".原创 2021-04-27 11:26:55 · 307 阅读 · 0 评论