![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端性能优化
最恨不过不努力
喜欢健身和安静的思考
展开
-
webpack 性能调优与 Gzip 原理
从本节开始,我们进入网络层面的性能优化世界。大家可以从第一节的示意图中看出,我们从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程:DNS 解析TCP 连接HTTP 请求/响应对于 DNS 解析和 TCP 连接两个步骤,我们前端可以做的努力非常有限。相比之下,HTTP 连接这一层面的优化才是我们网络优化的核心。因此我们开门见山,抓主要矛盾,直接从 HTTP 开始讲...转载 2018-12-27 10:36:04 · 12830 阅读 · 2 评论 -
CDN 的缓存与回源机制解析
CDN的缓存与回源机制解析CDN (Content Delivery Network,即内容分发网络)指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本,因此服务器可以根据哪些服务器与用户距离最近,来满足数据的请求。 CDN 提供快速服务,较少受高流量影响。为什么要用 CDN浏览器存储的相关知识此刻离我们还不太远,大家趁热回忆一下:缓存、本地存储带来的性能提升,是不是只能在“...转载 2019-01-12 18:35:18 · 20119 阅读 · 5 评论 -
服务端渲染的探索与实践
服务端渲染的探索与实践服务端渲染(SSR)近两年炒得很火热,相信各位同学对这个名词多少有所耳闻。本节我们将围绕“是什么”(服务端渲染的运行机制)、“为什么”(服务端渲染解决了什么性能问题 )、“怎么做”(服务端渲染的应用实例与使用场景)这三个点,对服务端渲染进行探索。服务端渲染是一个相对的概念,它的对立面是“客户端渲染”。在运行机制解析这部分,我们会借力客户端渲染的概念,来帮大家理解服务端渲染...转载 2019-01-12 18:47:09 · 1419 阅读 · 0 评论 -
浏览器背后的运行机制
浏览器背后的运行机制从本章开始,我们的性能优化探险也正式进入到了“深水区”——浏览器端的性能优化。平时我们几乎每天都在和浏览器打交道,在一些兼容任务比较繁重的团队里,苦逼的前端攻城师们甚至为了兼容各个浏览器而不断地去测试和调试,还要在脑子中记下各种遇到的 BUG 及解决方案。即便如此,我们好像并没有去主动地关注和了解下浏览器的工作原理。我想如果我们对此做一点了解,在项目过程中就可以有效地避免...原创 2019-01-12 19:02:41 · 4952 阅读 · 3 评论 -
DOM 优化原理与基本实践
DOM 优化原理与基本实践从本节开始,我们要关心的两大核心问题就是:“DOM 为什么这么慢”以及“如何使 DOM 变快”。后者是一个比“生存还是毁灭”更加经典的问题。不仅我们为它“肝肠寸断”,许多优秀前端框架的作者大大们也曾为其绞尽脑汁。这一点可喜可贺——研究的人越多,产出优秀实践的概率就越大。因此在本章的方法论环节,我们不仅会根据 DOM 特性及渲染原理为大家讲解基本的优化思路,还会涉及到一...转载 2019-01-12 19:10:38 · 1748 阅读 · 2 评论 -
Event Loop 与异步更新策略
Event Loop 与异步更新策略Vue 和 React 都实现了异步更新策略。虽然实现的方式不尽相同,但都达到了减少 DOM 操作、避免过度渲染的目的。通过研究框架的运行机制,其设计思路将深化我们对 DOM 优化的理解,其实现手法将拓宽我们对 DOM 实践的认知。本节我们将基于 Event Loop 机制,对 Vue 的异步更新策略作探讨。前置知识:Event Loop 中的“渲染时机”...转载 2019-01-12 19:19:46 · 1226 阅读 · 0 评论 -
回流(Reflow)与重绘(Repaint)
回流(Reflow)与重绘(Repaint)开篇我们先对上上节介绍的回流与重绘的基础知识做个复习(跳读的同学请自觉回到上上节补齐 →_→)。回流:当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性(其他元素的几何属性和位置也会因此受到影响),然后再将计算的结果绘制出来。这个过程就是回流(也叫重排)。重绘:当我们对 D...翻译 2019-01-12 19:28:14 · 7031 阅读 · 1 评论