![](https://img-blog.csdnimg.cn/20200715113353607.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
V8 / 浏览器
文章平均质量分 88
记录浏览器相关知识
凯小默
专注前端领域开发。
展开
-
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
今天在代码里面输出 console.log 信息直接指向了 vue.js,并且代码里面写了 debgger 也不生效。找到这个 ignore list 的 custom exclusion rules 取消掉。f12 找到浏览器的这个设置图标。原创 2023-12-18 15:10:34 · 2438 阅读 · 1 评论 -
Google Chrome 浏览器 119.0.6045.106 版本提示 STATUS_INVALID_IMAGE_HASH 崩溃
我在网上找了几种,下面这个方式符合,能解决我的问题,就是在快捷方式的属性那里,找到目标给它添加。应用,然后确定之后打开浏览器,就能打开了,看到这个提示就说明配置成功。今天更新 Google Chrome 浏览器到。版本,然后访问页面不是空白,就是页面崩溃了。关闭 Chrome 沙箱。原创 2023-11-07 16:43:31 · 788 阅读 · 0 评论 -
chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?
今天我在写代码的时候报错了,看了一下控制台浏览器,是某个属性没有定义,然后我双击这个属性名称。版本里发现了这个问题,在 canary。可以不使用 ctrl c 跟复制,使用。】试了一下,复制粘贴报错的文本是可以的。里修复了并合并到了正式版本 113。复制,最后粘贴的时候发现。的关键字,就能找到描述。试了一下,粘贴是可以的。原创 2023-04-21 18:52:17 · 2074 阅读 · 0 评论 -
Google Chrome浏览器怎么开启查看帧率功能?
我们 f12 打开开发者工具,我们找到更多工具这里,找到 Rendering,然后把 Frame Rendering Stats 勾选上即可,效果如下。原创 2022-12-19 15:18:56 · 5615 阅读 · 0 评论 -
360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?
于是我猜想是不是360极速浏览器以及360安全浏览器在兼容模式下需要base64的图片才行,于是我将上面改成base64的尝试一下。最近遇到一个验证码出不来的问题,在360极速浏览器以及360安全浏览器在兼容模式下。这个验证码的代码元素如下,是一张图片,由接口提供的一个图片链接,返回的是文件流。我找了一个其他网址,发现在360极速浏览器以及360安全浏览器在兼容模式下。这个验证码的代码元素如下,是一张 base64 的图片。有了上面的猜想方案,下面来实践一下。改完之后,就可以了。原创 2022-10-27 16:26:33 · 2068 阅读 · 0 评论 -
怎么从零编写一个 v3 版本的 chrome 浏览器插件实现 CSDN 博客网站的暗黑和明亮主题切换?
目前已经不能再发布MV2版本的插件,相比于MV2,MV3有诸多不同,例如权限控制,API的变动,发起请求的方式等。它处于休眠状态,直到触发事件,然后执行指示的逻辑。有效的后台脚本仅在需要时加载,并在空闲时卸载。我们发现id为userSkin的dom元素的类不同可以显示不同的主题的效果。,点击加载已解压的扩展程序,选择刚刚新建的chrome文件夹即可。测试效果,访问csdn博客网站的时候,就会弹出。文件,在文件里输入下面代码,给插件取名叫流沙,版本是1.0。...原创 2022-08-01 17:59:02 · 1545 阅读 · 3 评论 -
window 系统里 chrome 浏览器一些实用的调试技巧
某一天,我突然发现chrome浏览器竟是熟悉的陌生人,感觉好多操作都不知道,于是,我看了一些大佬写的笔记,自己把不会的一些整理了一下,记录起来,忘记的时候偶尔来看一看。也可以输入theme,下面就会出现主题的切换,比如你现在是light主题,就会给你dark主题的切换选择。我们普通展开时只会展开它的子节点,如果我们想全部展开,可以按住alt在点击展开即可。就会下载下来一张图片可以看到这张图片,出现了页面未出现的所有内容。我们在27行打个断点,重新执行这段代码的时候,会停三下。...原创 2022-07-20 18:49:35 · 2271 阅读 · 0 评论 -
【浏览器工作原理与实践】专栏 40 篇学习笔记合集(完结)
说明这些文章只是笔者学习记录的笔记,仅供参考。请支持正版的专栏。目录Chrome架构:仅仅打开了1个页面,为什么有4个进程?TCP协议:如何保证页面文件能被完整送达浏览器?HTTP 请求流程:为什么很多站点第二次打开速度会很快?导航流程:从输入URL到页面展示,这中间发生了什么?渲染流程:HTML、CSS和JavaScript,是如何变成页面的?变量提升:JavaScript代码是按顺序执行的吗?调用栈:为什么JavaScript代码会出现栈溢出?块级作用域:var缺陷以及为什么要引入原创 2022-01-19 15:10:49 · 2397 阅读 · 0 评论 -
【图解 Google V8】学习笔记合集 23 篇(完结)
这些文章只是笔者学习【图解 Google V8】专栏记录的笔记,仅供参考。请支持正版的课程。原创 2022-06-13 19:53:45 · 2086 阅读 · 0 评论 -
图解 Google V8 # 22 :关于内存泄漏、内存膨胀、频繁垃圾回收的解决策略(完结篇)
图解 Google V8 学习笔记内存问题可以定义为三类:内存泄漏:当进程不再需要某些内存的时候,这些不再被需要的内存依然没有被进程回收。当执行这段代码时,由于函数体内的对象没有被 这些关键字声明,那么 V8 就会使用 替换 。这里的 this 指向常驻内存 的 window 对象,即便 foo 函数退出了,依然被 window 对象引用,这就造成了 temp_array 的泄漏。为了解决这个问题,可以在 JavaScript 文件头部加上 ,使用严格模式避免意外的全局变量。没有加 ,this 指向原创 2022-07-12 21:16:55 · 1101 阅读 · 1 评论 -
图解 Google V8 # 21 :垃圾回收(二):V8是如何优化垃圾回收器执行效率的?
图解 Google V8 学习笔记由于 JavaScript 是运行在主线程之上的,一旦执行垃圾回收算法,都需要将正在执行的 JavaScript 脚本暂停下来,待垃圾回收完毕后再恢复脚本执行。这种行为叫做全停顿(Stop-The-World)。全停顿的执行效果示意图:下面的 200 毫秒内无法执行其他事情,可能造成页面的卡顿 (Jank)。并行回收机制:主线程在执行垃圾回收的任务时,引入多个辅助线程来并行处理,这样就会加速垃圾回收的执行速度。V8 的副垃圾回收器所采用的就是并行策略,它在执行垃圾回收的过程原创 2022-07-12 18:01:51 · 525 阅读 · 0 评论 -
图解 Google V8 # 20 :垃圾回收(一):V8的两个垃圾回收器是如何工作的?
图解 Google V8 学习笔记例子:上面代码内存布局图:在上面的基础上,添加代码执行:此时的内存布局:a 属性之前是指向堆中数组对象的,现在已经指向了另外一个空对象,此时堆中的数组对象就成为了垃圾数据。V8 虚拟机是怎么实现垃圾回收的?目前 V8 采用的可访问性(reachability)算法来判断堆中的对象是否是活动对象。具体地讲,这个算法是将一些 GC Root 作为初始存活的对象的集合,从 GC Roots 对象出发,遍历 GC Root 中的所有对象:在浏览器环境中,GC Root 有很多,原创 2022-07-11 18:22:09 · 382 阅读 · 0 评论 -
图解 Google V8 # 19 :异步编程(二):V8 是如何实现 async/await 的?
图解 Google V8 学习笔记如果在代码中过多地使用异步回调函数,会将整个代码逻辑打乱,从而让代码变得难以理解,这就是回调地狱问题。上面的代码一个异步请求套着一个异步请求,一个异步请求依赖于另一个的执行结果,使用回调的方式相互嵌套。这会导致代码很丑陋,不方便后期维护。使用 Promise 可以解决回调地狱中编码不线性的问题。3、使用 Generator 函数实现更加线性化逻辑虽然使用 Promise 可以解决回调地狱中编码不线性的问题,但这种方式充满了 Promise 的 方法,如果处理流程比原创 2022-06-29 12:03:06 · 437 阅读 · 2 评论 -
图解 Google V8 # 18 :异步编程(一):V8是如何实现微任务的?
图解 Google V8 学习笔记指消息队列中的等待被主线程执行的事件。每个宏任务在执行时,V8 都会重新创建栈,然后随着宏任务中函数调用,栈也随之变化,最终,当该宏任务执行结束时,整个栈又会被清空,接着主线程继续执行下一个宏任务。微任务其实是一个需要异步执行的函数,执行时机是在主函数执行结束之后、当前宏任务结束之前。由于主线程执行消息队列中宏任务的时间颗粒度太粗了,无法胜任一些对精度和实时性要求较高的场景,而微任务可以在实时性和效率之间做一个有效的权衡。另外一个好处就是可以使用同步形式的代码来编写异步调用原创 2022-06-22 17:40:12 · 1130 阅读 · 0 评论 -
图解 Google V8 # 17:消息队列:V8是怎么实现回调函数的?
图解 Google V8 学习笔记只有当某个函数被作为参数,传递给另外一个函数,或者传递给宿主环境,然后该函数在函数内部或者在宿主环境中被调用,才称为回调函数。回调函数有两种不同的形式:注意:在浏览器的页面里面是UI线程,node中就是它的主线程。所谓 UI 线程,是指运行窗口的线程,当你运行一个窗口时,无论该页面是 Windows 上的窗口系统,还是 Android 或者 iOS 上的窗口系统,它们都需要处理各种事件,诸如有触发绘制页面的事件,有鼠标点击、拖拽、放大缩小的事件,有资源下载、文件读写的事件,原创 2022-06-22 11:04:27 · 684 阅读 · 0 评论 -
图解 Google V8 # 16:V8是怎么通过内联缓存来提升函数执行效率的?
图解 Google V8 学习笔记例子:V8 获取 的流程:查找对象 o 的隐藏类,再通过隐藏类查找 x 属性偏移量,然后根据偏移量获取属性值。上面这段代码中 loadX 函数会被反复执行,那么获取 流程也需要反复被执行。V8 为了加速函数执行采取的策略就是内联缓存 (Inline Cache),简称为 IC。IC 会为每个函数维护一个反馈向量 (FeedBack Vector),反馈向量记录了函数在执行过程中的一些关键的中间数据。函数和反馈向量的关系:反馈向量其实就是一个表结构,它由很多项组成的,每原创 2022-06-20 18:53:21 · 446 阅读 · 0 评论 -
图解 Google V8 # 15:隐藏类:如何在内存中快速查找对象属性?
图解 Google V8 学习笔记静态语言中,可以直接通过偏移量查询来查询对象的属性值。比如下面例子:JavaScript 在运行时,对象的属性是可以被修改的,所以当 V8 使用了一个对象时,它并不知道该对象中是否有 x,也不知道 x 相对于对象的偏移量是多少。V8 会按照具体的规则一步一步来查询,这个过程非常的慢且耗时。C++ 代码在执行之前需要先被编译,编译的时候,每个对象的形状都是固定的。编译器会直接将 x 相对于 start 的地址写进汇编指令中,使用了对象 start 中的 x 属性时,CPU原创 2022-06-20 15:49:02 · 942 阅读 · 2 评论 -
图解 Google V8 # 14:字节码(二):解释器是如何解释执行字节码的?
图解 Google V8 学习笔记字节码的解释执行在编译流水线中的位置:V8 源码目录:当 V8 执行一段 JavaScript 代码时,会先对 JavaScript 代码进行解析 (Parser),并生成为 AST 和作用域信息,之后 AST 和作用域信息被输入到一个称为 Ignition 的解释器中,并将其转化为字节码,之后字节码再由 Ignition 解释器来解释执行。例子:在 文件里添加下面代码生成 ASTV8 首先会将函数的源码解析为 AST,执行下面命令查看 V8 内部生成的 AST:原创 2022-06-20 11:34:01 · 1083 阅读 · 0 评论 -
图解 Google V8 # 13:字节码(一):V8为什么又重新引入字节码?
图解 Google V8 学习笔记所谓字节码,是指编译过程中的中间代码。字节码有两个作用:早期 V8 执行流水线:直接将 JavaScript 代码编译成机器代码。为什么现在使用了字节码 + 解释器 + 编译器方式,抛弃了直接将 JavaScript 代码编译为二进制代码的方式,尽管机器代码的执行性能非常高效,出于什么原因考虑?通过把二进制代码保存在内存中来消除冗余的编译,重用它们完成后续的调用,这样就省去了再次编译的时间。实践表明,在浏览器中采用了二进制代码缓存的方式,初始加载时分析和编译的时间缩短了 2原创 2022-06-17 17:24:22 · 801 阅读 · 1 评论 -
图解 Google V8 # 12:延迟解析:V8是如何实现闭包的?
图解 Google V8 学习笔记在编译 JavaScript 代码的过程中,V8 并不会一次性将所有的 JavaScript 解析为中间代码,如果一次性解析和编译所有 JavaScript 代码会导致下面的问题:基于以上的原因,所有主流的 JavaScript 虚拟机都实现了惰性解析。结合下面的例子分析:V8 会至上而下解析这段代码,先遇到 foo 函数,会将函数声明转换为函数对象,但是并没有解析和编译函数内部的代码,不会为 foo 函数的内部代码生成抽象语法树。然后继续往下解析,后续的代码都是顶层代码原创 2022-06-17 14:51:02 · 518 阅读 · 0 评论 -
图解 Google V8 # 11:堆和栈:函数调用是如何影响到内存布局的?
图解 Google V8 学习笔记先看三个例子:1、在同一个任务中重复调用嵌套的 kaimo 函数。V8 会报栈溢出的错误:2、使用 setTimeout 让 kaimo 函数在不同的任务中执行。V8 能够正确执行。3、在同一个任务中执行 kaimo 函数,但是却不是嵌套执行。没有栈溢出的错误,页面却出现了卡死的情况。有同学说在执行5-10分钟后,Chrome会报错:,然后当前宏任务继续处于被挂起状态。大家可以试一下,我试了好几次都是浏览器崩溃了,就很离谱。V8 执行这三种不同代码时,它们的内存布局是原创 2022-06-16 21:12:25 · 936 阅读 · 0 评论 -
图解 Google V8 # 10:机器代码:二进制机器码究竟是如何被CPU执行的?
图解 Google V8 学习笔记在执行代码时,V8 需要先将 JavaScript 编译成字节码,然后再解释执行字节码,或者将需要优化的字节码编译成二进制,并直接执行二进制代码。CPU执行二进制代码:下面是一段 C 代码先通过 GCC 编译器将这段 C 代码编译成二进制文件,编译出来的机器码每一行都是一个指令,该指令可以让 CPU 执行指定的任务。助记符(mnemonic)计算机系统的硬件组织结构:首先,在程序执行之前,需要被装进内存。内存还是一个临时存储数据的设备,之所以是临时的存储器,是因为断电之原创 2022-06-16 17:33:04 · 2535 阅读 · 2 评论 -
图解 Google V8 # 09:运行时环境:运行JavaScript代码的基石
图解 Google V8 学习笔记在执行 JavaScript 代码之前,V8 就已经准备好了代码的运行时环境,包括:要执行 V8,则需要有一个宿主环境,宿主环境可以是浏览器中的渲染进程,可以是 Node.js 进程, 也可以是其他的定制开发的环境,而这些宿主则提供了很多 V8 执行 JavaScript 时所需的基础功能部件。宿主环境和 V8 的关系:V8 和浏览器的渲染进程的关系看成病毒和细胞的关系:栈空间主要是用来管理 JavaScript 函数调用的,栈是内存中连续的一块空间,同时栈结构是“先进后出原创 2022-06-15 17:58:23 · 573 阅读 · 0 评论 -
图解 Google V8 # 08:类型转换:V8是怎么实现 1 + “2” 的?
图解 Google V8 学习笔记。为什么数字 1 加上字符串 2 输出的结果是字符串 12 ?要搞清上面这个问题,需要知道类型的概念,以及 JavaScript 操作类型的策略。对机器语言来说,所有的数据都是一堆二进制代码,CPU 处理这些数据的时候,并没有类型的概念,CPU 所做的仅仅是移动数据,比如对其进行移位,相加或相乘。在高级语言中,我们都会为操作的数据赋予指定的类型,类型可以确认一个值或者一组值具有特定的意义和目的。通用的类型有数字类型、字符串、Boolean 类型等等,引入了这些类型之后,编原创 2022-06-15 11:49:03 · 507 阅读 · 0 评论 -
图解 Google V8 # 07:作用域链:V8是如何查找变量的?
图解 Google V8 学习笔记作用域就是存放变量和函数的地方,作用域链就是将一个个作用域串起来,实现变量查找的路径。例子1:输出结果如下:name 的值为 foo,这个应该没什么疑问,但是 type 的值为 global,可能大家会有疑问,为什么不是 function,输出 global 的原因是什么 ?下面先了解一下作用域的工作原理。例子2:我们在控制台输入上面代码,可以看到在 debugger 的时候,右侧的 Scope 项里有 Local,这个就是当前函数 kaimo_scope 的作用域。发原创 2022-06-13 19:51:09 · 475 阅读 · 0 评论 -
图解 Google V8 # 06:原型链:V8是如何实现对象继承的?
图解 Google V8 学习笔记简单的说:继承就是一个对象可以访问另外一个对象中的属性和方法,在JavaScript 中,我们通过原型和原型链的方式来实现了继承特性。。不同的语言实现继承的方式是不同的,其中最典型的两种方式:JavaScript 的每个对象都包含了一个隐藏属性 ,我们就把该隐藏属性 称之为该对象的原型 (prototype), 指向了内存中的另外一个对象,我们就把 指向的对象称为该对象的原型对象。例子:我们让 C 对象的原型指向 B 对象,让 B 对象的原型指向 A 对象,那么 C原创 2022-06-08 11:06:58 · 546 阅读 · 0 评论 -
图解 Google V8 # 05:函数表达式的底层工作机制
图解 Google V8 学习笔记我们先来看两段代码的对比:代码片段1:执行代码,发现没有报错,并且成功打印了 foo。代码片段2:同样我们执行代码,发现代码执行报错了:都是在定义的函数之前调用函数,为什么代码片段1执行成功,而代码片段2执行报错?原因:这两种定义函数的方式具有不同语义,不同的语义触发了不同的行为。我们把第一种称之为函数声明第二种称之为函数表达式先看一个例子:V8 执行这段代码的流程大致如下:在编译阶段:在执行阶段:没有d8环境的可以参考我这篇文章window 系统里怎么使用 jsvu原创 2022-06-02 19:22:21 · 409 阅读 · 0 评论 -
window 系统里怎么使用 jsvu 工具快速调试 v8?
jsvu 是 JavaScript(引擎)版本更新器。 jsvu 可以轻松安装各种 JavaScript 引擎的最新版本,而无需从源代码编译它们。支持多种操作系统和多种 JavaScript 引擎,目前为止支持的操作系统和引擎如下:我们全局安装 jsvu首次运行时,jsvu 会提示输入操作系统和架构,以及希望通过 jsvu 管理的 JavaScript 引擎列表。 然后它会下载并安装选择的每个引擎的最新版本。选择完之后,jsvu 会记住这次选择,下次再执行时还是会引用上一次的配置,我这里根据我的需求用了下原创 2022-06-02 16:07:52 · 1410 阅读 · 2 评论 -
图解 Google V8 # 04:V8 中的对象表示:怎么利用 Chrome 内存快照去查看对象在内存中是如何布局的?
说明图解 Google V8 学习笔记在 Chrome 中查看内存快照1、首先我们 f12 在控制台运行下面这段程序function Student(name, gender) { this.name = name; this.gender= gender;}var kaimo = new Student('kaimo', '男');2、切换到 Memory 中,点击左侧的小圆圈就可以捕获当前的内存快照。点开快照后,在过滤器中输入 Student,即可找到V8 中对象的结构在原创 2022-06-01 16:28:45 · 1518 阅读 · 1 评论 -
图解 Google V8 # 03:快属性和慢属性:V8是怎样提升对象属性访问速度的?
说明图解 Google V8 学习笔记线性结构和非线性结构JavaScript 中的对象是由一组组属性和值的集合,就像一个字典,字符串作为键名,任意对象可以作为键值,可以通过键名读写键值。而在 V8 实现对象存储时,并没有完全采用字典的存储方式,而是用的非线性的数据结构,查询效率会低于线性的数据结构,V8 为了提升存储和查找效率,采用了一套复杂的存储策略。下面看看是用了什么策略去提升了对象属性的访问速度?常规属性 (properties) 和排序属性 (element)我们先看一个例子:f原创 2022-05-30 16:52:57 · 675 阅读 · 0 评论 -
图解 Google V8 # 02:函数即对象:一篇文章彻底搞懂 JavaScript 的函数特点
说明图解 Google V8 学习笔记什么是 JavaScript 中的对象?JavaScript 是一门基于对象 (Object-Based) 的语言,可以说 JavaScript 中大部分的内容都是由对象构成的,诸如函数、数组,也可以说 JavaScript 是建立在对象之上的语言。虽然 JavaScript 是基于对象设计的,但是它却不是一门面向对象的语言 (Object—Oriented Programming Language),因为面向对象语言天生支持封装、继承、多态,但是 JavaS原创 2022-05-27 19:04:45 · 465 阅读 · 1 评论 -
图解 Google V8 # 01:V8 是如何执行一段 JavaScript 代码的?
说明图解 Google V8 学习笔记什么是 V8?V8 是 JavaScript 虚拟机的一种,由 Google 开发的开源 JavaScript 引擎,目前用在 Chrome 浏览器和 Node.js 中,其核心功能是执行易于人类理解的 JavaScript 代码。JavaScript 引擎种类:SpiderMonkeyV8JavaScriptCore…JavaScript 引擎将人类能够理解的编程语言 JavaScript,翻译成机器能够理解的机器语言。JavaScript原创 2022-05-27 17:50:35 · 1241 阅读 · 0 评论 -
关于 getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取 documentElement 宽度比在 IE 浏览器下面多 4px 的问题
问题最近我遇到了一个问题,用 document.documentElement.getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取到的宽度比在 IE 浏览器下面多 4px效果对比如下图:360极速浏览器的 IE 兼容模式下获取如下IE 浏览器获取如下可能的原因对此我有点不太理解,我看他们两个浏览器的 userAgent 都是一样的.navigator.appVersion: (5.0 (Windows NT 10.0; WOW64; Trident原创 2022-03-03 19:10:00 · 485 阅读 · 0 评论 -
浏览器原理 40 # 性能分析工具:如何分析 Performance 中的 Main 指标?(完结)
说明浏览器工作原理与实践专栏学习笔记任务 vs 过程Main 指标中的任务和过程:浏览器原理 14 # 消息队列和事件循环浏览器原理 37 # 任务调度:有了setTimeOut,为什么还要使用 requestAnimationFrame?渲染进程中维护了消息队列,如果通过 SetTimeout 设置的回调函数,通过鼠标点击的消息事件,都会以任务的形式添加消息队列中,然后任务调度器会按照一定规则从消息队列中取出合适的任务,并让其在渲染主线程上执行。Main 指标记录了渲染主线上所执行的全部原创 2021-07-07 21:54:09 · 942 阅读 · 2 评论 -
浏览器原理 39 # 页面性能工具:如何使用 Performance?
说明浏览器工作原理与实践专栏学习笔记Audits vs PerformancePerformance 可以记录站点在运行过程中的性能数据,有了这些性能数据,就可以回放整个页面的执行过程,这样就方便定位和诊断每个时间段内页面的运行情况,从而有效帮助我们找出页面的性能瓶颈。不同于 Audits,Performance 不会给出性能得分,也不会给出优化建议,它只是单纯地采集性能数据,并将采集到的数据按照时间线的方式来展现。需要我们自己依据原始数据来分析 Web 应用的性能问题。不同于 Audits 只能原创 2021-07-06 21:45:05 · 1472 阅读 · 0 评论 -
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
说明浏览器工作原理与实践专栏学习笔记什么是 Web 性能?Web performance:https://en.wikipedia.org/wiki/Web_performanceWeb 性能描述了 Web 应用在浏览器上的加载和显示的速度。性能检测工具:Performance vs AuditsPerformance 和 Audits,它们能够准确统计页面在加载阶段和运行阶段的一些核心数据,诸如任务执行记录、首屏展示花费的时长等,有了这些数据我们就能很容易定位到 Web 应用的性能瓶颈原创 2021-06-25 19:57:00 · 1484 阅读 · 0 评论 -
浏览器原理 37 # 任务调度:有了setTimeOut,为什么还要使用 requestAnimationFrame?
说明浏览器工作原理与实践专栏学习笔记什么是 requestAnimationFrame ?https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFramerequestAnimationFrame实现动画效果的方法比较多,Javascript 中可以通过定时器 setTimeout 来实现,css3 可以使用 transition 和 animation 来实现,html5 中的 canvas 也可以实现原创 2021-06-24 17:51:53 · 1221 阅读 · 1 评论 -
浏览器原理 36 # 浏览上下文组:如何计算Chrome中渲染进程的个数?
说明浏览器工作原理与实践专栏学习笔记原创 2021-06-23 17:39:09 · 523 阅读 · 1 评论 -
浏览器原理 35 # HTTPS
说明浏览器工作原理与实践专栏学习笔记前言经过前面几节的学习,浏览器安全还差网络安全没有学习,之前的笔记如下:有兴趣的可以看看浏览器安全:页面安全浏览器原理 31 # 同源策略:为什么XMLHttpRequest不能跨域请求资源?浏览器原理 32 # 跨站脚本攻击(XSS):为什么Cookie中有HttpOnly属性?浏览器原理 33 # CSRF攻击:为什么Cookie中有SameSite属性?系统安全浏览器原理 34 # 安全沙箱网络安全浏览器原理 35 # HTT原创 2021-06-19 13:20:30 · 590 阅读 · 0 评论 -
浏览器原理 34 # 安全沙箱
说明浏览器工作原理与实践专栏学习笔记单进程架构的浏览器在最开始的阶段,浏览器是单进程的,这意味着渲染过程、JavaScript 执行过程、网络加载过程、UI 绘制过程和页面显示过程等都是在同一个进程中执行的。从稳定性来看:单进程架构的浏览器是不稳定的,因为只要浏览器进程中的任意一个功能出现异常都有可能影响到整个浏览器,如页面卡死、浏览器崩溃等。从安全性来看:如果浏览器被曝出存在漏洞,那么在这些漏洞没有被及时修复的情况下,黑客就有可能通过恶意的页面向浏览器中注入恶意程序。最常见的攻击方式是利用原创 2021-06-16 17:54:47 · 717 阅读 · 0 评论