提到前端性能优化，我们通常会想到[启用压缩](http://www.yaohaixiao.com/blog/how-to-configure-gzip-compression-with-nginx/)，压缩资源文件大小。或者启用浏览器缓存，可以起到较少 HTTP 请求，优化资源加载速度的效果，但这些手段主要提升重复访问相同资源时的加载速度。默认情况下，浏览器只会先加载 HTML 中声明的资源。如果没有声明，浏览器是不会提前加载资源的。那有没有什么办法能提前加载页面所需资源，优化首次的加载速度呢？ 很幸运，随着 Web 技术的发展，现代的浏览器可以做到提前加载页面所需资源了。使用资源提示伪指令([https://www.w3.org/TR/resource-hints/](https://www.w3.org/TR/resource-hints/))：prefetch 和 preload，可以提前告知浏览器加载资源，从而可以缩短网站的（首次）加载速度，优化页面性能。 什么是\<link rel=”prefetch“\ ？ ------------------------------...

2020 年 12 月，QCon 全球软件大会 2020·上海站上阿里巴巴张舒迪（圣司）分享了《阿里跨端技术演进中的实践与思考》，他从跨端技术背景及演进历程、阿里跨端业务现状及思考、跨端技术方向思路演进以及对跨端技术未来展望这四个方面进行了深入的分析，从实践出发为跨端技术开发者带来更多思考方向。本文根据此次分享整理。

上一篇文章 [Tree-Shaking性能优化实践 原理篇](https://zhuanlan.zhihu.com/p/32554436) 介绍了 tree-shaking 的原理，本文主要介绍 tree-shaking 的实践 [](https://zhuanlan.zhihu.com/p/32554436) 三. tree-shaking实践 -------------------- webpack2 发布，宣布支持tree-shaking，webpack 3发布，支持作用域提升，生成的bundle文件更小。 再没有升级webpack之前，增幻想我们的性能又要大幅提升了，对升级充满了期待。实际上事实是这样的 升级完之后，bundle文件大小并没有大幅减少，当时有较大的心理落差，然后去研究了为什么效果

一、前言 -------- 本文是 [从零到亿系统性的建立前端构建知识体系✨](https://juejin.cn/post/7145855619096903717 "https://juejin.cn/post/7145855619096903717") 中的第三篇，整体难度 ⭐️⭐️⭐️。 在本文中我们将会深挖 AST（抽象语法树） 以及基于 AST 衍生出来的一系列实际应用。读完本章你会收获什么： AST（抽象语法树） 到底是什么？ AST基础：从零到一手撸一个功能完备的编译器 AST基础：[Babel](https://link.juejin.cn/?target=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fen%2F "https://babeljs.io/docs/en/") 的设计理念 AST的应用：手写console插件，再也不怕打开控制台满屏的console了😭😭😭 AST的应用： [ES6](https://link.juejin.cn/?target=https%3A%2F%2Fwww.w3...

1写在前面 --------- 最近哈啰单车前端团队开源的Quark Design组件库，号称是下一代前端组件库，可以同事在任意框架或无框架中使用。 那么，什么是Web Components？ 2什么是Web Components？ ----------------------- 现今前端生态中框架层出不穷，在生产中为了提升效率和标准化组件，就会针对框架开发组件库。但是各种框架之间是不兼容的，对此需要对应开发适应框架的组件库，这样也造成维护成本攀升。就如同物理界有电磁相互作用、强相互作用以及弱相互作用，需要单独的物理理论来解释这三种作用造成的物理现象，这样让众多物理学家在朝着 大统一理论 前进，而 Web Components 可以看作是现今UI组件库"大统一理论"的一种解决方案。 Web Components 与 React、Vue 等框架中的组件类似，其实在Vue中也采用了很多基于 Web Components 的设计。这...

前言 ---- 三面的时候被问到了这个问题，当时思路虽然正确，可惜表述的不够清晰 后来花了一些时间整理了下思路，那么如何实现给所有的async函数添加try/catch呢？ async如果不加 try/catch 会发生什么事？ -------------------------------------- js // 示例 async function fn() { let value = await new Promise((resolve, reject) = { reject('failure'); }); console.log('do something...'); } fn() 导致浏览器报错：一个未捕获的错误 在开发过程中，为了保证系统健壮性，或者是为了捕获异步的错误，需要频繁的在 async 函数中添加 try/catch，避免出现上述示例的情况 可是我很懒，不想一个个加， 懒惰使

Markdown-It 解析原理 markdown-it是目前使用最广泛的 markdown解析器工具 。它将markdown语法的文件，解析为最终的html文件。绝大部分文档中心框架工具如Vuepress，处理markdown文件部分都是使用该工具以及扩展出的插件。了解它的解析过程，是进行自定义markdown插件的前提。 解析主要分两步： 1. Parser：将md文档解析为Tokens（类似ATS） 2. Renderer：将Tokens内容渲染为html js var md = require('markdown-it')(); // render函数包含了parser和renderer阶段 var result = md.render(' markdown-it rulezz!'); [ ](about:blank parser) Parser -------- 创建一个 Core Parse

多人协同编辑一直是我们 PingCode Wiki 不太敢触碰的一个功能，因为技术实现上有挑战。但协同编辑技术本身已经发展多年，解决方案已经相对成熟，我们团队也是在刚刚结束的 Q3 里完成了基于 PingCode Wiki 编辑器协同编辑的方案落地，所以这里想结合我们的技术选型及落地实践经验谈谈我对这块技术的理解。 主要内容以协同编辑技术为主，中间也会谈谈对技术发展演进的理解。 一个场景 -------- 一个常见的场景，页面发布冲突，这个交互在我们产品中真实存在过 两个用户基于相同的文章内容进行了修改，一个用户先发布，后一个用户在发布的时候就会有这样的提醒，虽然有提示，这其实对用户来说是不友好的。 通常产品的解决方案有以下三种： 1\. 悲观锁 一个文档只能同时有一个用户在编辑 2\. 内容自动合并、冲突处理 3\. 协同编辑 第二种方案也有国外产品在做就是 Gitbook ![](https://static.de

[Evan Wallace](https://madebyevan.com/) [Twitter](https://twitter.com/evanwallace) [GitHub](https://github.com/evanw) This is an archived copy of a blog post that I wrote for the Figma company blog. The original blog post can be found [here](https://www.figma.com/blog/introducing-vector-networks/). Introducing Vector Networks = February 9, 2016 Before I co

相关问题 垃圾回收机制 回答关键点 垃圾回收 DevTools 内存泄漏是指不再使用的内存，没有被垃圾回收机制回收。当内存泄漏很大或足够频繁时，用户会有所感知：轻则影响应用性能，表现为迟缓卡顿；重则导致应用崩溃，表现为无法正常使用。为了避免内存泄漏带来的不良影响，需要对垃圾回收机制进行了解，掌握内存泄漏分析方法，完善线上相关监控措施。 内存泄漏定位和分析一般需要辅助工具，比如 Chrome DevTools。开发者可以通过 DevTools 记录页面活动概况，生成可视化分析结果，从时间轴中直观了解内存泄漏情况；利用 DevTools 获取若干次内存快照，检查内存堆栈变化；以及使用 Chrome 任务管理器，实时监控内存的使用情况。 知识点深入 1\. 排查内存泄漏常见问题 在 JavaScript 中，当一些不再需要的数据仍然可达时，V8 会认为这些数据仍在被使用，不会释放内存。为了调试内存泄漏，我们需要找到被错误保留的数据，并确保 V8 能够将其清理掉。 代码量较小时，开发者通常可以基于以下基本原则进行快速自查： 1. 是否滥...

相关问题 什么是浏览器事件循环 浏览器为什么需要事件循环 Node.js 中的事件循环 回答关键点 任务队列 异步 非阻塞 浏览器需要事件循环来协调事件、用户操作、脚本执行、渲染、网络请求等。通过事件循环，浏览器可以利用 任务队列 来管理任务，让异步事件 非阻塞 地执行。每个客户端对应的事件循环是相对独立的。 知识点深入 1\. 什么是浏览器事件循环 在计算机中，Event Loop 是一个程序结构，用于等待和发送消息和事件。 —— 维基百科 Event Loop 可以理解为一个消息分发器，通过接收和分发不同类型的消息，让执行程序的事件调度更加合理。 浏览器事件循环是以浏览器为宿主环境实现的事件调度 ，操作顺序如下： 1. 执行同步代码。 2. 执行一个任务（执行栈中没有就从任务队列中获取）。 3. 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中。 4. 任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）。 5. 当前任务执行完毕，开始检查渲染，然后渲染线程接...

相关问题 什么是内存泄漏 常见的垃圾回收算法 如何排查内存泄漏 回答关键点 引用计数法 标记清除法 Mark-Compact（标记整理） Scavenger（清道夫） GC（Garbage Collection，垃圾回收）是一种内存自动管理机制， 垃圾回收器（Garbage Collector）可以自动回收分配给程序的已经不再使用的内存。常见的 GC 算法有引用计数法和标记清除法等。V8（JavaScript 引擎，提供执行 JavaScript 的运行时环境）的垃圾回收器算法主要由 Mark-Compact 和 Scavenger 构成。 知识点深入 1\. 内存泄漏 内存泄漏是指，应当被回收的对象没有被正常回收，变成常驻老生代的对象，导致内存占用越来越高。内存泄漏会导致应用程序速度变慢、高延时、崩溃等问题。 1.1 内存生命周期 1. 分配：按需分配内存。 2. 使用：读写已分配的内存。 3. 释放：释放不再需要的内存。 1.2 内存泄漏常见原因 创建全局变量，且没有手动...

相关问题 浏览器如何渲染页面 有哪些提高浏览器渲染性能的方法 回答关键点 DOM CSSOM 脚本执行与界面渲染互斥 渲染树 Compositing GPU 加速 当浏览器进程获取到 HTML 的第一个字节开始，会通知渲染进程开始解析 HTML，将 HTML 转换成 DOM 树，并进入渲染流程。一般所有的浏览器都会经过五大步骤，分别是： 1. PARSE：解析 HTML，构建 DOM 树。 2. STYLE：为每个节点计算最终的有效样式。 3. LAYOUT：为每个节点计算位置和大小等布局信息。 4. PAINT：绘制不同的盒子，为了避免不必要的重绘，将会分成多个层进行处理。 5. COMPOSITE & RENDER：将上述不同的层合成为一张位图，发送给 GPU，渲染到屏幕上。 为了提高浏览器的渲染性能，通常的手段是保证渲染流程不被阻塞，避免不必要的绘制计算和重排重绘，利用 GPU 硬件加速等技术来提高渲染性能。 知识点深入 1\. 浏览器的渲染流程 Chromium 的渲染流程的主要步骤如下图所...

回答关键点 URL DNS TCP 渲染 浏览器从输入网址到渲染页面主要分为以下几个过程 URL 输入 DNS 解析 建立 TCP 连接 发送 HTTP / HTTPS 请求（建立 TLS 连接） 服务器响应请求 浏览器解析渲染页面 HTTP 请求结束，断开 TCP 连接 知识点深入 1\. URL 输入 URL（统一资源定位符，Uniform Resource Locator）用于定位互联网上资源，俗称网址。 我们在地址栏输入 HZFE 官方网址 hzfe.org 后敲下回车，浏览器会对输入的信息进行以下判断： 1. 检查输入的内容是否是一个合法的 URL 链接。 2. 是，则判断输入的 URL 是否完整。如果不完整，浏览器可能会对域进行猜测，补全前缀或者后缀。 3. ...

相关问题 如何提升页面渲染性能 如何减少页面重排重绘 哪些行为会引起重排/重绘 回答关键点 渲染性能 Layout Paint 浏览器渲染大致分为四个阶段，其中在解析 HTML 后，会依次进入 Layout 和 Paint 阶段。 样式或节点的更改，以及对布局信息的访问等 ，都有可能导致重排和重绘。而重排和重绘的过程在 主线程 中进行，这意味着不合理的重排重绘会导致 渲染卡顿，用户交互滞后 等性能问题。 知识点深入 1\. 什么是重排重绘 1. Parse HTML：相关引擎分别解析文档和样式表以及脚本，生成 DOM 和 CSSOM ，最终合成为 Render 树。 2. Layout：浏览器通过 Render 树中的信息，以递归的形式计算出每个节点的尺寸大小和在页面中的具体位置。 3. Pa...