随笔分类 -  前端性能优化原理与实践

关于前端性能优化这件事情，我认为它是 20% 的理论，加上至少 80% 的实践，甚至很多理论本身也都是我们在具体的业务场景中实践出来的。所以希望大家阅读本小册时，能够读到一些“书本之外的东西”——最好是一边读一边回忆自己既有的开发经历，尝试去留意哪些知识是已知的，哪些是未知的。
回流（Reflow）与重绘（Repaint）
摘要：哪些实际操作会导致回流与重绘 最“贵”的操作：改变 DOM 元素的几何属性 这个改变几乎可以说是“牵一发动全身”——当一个DOM元素的几何属性发生变化时，所有和它相关的节点（比如父子节点、兄弟节点等）的几何属性都需要进行重新计算，它会带来巨大的计算量。 常见的几何属性有 width、height、p 阅读全文
posted @ 2022-12-21 17:13 自在一方 阅读(125) 评论(0) 推荐(0)
简单 Lazy-Load 实现
摘要：首先新建一个空项目，目录结构如下： 大家可以往 images 文件夹里塞入各种各样自己喜欢的图片。 我们在 index.html 中，为这些图片预置 img 标签： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met 阅读全文
posted @ 2022-12-15 11:53 自在一方 阅读(65) 评论(0) 推荐(0)
Event Loop 与异步更新策略
摘要：Vue 和 React 都实现了异步更新策略。虽然实现的方式不尽相同，但都达到了减少 DOM 操作、避免过度渲染的目的。通过研究框架的运行机制，其设计思路将深化我们对 DOM 优化的理解，其实现手法将拓宽我们对 DOM 实践的认知。本节我们将基于 Event Loop 机制，对 Vue 的异步更新策 阅读全文
posted @ 2022-12-13 15:03 自在一方 阅读(79) 评论(0) 推荐(0)
节流和防抖的实现
摘要：节流的理解和简单实现 所谓的“节流”，是通过在一段时间内无视后来产生的回调请求来实现的。只要一位客人叫了车，司机就会为他开启计时器，一定的时间内，后面需要乘车的客人都得排队上这一辆车，谁也无法叫到更多的车。 对应到实际的交互上是一样一样的：每当用户触发了一次 scroll 事件，我们就为这个触发操作 阅读全文
posted @ 2022-11-23 15:51 自在一方 阅读(42) 评论(0) 推荐(0)
DOM 优化原理与基本实践
摘要：DOM 为什么这么慢 因为收了“过路费” 把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》 JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切是简单的、迅速的。但 DOM 操作并非 JS 一个人的独舞， 阅读全文
posted @ 2022-11-02 13:47 自在一方 阅读(98) 评论(0) 推荐(0)
浏览器背后的运行机制
摘要：浏览器渲染过程 什么是渲染过程？简单来说，渲染引擎根据 HTML 文件描述构建相应的数学模型，调用浏览器各个零部件，从而将网页资源代码转换为图像结果，这个过程就是渲染过程（如下图）。 从这个流程来看，浏览器呈现网页这个过程，宛如一个黑盒。在这个神秘的黑盒中，有许多功能模块，内核内部的实现正是这些功能 阅读全文
posted @ 2022-10-28 11:30 自在一方 阅读(210) 评论(0) 推荐(0)
服务端渲染的探索与实践
摘要：服务端渲染（SSR）近两年炒得很火热，相信各位同学对这个名词多少有所耳闻。本节我们将围绕“是什么”（服务端渲染的运行机制）、“为什么”（服务端渲染解决了什么性能问题 ）、“怎么做”（服务端渲染的应用实例与使用场景）这三个点，对服务端渲染进行探索。 服务端渲染是一个相对的概念，它的对立面是“客户端渲染 阅读全文
posted @ 2022-10-11 09:48 自在一方 阅读(106) 评论(0) 推荐(0)
CDN的缓存与回源机制解析
摘要：CDN （Content Delivery Network，即内容分发网络）指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪 些服务器与用户距离最近，来满足数据的请求。 CDN 提供快速服务，较少受高流量影响。 为什么要用 CDN 浏览器存储的相关知识此刻离我们还不 阅读全文
posted @ 2022-09-30 10:30 自在一方 阅读(613) 评论(0) 推荐(0)
本地存储——从 Cookie 到 Web Storage、IndexedDB
摘要：随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。 我认为，WebApp 就是我们前端性能优化的产物，是我们前端工程师对体验不懈追求的结果，是 Web 网页在性能上向 N 阅读全文
posted @ 2022-09-14 13:42 自在一方 阅读(95) 评论(0) 推荐(0)
浏览器缓存机制介绍与缓存策略剖析
摘要：缓存可以减少网络 IO 消耗，提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性，Chrome 官方给出的解释似乎更有说服力一些： 很多时候，大家倾向于将浏览器缓存简单地理解为“HTTP 缓存”。但事实上，浏览器缓存机制有四个方面，它们按照获取资源时请求的优先级 阅读全文
posted @ 2022-09-07 15:11 自在一方 阅读(432) 评论(0) 推荐(0)
图片优化——质量与性能的博弈
摘要：图片优化——质量与性能的博弈 就图片这块来说，与其说我们是在做“优化”，不如说我们是在做“权衡”。因为我们要做的事情，就是去压缩图片的体积（或者一开始就选取体积较小的图片格式）。但这个优化操作，是以牺牲一部分成像质量为代价的。因此我们的主要任务，是尽可能地去寻求一个质量与性能之间的平衡点。 不同业务 阅读全文
posted @ 2022-08-29 11:57 自在一方 阅读(204) 评论(0) 推荐(0)
前端性能优化原理与实践二
摘要：webpack 性能调优与 Gzip 原理 大家可以从第一节的示意图中看出，我们从输入 URL 到显示页面这个过程中，涉及到网络层面的，有三个主要过程： DNS 解析 TCP 连接 HTTP 请求/响应 HTTP 连接这一层面的优化是我们网络优化的核心。因此我们开门见山，抓主要矛盾，直接从 HTTP 阅读全文
posted @ 2022-04-18 10:11 自在一方 阅读(112) 评论(0) 推荐(0)
前端性能优化原理与实践一
摘要：一道面试题说起 从输入 URL 到页面加载完成，发生了什么？ 我们从先从前端性能优化上来分析一下这个问题 第一步：我们输入在地址会经过DNS解析，将 URL 解析为对应的 IP 地址。 第二步：客户端和对应 IP 服务端建立 TCP 链接。 第三步：客户端向服务器发送 http 请求 第四步：服务端 阅读全文
posted @ 2022-04-11 10:34 自在一方 阅读(164) 评论(0) 推荐(0)