前端性能优化
PrayerFaith-Depart
设计改变未来!
展开
-
webpack性能调优与Gzip原理
从上一章可以看出, 我们输入URL到显示页面这个过程中,涉及到的网络层面有三个主要过程:DNS解析 TCP连接 HTTP请求/响应对于DNS解析和TCP连接两个步骤,我们前端可以做的努力非常有限。相比之下, HTTP连接这一层面的优化才是我们网络优化的核心。HTTP优化有两个大的方向:减少请求次数 减少单词请求所花费的时间这两个优化点直直的指向了我们日常开发中非常常见...翻译 2019-05-27 10:27:02 · 582 阅读 · 0 评论 -
Performance、LightHouse 与性能 API
性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈,从而有的放矢地开展具体的优化工作。平时我们比较推崇的性能监测方案主要有两种:可视化方案、可编程方案。这两种方案下都有非常优秀、且触手可及的相关工具供大家选择,本节我们就一起来研究一下这些工具的用法。可视化监测:从 Performance 面板说起Performance 是 Chrome 提供给我们的开发者工具,用于记录和分...转载 2019-06-03 16:14:43 · 386 阅读 · 0 评论 -
事件的节流与防抖
// 节流函数1 function throttle (fn, interval) { // last 上次触发回调的时间 let last = 0; return function () { let context = this let args = arguments let now = +new Date() ...原创 2019-06-03 15:21:39 · 114 阅读 · 0 评论 -
首屏优化实践——lazy-load
首先新建一个空项目,目录结构如下:我们在 index.html 中,为这些图片预置 img 标签:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...原创 2019-06-03 14:22:05 · 144 阅读 · 0 评论 -
回流(Reflow)与重绘(Repaint)
回流:当我们对DOM的修改引发了DOM几何尺寸的变化(比如修改了元素的宽高或隐藏元素等)时,浏览器需要重新计算元素的几何属性(其他元素的几何属性和位置也会收到影响)然后在将计算的结果绘制出来。这个过程就是回流(也叫重排)。重绘:当我们对DOM的修改导致了样式的变化 却并未影响几何属性(比如修改了颜色或背景色)时, 浏览器不需要重新计算元素的几何属性,直接为该元素绘制新的样式(跳过了回流环节)。...翻译 2019-06-03 13:51:53 · 198 阅读 · 0 评论 -
Event Loop 与异步更新策略
Vue 和React都实现了异步更新策略。虽然实现的方式不尽相同, 但都达到了减少DOM操作 避免过度渲染的目的。通过研究框架的运行机制, 其设计思路将深化我们对DOM优化的理解, 拓宽我们对DOM实践的认知。Event LoopMicro-Task与Macro-Task事件循环中的异步队列由两种:macro(宏任务)队列和micro(微任务队列)。常见的macro-task比...翻译 2019-06-03 13:09:19 · 174 阅读 · 0 评论 -
本地存储——从 Cookie 到 Web Storage、IndexedDB
故事的开始:从 Cookie 说起Cookie 的本职工作并非本地存储,而是“维持状态”。在 Web 开发的早期,人们亟需解决的一个问题就是状态管理的问题:HTTP 协议是一个无状态协议,服务器接收客户端的请求,返回一个响应,故事到此就结束了,服务器并没有记录下关于客户端的任何信息。那么下次请求的时候,如何让服务器知道“我是我”呢?在这样的背景下,Cookie 应运而生。Cooki...翻译 2019-05-29 16:02:12 · 239 阅读 · 0 评论 -
浏览器缓存机制介绍与缓存策略剖析
缓存可以减少网络IO消耗,提高访问速度。浏览器缓存是一种操作简单,效果显著的前端性能优化手段。对于这个操作的必要性,Chrome官方给出的解释更具有说服力通过网络获取内容即速度缓慢,又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信, 这会延迟浏览器获得和处理内容的时间, 还会增加访问者的流量费用。因此,缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面很多时候,...翻译 2019-05-29 09:47:01 · 124 阅读 · 0 评论 -
DOM 优化原理
DOM 为什么这么慢因为收了“过路费”把 DOM 和 JavaScript 各自想象成一个岛屿,它们之间用收费桥梁连接。——《高性能 JavaScript》JS 是很快的,在 JS 中修改 DOM 对象也是很快的。在JS的世界里,一切是简单的、迅速的。但 DOM 操作并非 JS 一个人的独舞,而是两个模块之间的协作。JS 引擎和渲染引擎(浏览器内核)是独立实现的。当我们用 JS...翻译 2019-05-31 16:43:01 · 141 阅读 · 0 评论 -
浏览器背后的运行机制
浏览器的心浏览器的心, 说的就是浏览器的内核。在研究浏览器微观运行机制之前, 我们首先要对浏览器内核有一个宏观的把握。许多工程师因为业务需要, 免不了需要去处理不同浏览器下代码渲染结果的差异性。这些差异性正是因为浏览器内核的不同而导致的——浏览器内核决定了浏览器解释网页语法的方式。浏览器内核可以分两个部分:渲染引擎和js引擎。早期渲染引擎和JS引擎并没有十分明确的区分,但随着JS引擎越...翻译 2019-05-31 16:12:47 · 185 阅读 · 0 评论 -
服务端渲染
服务端渲染的探索与实践服务端渲染(SSR)近两年炒得很火热,相信各位同学对这个名词多少有所耳闻。本节我们将围绕“是什么”(服务端渲染的运行机制)、“为什么”(服务端渲染解决了什么性能问题 )、“怎么做”(服务端渲染的应用实例与使用场景)这三个点,对服务端渲染进行探索。服务端渲染是一个相对的概念,它的对立面是“客户端渲染”。在运行机制解析这部分,我们会借力客户端渲染的概念,来帮大家理解服务端...翻译 2019-05-31 09:38:49 · 224 阅读 · 0 评论 -
前端性能优化-知识体系
前端性能优化这件事情上, 我认为他是20%的理论, 加上至少80%的实践, 甚至很多理论本身也都是我们具体的业务场景中实践出来的。前端技术日新月异, 性能方案永远都在更迭, 所以一定要形成自己的学习思路。从一道面试题说起从输入URL到页面加载完成, 发生了什么?我们站在性能优化的角度, 一起简单的复习一遍这个经典的过程:首先我们需要通过dns域名解析系统, 将url解析为对应的...转载 2019-05-24 09:56:38 · 194 阅读 · 0 评论 -
图片优化——质量与性能的博弈
就图片这块来说, 与其说是在做优化, 不如说实在做权衡。因为我们要做的事情, 就是去压缩图片的体积。但是这个操作, 是以牺牲一部分成像质量为代价的。因此我们的主要任务, 是尽可能的去寻求一个质量与性能之间的平衡点。不同业务场景下的图片方案选型时下应用较为广泛的 Web 图片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等,这些格式都是很有故事的,值得我们好好研究一把。此...翻译 2019-05-28 14:14:21 · 1540 阅读 · 0 评论 -
CDN的缓存与回源机制解析
CDN(Content Delivery Network, 内容分发网络)指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本, 因此服务器可以根据哪些服务器与用户距离更近, 来满足数据的请求。 CDN提供快速服务, 较少受高流量影响。为什么要用CDN缓存、本地存储带来的性能提升,是不是只能在“获取到资源并把它们存起来”这件事情发生之后?也就是说,首次请求资源的时候,这些招数都...翻译 2019-05-30 11:12:47 · 7542 阅读 · 0 评论 -
Chrome Devtools Performance使用指南
运行时性能表现(runtime performance)指的是当你的页面在浏览器运行时的性能表现,而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevTools Performance功能去分析运行时性能表现。在RAIL性能评估模型下,你可以在这篇指南中可以学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标...翻译 2019-06-03 17:49:06 · 288 阅读 · 0 评论