前端性能优化原理与实践

前端性能优化原理与实践

前端性能优化原理与实践

为什么速度很重要？ 1.性能是关于留住用户 2.性能是关于提高转化率 3.性能关乎用户体验 https://web.dev/why-speed-matters/ 从网络、渲染层面从原理到实践的前端想能优化之路

等 13 人订阅共11篇文章创建于2021-10-28

JS开销和如何缩短解析时间【为什么我的JS运行慢】

1. JS开销在哪里 2. 相同大小的资源的时间开销 js 的时间开销要远大于其他资源 js 除了需要下载外，编译解析执行也要花费时间 js 会阻塞整个页面，导致慢如上图都是170KB的资源，

3年前
656
11
评论

JS开销和如何缩短解析时间【为什么我的JS运行慢】

常用性能测量APIs（关键时间节点、观察长任务、网络状态）

Web标准APIs ：关键时间节点（Navigation Timing, Resource Timing）、页面可见性的状态监听、浏览器当前网络状态

3年前
194
12
评论

常用性能测量APIs（关键时间节点、观察长任务、网络状态）

“节流”与“防抖”的本质

这两个东西都以闭包的形式存在。它们通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用 setTimeout 来控制事件的触发频率。 1. Throttle：第一个人说了算 th

3年前
997
38
评论

性能检测—Performance、LightHouse 与性能 API

平时我们比较推崇的性能监测方案主要有两种：可视化方案、可编程方案 1. 可视化监测：从 Performance 面板说起 Performance 是 Chrome 提供给我们的开发者工具用于记录和分

3年前
1.5k
30
评论

性能检测—Performance、LightHouse 与性能 API

关于性能优化需要知道的——重排和重绘

当浏览器下载完页面所需元素（html标记，css层叠样式表，javascript，图片）之后，会生成两个东西：Dom树和渲染树。 1. 重排（重新排列 reflow）当页面的布局和几何属性发生改变的

3年前
1.1k
32
评论

关于性能优化需要知道的——重排和重绘

DOM优化原理与基本实践

1. 望闻问切：DOM 为什么这么慢 1.1 因为收了“过路费” JS 引擎和渲染引擎（浏览器内核）是独立实现的。当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流

3年前
886
30
评论

前端本地存储--从Cookie到Web Storage、IndexedDB

1 故事的开始：从 Cookie 说起 Cookie 的本职工作并非本地存储，而是“维持状态”。在 Web 开发的早期，人们亟需解决的一个问题就是状态管理的问题：HTTP 协议是一个无状态协议，服务

3年前
1.0k
33
2

前端本地存储--从Cookie到Web Storage、IndexedDB

解锁浏览器背后的运行机制

1. 开启浏览器渲染“黑盒” 1.1 什么是渲染过程？简单来说，渲染引擎根据 HTML 文件描述构建相应的数学模型，调用浏览器各个零部件，从而将网页资源代码转换为图像结果，这个过程就是渲染过程。从

3年前
915
32
评论

CDN的缓存与回源机制解析

1. CDN是什么？ CDN （Content Delivery Network，即内容分发网络）指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最

3年前
3.7k
51
3

图片格式优化——多种图片格式，哪种最合适

图片优化方案选择合适的格式大小要适当适配不同屏幕压缩图片优化处理关键图像懒加载图片压缩图片的方案压缩图片的仓库 https://github.com/imagemin/imagemin

3年前
854
47
评论

图片格式优化——多种图片格式，哪种最合适

图片加载优化——突破大型网站图片加载的瓶颈

1. 图片的懒加载 1.1 原生的图片的懒加载方案 1.2 第三方图片的懒加载方案 1. verlok/lazyload 2. yall.js 一个快速、灵活、小巧的 SEO 友好的懒加载器。 3.

3年前
2.0k
52
评论

图片加载优化——突破大型网站图片加载的瓶颈