随笔分类 - 浏览器/v8引擎知识
摘要：一、概述 随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。 Cookie 的大小不超过4KB，且每次请求都会发送回服务器； LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，
阅读全文
摘要：一、问题背景 网站上自己有设置广告位，结果在部分电脑上不显示图片，及广告位。 部分电脑是安装了 Adblock 广告拦截插件的电脑。 二、问题原因 最后发现原因是因为安装了 Adblock 广告拦截插件。关于 Adblock 可以看官网：Adblock Plus | 世界排名第一的免费广告拦截程序
阅读全文
摘要：本篇文章翻译自adobe Web Platform Team的博客：CSS animations and transitions performance: looking inside the browser，虽然是一篇旧文，但是里面谈到的知识点很有用，对CSS的性能优化有很大帮助。 在这篇文章中，
阅读全文
摘要：在上篇文章中我们从技术演变的角度介绍了 PWA，这是一套集合了多种技术的理念，让浏览器渐进式适应设备端。今天我们要站在开发者和项目角度来聊聊 WebComponent，同样它也是一套技术的组合，能提供给开发者组件化开发的能力。 那什么是组件化呢？ 其实组件化并没有一个明确的定义，不过这里我们可以使用
阅读全文
摘要：在专栏开篇词中，我们提到过浏览器的三大进化路线： 第一个是应用程序 Web 化； 第二个是 Web 应用移动化； 第三个是 Web 操作系统化； 其中，第二个 Web 应用移动化是 Google 梦寐以求而又一直在发力的一件事，不过对于移动设备来说，前有本地 APP，后有移动小程序，想要浏览器切入到
阅读全文
摘要：虚拟 DOM 是非常火的技术，两大著名前端框架 React 和 Vue 都使用了虚拟 DOM，所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了，React 和 Vue 框架本身所蕴含的知识点非常多，而且也不是我们专栏的重点，所以在这里我们还是把重心聚焦在虚拟 DOM 上。
阅读全文
摘要：在前面几篇文章中，我们分析了页面加载和 DOM 生成，讨论了 JavaScript 和 CSS 是如何影响到 DOM 生成的，还结合渲染流水线来讲解了分层和合成机制，同时在这些文章里面，我们还穿插说明了很多优化页面性能的最佳实践策略。通过这些知识点的学习，相信你已经知道渲染引擎是怎么绘制出帧的，不过
阅读全文
摘要：在前面的文章中我们分析了 CSS 和 JavaScript 是如何影响到 DOM 树生成的，今天我们继续沿着渲染流水线向下分析，来聊聊 DOM 树之后所发生的事情。 在前面的文章《浏览器工作原理：浅析浏览器渲染进程 - HTML、CSS和JavaScript是如何变成页面的？（下） 》中，我们介绍过
阅读全文
摘要：在上篇文章中我们详细介绍了 DOM 的生成过程，并结合具体例子分析了 JavaScript 是如何阻塞 DOM 生成的。那本文我们就继续深入聊聊渲染流水线中的 CSS。因为 CSS 是页面中非常重要的资源，它决定了页面最终显示出来的效果，并影响着用户对整个网站的第一体验。所以，搞清楚浏览器中的 CS
阅读全文
摘要：在浏览器中的页面： 21 | Chrome开发者工具：利用网络面板做性能分析中，我们通过开发者工具中的网络面板，介绍了网络请求过程的几种性能指标以及对页面加载的影响。 而在渲染流水线中，后面的步骤都直接或者间接地依赖于 DOM 结构，所以本文我们就继续沿着网络数据流路径来介绍 DOM 树是怎么生成的
阅读全文
摘要：在 Promise 原理解析中，我们介绍了怎么使用 Promise 来实现回调操作，使用 Promise 能很好地解决回调地狱的问题，但是这种方式充满了 Promise 的 then() 方法，如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程。 比如
阅读全文
摘要：在上一篇文章中我们聊到了微任务是如何工作的，并介绍了 MutationObserver 是如何利用微任务来权衡性能和效率的。今天我们就接着来聊聊微任务的另外一个应用 Promise，DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的，而且新的前端框架也使用了大量的 P
阅读全文
摘要：在之前的文章中，我们介绍了消息队列，并结合消息队列介绍了两种典型的 WebAPI —— setTimeout 和 XMLHttpRequest ，通过这两个 WebAPI 我们搞清楚了浏览器的消息循环系统是怎么工作的。不过随着浏览器的应用领域越来越广泛，消息队列中这种粗时间颗粒度的任务已经不能胜任部
阅读全文
摘要：在前面的文章中，我们介绍了 setTimeout 是如何结合渲染进程的循环系统工作的，那本篇文章我们就继续介绍另外一种类型的 WebAPI —— XMLHttpRequest。 自从网页中引入了 JavaScript，我们就可以操作 DOM 树中任意一个节点，例如隐藏 / 显示节点、改变颜色、获得或
阅读全文
摘要：前面我们介绍了页面中的事件和消息队列，知道了浏览器页面是由消息队列和事件循环系统来驱动的。 那在接下来的两篇文章中，我会通过 setTimeout 和 XMLHttpRequest 这两个 WebAPI 来介绍事件循环的应用。这两个 WebAPI 是两种不同类型的应用，比较典型，并且在 JavaSc
阅读全文
摘要：最初我们讲到了每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理 DOM，又要计算样式，还要处理布局，同时还需要处理 JavaScript 任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条不紊地执行，这就需要一个系统来统筹调度这些任务，这个统筹调度系统就是我们今天要讲的消息队列和事
阅读全文
摘要：前面我们已经花了很多篇幅来介绍 JavaScript 是如何工作的，了解了这些内容能帮助你从底层理解 JavaScript 的工作机制，从而能帮助你更好地理解和应用 JavaScript。 今天这篇文章我们就继续 “向下” 分析，站在 JavaScript 引擎 V8 的视角，来分析 JavaScr
阅读全文
摘要：一、浏览器是如何下载资源的 1、同步的JS阻塞下载 HTML 在解析的过程中遇到同步的 script 会卡住 DOM 解析，这个知识点我相信大家应该都知道。 <!DOCTYPE html> <html lang="en"> <body> <script>console.log(1)</script>
阅读全文
摘要：最近看到一篇文章，详细讲述了浏览器是如何工作的，感觉非常好，所以决定一点点摘录及研究下。 一、机器码、字节码 1、V8 为什么要引入字节码 早期的 V8 为了提升代码的执行速度，直接将 JavaScript 源代码编译成了没有优化的二进制机器代码，如果某一段二进制代码执行频率过高，那么 V8 会将其
阅读全文
摘要：最近看到一篇文章，详细讲述了浏览器是如何工作的，感觉非常好，所以决定一点点摘录及研究下。 一、一等公民与闭包 1、一等公民的定义 在编程语言中，一等公民可以作为函数参数，可以作为函数返回值，也可以赋值给变量。 如果某个编程语言的函数，可以和这个语言的数据类型做一样的事情，我们就把这个语言中的函数称为
阅读全文
