![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
性能与优化
文章平均质量分 86
乐夫天命兮
一名默默无闻欺负键盘的人,坚持做我自己!!!!
展开
-
前端性能优化认知
通常来讲,前端性能优化是指:从用户开始访问网站到整个页面完整地展现出来的过程中,通过各种优化策略和优化方法,让页面加载得更快,让用户的操作相应更及时,给用户更好的使用体验。优化是在做什么:客户端和服务器端建立连接、加载资源、解析资源并渲染。[译]JavaScript 的时间消耗。...原创 2022-08-03 11:24:11 · 2391 阅读 · 0 评论 -
代码review
代码日常review原创 2022-07-07 14:47:09 · 462 阅读 · 0 评论 -
页面渲染性能优化
浏览器渲染过程浏览器解析 HTML,生成 DOM Tree(Parse HTML)。浏览器解析 CSS,生成 CSSOM(CSS Object Model)Tree。JavaScript 会通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree,浏览器将 DOM Tree 和 CSSOM Tree 合成渲染树(Render Tree)。布局(Layout):根据生成的 Render Tree,进行回流,以计算每个节点的几何信息(位置、原创 2021-09-09 09:49:02 · 630 阅读 · 1 评论 -
静态资源优化
图片格式和应用场景JPEG 格式JPEG(Joint Photographic Experts Group)是一种针对彩色照片而广泛使用的有损压缩图形格式,属于位图。常用文件扩展名为.jpg,也有 .jpeg和.jpe。JPEG 在互联网上常被应用于存储和传输照片。适合:颜色丰富的照片、彩色图大焦点图、通栏 banner 图;结构不规则的图形。不适合:线条图形和文字、图标图形,因为它的压缩算法不太这些类型的图形;并且不支持透明度。PNG 格式PNG(Portable Network原创 2021-09-09 09:48:05 · 782 阅读 · 0 评论 -
浏览器渲染机制
前言渲染机制包括的内容:什么是DOCTYPE及作用浏览器渲染过程。面试经常会问:在浏览器中输入url,发生了哪些事情。其中有一部就是浏览器的渲染过程。Reflow:重排。面试官问完了渲染机制,一般会紧接着问重排Reflow,你可千万别说你没听过。Repaint:重绘Layout:布局。这里的Layout指的是浏览器的Layout。什么是DOCTYPE及作用定义DTD(Document Type Definition):文档类型定义。是一系列的语法规则,用来定义XM原创 2021-09-06 14:09:25 · 114 阅读 · 0 评论 -
前端性能分析工具和指标
性能指标和优化目标之:加载性能指标:我们在性能优化过程中可以参考的标准。这些标准都是业界或者前人总结出来的指导性经验。我们可以参考这些指标,去指导我们自己的优化。打开网站的初体验我们以淘宝网站为例,按下F12打开浏览器的调试模式。上图中,鼠标右键点击“刷新”图标(或者鼠标长按刷新图标,松开鼠标后),会弹出三个选项,我们选择最后一个选项“清空缓存并硬性重新加载”。补充:这三个选项都是在调试模式下(按下F12弹出调试面板)才会出现的。浏览器的DevTools初印象:上图中,打开 chrome原创 2021-09-06 10:34:59 · 140 阅读 · 0 评论 -
页面性能优化
前言提升页面性能优化的方法有哪些:1、资源压缩合并,减少http请求2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别如果回答出非核心代码异步加载,就会层层深入。3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理缓存是所有性能优化的方式中最重要的一步,这个一定要答好。【重要】有的人可能会回答local storage 和session storage,其实不是这个。浏览器缓存和存储不是一回事。4、使用CDN浏览器第原创 2021-09-06 10:23:26 · 923 阅读 · 0 评论 -
前端错误监控
前言错误监控包含的内容是:前端错误的分类每种错误的捕获方式上报错误的基本原理面试时,可能有两种问法:如何监测 js 错误?(开门见山的方式)如何保证产品质量?(其实问的也是错误监控)前端错误的分类包括两种:即时运行错误(代码错误)资源加载错误每种错误的捕获方式即时运行错误的捕获方式方式1:try … catch。这种方式要部署在代码中。方式2:window.onerror函数。这个函数是全局的。 window.onerror = fu原创 2021-09-06 10:20:36 · 321 阅读 · 0 评论 -
应用篇一:优化首屏体验——Lazy-Load 初探
优化首屏体验——Lazy-Load 初探首先要告诉大家的是,截止到上个章节,我们需要大家绞尽脑汁去理解的“硬核”操作基本告一段落了。从本节开始,我们会一起去实现一些必知必会、同时难度不大的常用优化手段。这部分内容不难,但很关键。尤其是近期有校招或跳槽需求的同学,还请务必对这部分内容多加留心,说不定下一次的面试题里就有它们的身影。Lazy-Load 初相见Lazy-Load,翻译过来是“懒加载”。它是针对图片加载时机的优化:在一些图片量比较大的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果原创 2020-10-10 08:35:19 · 261 阅读 · 0 评论 -
应用篇二:事件的节流(throttle)与防抖(debounce)
事件的节流(throttle)与防抖(debounce)上一节我们一起通过监听滚动事件,实现了各大网站喜闻乐见的懒加载效果。但我们提到,scroll 事件是一个非常容易被反复触发的事件。其实不止 scroll 事件,resize 事件、鼠标事件(比如 mousemove、mouseover 等)、键盘事件(keyup、keydown 等)都存在被频繁触发的风险。频繁触发回调导致的大量计算会引发页面的抖动甚至卡顿。为了规避这种情况,我们需要一些手段来控制事件被触发的频率。就是在这样的背景下,throttl原创 2020-09-27 08:45:03 · 681 阅读 · 0 评论 -
渲染篇五:最后一击——回流(Reflow)与重绘(Repaint)
最后一击——回流(Reflow)与重绘(Repaint)开篇我们先对上上节介绍的回流与重绘的基础知识做个复习(跳读的同学请自觉回到上上节补齐 →_→)。回流:当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性(其他元素的几何属性和位置也会因此受到影响),然后再将计算的结果绘制出来。这个过程就是回流(也叫重排)。重绘:当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性(比如修改了颜色或背景色)时,浏览器不需重新计算元原创 2020-09-26 20:08:17 · 338 阅读 · 0 评论 -
渲染篇四:千方百计——Event Loop 与异步更新策略
千方百计——Event Loop 与异步更新策略Vue 和 React 都实现了异步更新策略。虽然实现的方式不尽相同,但都达到了减少 DOM 操作、避免过度渲染的目的。通过研究框架的运行机制,其设计思路将深化我们对 DOM 优化的理解,其实现手法将拓宽我们对 DOM 实践的认知。本节我们将基于 Event Loop 机制,对 Vue 的异步更新策略作探讨。前置知识:Event Loop 中的“渲染时机”搞懂 Event Loop,是理解 Vue 对 DOM 操作优化的第一步。Micro-Task原创 2020-09-26 20:07:44 · 200 阅读 · 0 评论 -
渲染篇三:对症下药—— DOM 优化原理与基本实践
对症下药—— DOM 优化原理与基本实践从本节开始,我们要关心的两大核心问题就是:“DOM 为什么这么慢”以及“如何使 DOM 变快”。后者是一个比“生存还是毁灭”更加经典的问题。不仅我们为它“肝肠寸断”,许多优秀前端框架的作者大大们也曾为其绞尽脑汁。这一点可喜可贺——研究的人越多,产出优秀实践的概率就越大。因此在本章的方法论环节,我们不仅会根据 DOM 特性及渲染原理为大家讲解基本的优化思路,还会涉及到一部分生产实践。循着这个思路,我们把 DOM 优化这块划分为三个小专题:“DOM 优化思路”、“异原创 2020-09-26 20:07:00 · 262 阅读 · 0 评论 -
渲染篇二:知己知彼——解锁浏览器背后的运行机制
知己知彼——解锁浏览器背后的运行机制从本章开始,我们的性能优化探险也正式进入到了“深水区”——浏览器端的性能优化。平时我们几乎每天都在和浏览器打交道,在一些兼容任务比较繁重的团队里,苦逼的前端攻城师们甚至为了兼容各个浏览器而不断地去测试和调试,还要在脑子中记下各种遇到的 BUG 及解决方案。即便如此,我们好像并没有去主动地关注和了解下浏览器的工作原理。我想如果我们对此做一点了解,在项目过程中就可以有效地避免一些问题,并对页面性能做出相应的改进。“知己知彼,百战不殆”,今天,我们就一起来揭开浏览器渲染过原创 2020-09-26 20:06:13 · 143 阅读 · 0 评论 -
渲染篇一:服务端渲染的探索与实践
服务端渲染的探索与实践服务端渲染(SSR)近两年炒得很火热,相信各位同学对这个名词多少有所耳闻。本节我们将围绕“是什么”(服务端渲染的运行机制)、“为什么”(服务端渲染解决了什么性能问题 )、“怎么做”(服务端渲染的应用实例与使用场景)这三个点,对服务端渲染进行探索。服务端渲染是一个相对的概念,它的对立面是“客户端渲染”。在运行机制解析这部分,我们会借力客户端渲染的概念,来帮大家理解服务端渲染的工作方式。基于对工作方式的了解,再去深挖它的原理与优势。任何知识点都不是“一座孤岛”,服务端渲染的实践往往与原创 2020-09-26 20:05:32 · 194 阅读 · 0 评论 -
本地存储——从 Cookie 到 Web Storage、IndexDB
本地存储——从 Cookie 到 Web Storage、IndexDB随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑“WebApp”——它即开即用,用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。我认为,WebApp 就是我们前端性能优化的产物,是我们前端工程师对体验不懈追求的结果,是 Web 网页在性能上向 Native 应用的一次“宣战”。WebApp 优异的性能表现,要归功于浏览器存储技术的广泛应用——这其中除了我们上节提到的缓存,本地存储原创 2020-09-26 20:04:35 · 272 阅读 · 0 评论 -
浏览器缓存机制介绍与缓存策略剖析
浏览器缓存机制介绍与缓存策略剖析缓存可以减少网络 IO 消耗,提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性,Chrome 官方给出的解释似乎更有说服力一些:通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信,这会延迟浏览器获得和处理内容的时间,还会增加访问者的流量费用。因此,缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。很多时候,大家倾向于将浏览器缓存简单地理解为“HTTP 缓存”。但事实上,浏览器缓原创 2020-09-26 20:03:48 · 227 阅读 · 0 评论 -
性能监测之Performance、LightHouse 与性能 API
Performance、LightHouse 与性能 API性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈,从而有的放矢地开展具体的优化工作。平时我们比较推崇的性能监测方案主要有两种:可视化方案、可编程方案。这两种方案下都有非常优秀、且触手可及的相关工具供大家选择,本节我们就一起来研究一下这些工具的用法。可视化监测:从 Performance 面板说起Performance 是 Chrome 提供给我们的开发者工具,用于记录和分析我们的应用在运行时的所有活动。它呈现的数据具有实时性、原创 2020-09-26 20:01:53 · 1898 阅读 · 0 评论 -
前端优化之一webpack 性能调优与 Gzip 原理
webpack 性能调优与 Gzip 原理从本节开始,我们进入网络层面的性能优化世界。大家可以从第一节的示意图中看出,我们从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程:DNS 解析TCP 连接HTTP 请求/响应对于 DNS 解析和 TCP 连接两个步骤,我们前端可以做的努力非常有限。相比之下,HTTP 连接这一层面的优化才是我们网络优化的核心。因此我们开门见山,抓主要矛盾,直接从 HTTP 开始讲起。HTTP 优化有两个大的方向:减少请求次数减少单次请求所原创 2020-09-26 19:58:09 · 789 阅读 · 0 评论 -
前端优化之二 图片优化——质量与性能的博弈
图片优化——质量与性能的博弈《高性能网站建设指南》的作者 Steve Souders 曾在 2013 年的一篇 博客 中提到:我的大部分性能优化工作都集中在 JavaScript 和 CSS 上,从早期的 Move Scripts to the Bottom 和 Put Stylesheets at the Top 规则。为了强调这些规则的重要性,我甚至说过,“JS 和 CSS 是页面上最重要的部分”。几个月后,我意识到这是错误的。图片才是页面上最重要的部分。我关注 JS 和 CSS 的重点也是如原创 2020-09-26 20:00:09 · 3992 阅读 · 0 评论