快速了解前端性能优化
source link: https://zhuanlan.zhihu.com/p/143948772
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
快速了解前端性能优化
在前端开发的过程中，很多时候除了日常的需求开发以外，我们还需要对我们的页面进行性能优化，那么这次就分享一下前端开发我能想到的一些优化方案进行总结。
前端性能优化是什么？
有很多小伙伴无论是日常遇到优化需求或者面试的时候被问到性能优化，往往并没有很好的完整分析出性能瓶颈在那里。面试过程中，很多时候并没有能很系统的去回答完整前端的性能优化的方案。
什么是前端性能优化呢？我会分为以下两大部分：
性能优化如何分析
在对页面进行优化前，必须搞清楚到底需要优化的点在那里，是首屏加载很慢？资源加载慢？等等。那么我们需要如何分析一个页面需要如何优化呢？
首先我们必须要搞清楚你当前是优化首屏慢（白屏时间长），可交互时间长，在现在的前端开发中，往往我们通过performance来查看页面的onload时间或者domReady时间其实并不可靠。举个例子，我们一般现在开发已经越来越多使用React或者Vue这一类框架进行开发，那么我们的页面渲染大量依赖数据，那么获取数据的时候长短就显得很重要。所以会发现使用了React或者Vue的页面，在不做任何优化的情况下，白屏的时间往往会比以前是jq或者直接后端套模板输出html要慢得多。
回到问题上，如果去分析优化的方向呢？如果你是白屏优化，那么就要看html的加载时间以及domReady时间，找到导致domReady时间长的原因是哪里？如果你是要考虑可交互时间的优化，那么就需要定位页面渲染可交互元素的逻辑，如何将交互组件尽可能提前渲染。下面将会详细说说各种优化的点和方式。
渲染性能优化往往更多是解决白屏的问题，如果白屏时间减少，那么可交互时间也会减少！
这是一张浏览器解析html，css的流程图。
- 解析html标签
- 遇到style同步解析，但不会阻塞解析，但是会阻塞渲染
- 遇到css同步加载，但不会阻塞解析，但是会阻塞渲染
- 遇到img会同步加载，但是不会阻塞解析和渲染
- 遇到js，默认同步加载，并阻塞渲染，运行完js后才继续渲染
- 最后html标签渲染完，触发domReady
HTML优化：
- HTML优化主要体验在减少不必要的html标签数量，例如注释，这样能减少浏览器请求获取document文件时的体积大小。（建议所谈，减少不了多少东西，如果使用React或者Vue，基本可以无视）。
- 服务器使用gzip压缩html体积。
CSS优化：
css的有一个特点，就是浏览器遇到style或者css标签的时候，因为dom树和css树的构建是同步构建的，所以加载css或者解析style并不会阻塞dom的解释。但是因为最终的渲染树是需要dom树和css树结果得出的，所以css和style的加载和解析是会阻塞dom的渲染的。
- 减少css体积（gzip，webpack混淆）。
- 减少css的元素。
- 减少使用加长css解释时间的属性，例如：媒体查询、css表达式等。
JavaScript优化：
JavaScript的加载是会阻塞dom的解析和渲染的，因为js的解析线程是和ui渲染的线程公用，导致解释js时，所有渲染都必须停下，等待js的加载和执行完毕后才能继续对页面进行解释和渲染。
- 减少js体积（gzip，webpack混淆）。
- 如果js不必等待html完全解释和渲染完成才能执行的话，可以使用script标签的async属性。让js的加载不会阻塞dom的解释，但是下载完成后将会立马执行js，还是会阻塞解释和渲染，只是将阻塞延后到js加载完毕后才出发而已。
- 可以使用script标签的defer属性，让js的加载不会阻塞dom的解释，但是js的运行时机会在html解析完后再进行执行。
总结
一般比较好的处理方式是将css放在head进行加载，将js尽可能靠近html底部进行加载。当然也有例外，例如计算rem的js，可能需要尽可能的内联在css加载之前，在解析css之前将rem的单位计算好。或者一些收集统计的代码，尽可能内联在html的最开始。
因为html的渲染，是需要解析完dom树和css树，最终合成渲染树才能呈现画面在屏幕上，中间遇到的外部资源或者内联资源都会存在不同程度的影响渲染树的完成时间。所以总体来说就是如何让渲染树尽可能的快完成，这也是优化关键渲染路径的核心思想。
渲染优化基本上就是对不同资源不同的作用调整位置，或者添加属性让一些本来影响解析的操作尽可能延后或者同步。但是加载优化会比渲染优化复杂得多，我主要会分成两种加载优化：
- 资源加载优化
资源加载优化
资源加载优化一般的优化方案如下：
- js资源利用webpack进行拆分，尽可能的利用浏览器提供的并发加载来加速资源的加载速度。
- 对框架（React或者Vue等等）的runtime代码抽离，利用浏览器缓存对比较大的框架文件进行缓存，提高框架的runtime.js的加载速度。
- 对公用js文件，如swiper，axios等常用工具库进行拆分，理由同上。
- 异步加载非首屏或可视范围外的组件，利用webpack的异步加载或者利用框架自带的一些工具进行组件抽离，尽可能减少首屏加载时的业务代码体积。
- 对于图片资源应该使用懒加载的方式进行渲染，而且为了节省带宽，应该将图片放到首屏出来后再开始进行加载。
- 可以使用preload对本页资源进行预加载，例如字体文件，可以让css使用的字体可以提前进行加载。
- 可以使用prefetch对之后其他页面可能用到的资源进行预加载。优先级会比preload低。
- DNS 预解析 dns-prefetch，对一些常用的域名进行预解析，提高dns的速度。
网络优化
网络优化一般需要协同后端或者运维人员进行解决，但是作为前端，我们可以发现问题，并且提出解决的方式，优化的方案如下：
- 静态资源上cdn。
- 接口拆分，对首屏用到的接口进行拆分。
- 后端返回html时间优化。
- 对资源按需处理过期时间，对于长久的资源使用超长过期时间，并通过webpack构建出带有文件md5的文件名，对文件进行强制更新。
- 启用http2.0，使用多路复用，提高并发请求中的tcp重复握手问题。
运行优化是指对于JavaScript代码的运行速度优化，这个网上也有很多资料，我就举一些常规优化。
- 慎用定时器，用完记得清除
- 虚拟滚动，长列表优化
- 图片按需加载
- 减少阻塞线程操作，例如数据量大的循环，频繁的事件响应（节流，防抖）
前端的性能优化并不能说有一套万能的方案，上面所说到的仅仅只是我日常开发过程中，使用过的一些性能优化的方案总结，多种方案可以搭配使用，但是还是需要根据每个公司不同团队，以及页面的性质做优化的完整方案。例如能不能用SSR进行渲染Vue或者React的页面，能不能让App中对html的加载做拦截，实现本地html的超级缓存等操作。具体问题需要具体分析。希望还有优化的骚操作进行补充。
Recommend
-
141
关于前端的性能优化，每次提到这个词大家都有很多idea。现在静下来思考下我们用到的各种手段最终可以归纳为三步 一，关键资源字节数 字节数也就是我通常说的减少资源文件（js,css,image,video...）的大小 1，压缩 前端使用uglify混淆压缩
-
145
上篇文章介绍了桌面浏览器的优化策略,相对于桌面浏览器，移动端 Web 浏览器上有一些较为明显的特点：设备屏幕小、新特性兼容性比较好、支持一些较新的 HTML5 和 CSS3 特性、需要与 native 应用交互等。但移动端浏览器可用的 CPU 计算资源和网络资
-
75
缓存一直以来都是用来提高性能的一项必不可少的技术 ， 利用这项技术可以很好地提高web的性能。 缓存可以很有效地降低网络的时延，同时也会减少大量请求对于服务器的压力。 接下来这篇文章将会详细地介绍在web领域中缓存的一些知识点和应用。 从HTTP协议开始说起
-
7
分享人：Mark Wu（ 吴银波 ）云智慧前端工程师，致力于云智慧大屏产品及ITSM、DOMM、DOEM等产品线定制化开发，拥有丰富的前端性能优化和开源项目经验。 背景介绍： 不知...
-
7
.NET性能优化-快速遍历List集合 Sys...
-
5
从本文中，我将从`是什么`，`为什么`，`怎么做`来为大家阐述 NextJS 以及如何优化 NextJS 应用体验。从本文中，我将从是什么，为什么，怎么做来为大家阐述 NextJS 以及如何优化 NextJS 应用体验。
-
11
Go应用性能优化的8个最佳实践，快速提升资源利用效率！
-
9
系统运行缓慢，执行速度较差虽然没有对用户或公司造成实质性的损失，但它从侧面反映出系统在某些方面存在问题。可能需要对系统参数进行优化，或者对系统的设计和交互进行调整，这是后续系统性能优化的一个重要过程。我们将继续努力优化系统，以确保其高效运行和良好...
-
1
快速排序（Quick Sort）是一种经典的、高效的排序算法，被广泛应用于计算机科学和软件开发领域。本文将深入探讨快速排序的工作原理、步骤以及其在不同情况下的性能表现。什么是快速排序？快速排序是一种基于分治策略的排序算法，其核心思想是通过选...
-
8
如何做好模型的性能评估？我们不妨从两个关键阶段来切入探讨。这篇文章里，作者就做了对应的解读，并阐述了在训练过程中可能遇到的数据泄露问题和相关解决方案，一起来看一下吧。
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK