首页  思维导图  详情

性能

2020-04-16 11:08:33   0  举报





AI智能生成

为你推荐

查看更多



前端性能知识总结

性能

CRP

浏览器工作原理

前端面试

作者其他创作

大纲/内容

性能

性能基础

性能是什么

核心性能指标

Responsiveness

Responsiveness simply means how fast the system provides outputs (possibly multiple ones) in response to user inputs.

Frame-rate

Framerate is the rate at which the system changes pixels displayed to the user.

Humans usually cannot perceive differences in frame-rate above 60Hz. That's why most modern electronic displays are designed to refresh at that rate.

Memory usage

Power usage

how Firefox/Gecko contributes to performance\"What does the platform do for you?\"

Web technologies

Gecko rendering

The Gecko JavaScript engine supports just-in-time (JIT) compilation. This enables application logic to perform comparably to other virtual machines — such as Java virtual machines — and in some cases even close to \"native code\

应用性能

Startup performance

三个用户可见事件

key to fast startup

减少请求等待时间

预请求

合理设置缓存

帧率

font color=\"#0076b3\

Memory and power usage

具体编码建议

Use CSS animations and transitions

Use CSS transforms

Use requestAnimationFrame() instead of setInterval()

Make events immediate

Keep your interface simple

浏览器如何工作

概述

性能面临的两个问题

延迟

浏览器的单线程

1. 与Web 服务器建立连接（这个流程里没有讲关闭连接）

1.1 DNS Lookup

1.2 TCP Handshake

三次握手

SYN

SYNchronize

SYN-ACK

SYNchronize-ACKnowledgement

The server receives the SYN and sends back a SYNchronize-ACKnowledgement.

ACK

ACKnowledge

The host receives the server's SYN-ACK and sends an ACKnowledge. The server receives ACK and the TCP socket connection is established.

1.3 TLS Negotiation

图示总结

After thefont color=\"#0076b3\

2. 请求与响应

TCP Slow Start / 14kb rule

Congestion control

3. 解析

HTML 解释器将 HTML 文档解析为 DOM 树

processing the HTML markup and building the DOM tree

不会导致暂停HTML解析的资源

an imagea CSS file

导致暂停HTML解析的资源

非异步的 <script> 标签

Preload scanner

CSS 解释器将 CSS解析为 CSSOM

the total time to create the CSSOM is generally less than the time it takes for one DNS lookup.

Other Processes

JavaScript Compilation

Building the Accessibility Tree

4. 渲染

combining the DOM and CSSOM into a render tree

The third step in the critical rendering path is font color=\"#924517\

Layout

The fourth step in the critical rending path is font color=\"#924517\

Paint

The last step in the critical rendering path isfont color=\"#924517\

Compositing

5. Interactivity

回流与重绘

回流

当 render tree 的部分(或全部) 因为元素的规模尺寸、布局，隐藏等改变而需要重新构建，这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。回流必将引起重绘，而重绘不一定会引起回流。

重绘

当 render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不影响布局，比如 background-color，则就叫称为重绘。

回流何时发生

当页面布局和元素几何属性改变时就需要回流。页面渲染初始化增加或删除可见的DOM元素元素位置改变元素尺寸改变，边距、填充、边框、宽度和高度元素内容改变导致尺寸变化，比如文本改变或者图片大小改变而引起的计算值宽度和高度改变页面窗口发生变化，也就是resize时

浏览器的回流与重绘队列

浏览器会维护一个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会 flush 队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

强制浏览器提前 flush 队列的代码导致浏览器同步计算 style 与 layou 的 JS 代码

Element

盒子宽高相关属性或方法

getClientRects vs getBoundingClientRect

Element.getClientRects()

返回一个指向客户端中每一个盒子的边界矩形的矩形集合。

lement.getBoundingClientRect()

返回元素的大小及其相对于视口的位置。

请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列，因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，浏览器都会强行刷新渲染队列。

滚动相关

focus()

elem.focus() can trigger a double forced layout

window.getComputedStyle()

window

表单

Mouse events

Range

contenteditable

如何减少回流、重绘

批量修改 css

直接改变className，如果动态改变样式，则使用 cssText 合并 css 修改：// 不好的写法var left = 1;var top = 1;el.style.left = left + \"px\";el.style.top = top + \"px\";// 比较好的写法el.className += \" className1\"; // 比较好的写法el.style.cssText += \"left: \" + left + \"px; top: \" + top + \"px;\";

批量修改 dom 元素，让要操作的元素进行”离线处理”，处理完后一起更新

减少访问会引起浏览器flush队列的属性，如果确实要访问，利用缓存

让元素脱离文档流，减少回流的 Render Tree的规模

Perceived performance

Relevant measurements

first meaningful paint (FMP)

when content appears on the screen that is actually meaningful;

largest contentful paint (LCP)

time to interactive (TTI)

render start

DOM interactive

speed index

it measures the average time for pixels on the visible screen to be painted.

Improving perceived performance

Minimize initial load

Prevent jumping content and other reflows

Avoid font file delays

Make fallback fonts the same size and weight so that when fonts load the page change is less noticeable.

Interactive elements are interactive

Make task initiators appear more interactive

最佳实践

优化首屏渲染路径

链接类型

preconnect

向浏览器提供提示，建议浏览器提前打开链接网站的连接，而不会泄露任何私人信息或下载任何内容，以便在跟随链接时可以更快地获取链接内容。

dns-prefetch

提示浏览器该资源是被需要的。允许浏览器在用户点击链接之前进行DNS查询和协议握手。

prefetch

提示浏览器提前加载链接的资源，因为它可能会被用户请求。从Firefox 44开始，考虑了crossorigin属性的值，从而可以进行匿名预取。注意：Link Prefetch FAQ详细说明了可以预取的链接以及替代方法。

preload

告诉浏览器下载资源，因为在当前导航期间稍后将需要该资源。

压缩资源

减少请求

只加载当前页面需要的资源

在你的服务器（或者CDN）上使用 HTTP/2协议

HTTP2 的性能优点

并行的请求能在同一个链接中处理，移除了HTTP/1.x中顺序和阻塞的约束。压缩了headers。因为headers在一系列请求中常常是相似的，这样移除了重复和传输重复数据的成本。

使用CDN托管静态资源

速效方案

CSS

Llinking CSS with a tradional link tag with rel=\"stylesheet\" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.font color=\"#0076b3\

网页字体

EOT and TTF formats are not compressed by default. Apply compression such as GZIP or Brotli for these file types. Use WOFF and WOFF2. These formats have compression built in.Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize font weight to match the web font as closely as possible.

Icon web fonts

If possible avoid icon web fonts and use compressed SVGs. (为啥要避免使用字体图标而使用 svg 文档里没说，以后需要了解了再研究)To further optimize inline your SVG data within HTML markup to avoid HTTP requests.

关键渲染路径(首屏/必要元素渲染路径)Critical rendering path

CRP 总述

CRP 简介

font color=\"#c41230\

critical - absolutely needed ( initial view )render - display or show (in our case our webpages are \"rendered\" when they can be seen by a user)path - the chain of events that lead to our webpage being displayed in a browserinitial view - also known as \"above the fold\

DOM / CSSOM / Render Tree / Layout / Paint 的相互关系

优化 CRP 的意义

CRP 流程 / PATH

DOM / CSSOM / Render Tree / Layout /Paint 详细介绍

Document Object Model

CSS Object Model

The DOM contains all the content of the page. The CSSOM contains all the styles of the page; information on how to style that DOM.

media queries 部分可查看 css 脑图：

Render Tree

The render tree captures both the content and the styles:font color=\"#16884a\

Optimizing for CRP

Performance tips

减少首屏 http 请求

Images

1.Only show those one or two which are in the initial view. The rest can be deferred or lazy loaded.2.Base 64 encoded the logo and the first image

defer images

A deferred image is downloaded after the initial page loadImages not initially visible on a page (below the fold) can be deferred allowing what is visible to load faster

Deferring images without lazy loading or jQuery

The truth is that font color=\"#c41230\

the deferring images part

html

<img src=\

function init() { let imgDefer = document.getElementsByTagName(\"img\"); for (let i = 0; i < imgDefer.length; i++) { let curImg = imgDefer[i]; let curDataSrc = curImg.getAttribute(\"data-src\"); if (curDataSrc) { curImg.setAttribute(\"src\

Javascript files

CSS files

By combining some of your external CSS files you can reduce the amount of files needed to download. You can also inline some of your CSS into your html.

减小请求资源体积

设置 cache-control，expires，以及 E-tag 都是不错的。不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号

使用 CDN

CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间

参考文章

https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path

https://varvy.com/pagespeed/critical-render-path.html

https://juejin.im/post/5b88ddca6fb9a019c7717096

常考知识点

js 的 async 与 defer attribute

async

defer

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.This attribute allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse. async has a similar effect in this case.

async 是 HTML5 规范的新特性，优先级比 defer 高。部分不支持 async 的低版本浏览器会将其降级为 defer。

浏览器在解析 HTML 文档时，不论 <script> 标签是否有 defer 或 async 属性，均会立即下载其 src 指定的 JS 文件。有 async 或者 defer 属性的标签，JS 文件的下载过程均不会阻塞 HTML 文档的解析和渲染。

async 和 defer 的区别在 JS 文件的执行时机上

工作原理与 JS 异步逻辑类似，即“异步下载，同步执行”。下载完成后立即执行，b style=\

执行是无序的

在文档完成解析后，触发 DOMContentLoaded 事件前执行。所以这里 defer 的意思是延迟 JS 的执行时机。

执行顺序和 <script> 标签在HTML文档中的顺序保持一致

async 和 defer 的应用场景

对于需要与 HTML 文档同步加载并且对执行顺序敏感的 JS 文件而言，为其 <script> 标签添加 defer 属性并且置于 <head> 中可以提前触发 JS 文件的下载，充分发挥浏览器并行请求的优势。

适用于按需加载、逻辑独立的异步 JS 模块（事实上，对于动态创建的 <script> 标签，其 async 属性默认为 true）。

CDN

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。