Open felix-cao opened 5 years ago
这是一张前端性能优化图，图中已经对前端性能做了一些概括，还是比较全面的。本文主要从三个方面就前端性能优化进行归纳总结：
通过减少请求数量来加快网络加载速度，在雅虎的 YUI 35个规则中也有提到，主要是优化 js、css和图片资源三个方面：
YUI
js
css
css sprite
base64
在现今的前端开发中，其实这4个方面都可以借助 webpack 这个优秀的打包工具处理，开发者只关心业务逻辑实现。
webpack
减小资源体积，那么资源在网络传输过程中自然就快一点，可以通过以下几个方面进行实施：
gzip
同样，后面三个都可以交给 webpack 来处理，而gzip压缩主要是通过 web 服务器中的配置实现的，如 Nginx 配置文件 一般都会开启 gzip 压缩，而现代浏览器也都支持这一行为。
web
Nginx
缓存是效率最高的一种，往往缩短的加载时间也是最大的，主要有：
DNS
CDN
操作 DOM 会导致浏览器渲染流程的 reflow 和 repaint，而 reflow 和 repaint 会产生浏览器的性能开销。这里的知识可以阅读下面两篇文章：
DOM
reflow
repaint
但是reflow 和 repaint 是无法避免的，所以我们主要是要最小化导致 reflow 和 repaint 的次数，即减少 DOM 操作与网页渲染。
css文件放在头部加载，可以保证解析DOM的同时，解析css文件。因为，CSS（外链或内联）会阻塞整个DOM的渲染，然而DOM解析会正常进行，所以将css文件放在头部进行解析，可以加快网页的构建速度。假设将其放在尾部，那时DOM树几乎构建，这时就得等到CSSOM树构建完成，才能够继续下面的步骤。
CSSOM
js 文件不同，将 js 文件放在尾部或者异步加载的原因是JS（外链或内联）会阻塞后续 DOM 的解析，后续 DOM 的渲染也将被阻塞，而且一旦 js 中遇到 DOM 元素的操作，很可能会影响。
JS
JavaScript
classname
UI
position
absolute
fixed
setTimeout
canvas
等等，暂时写这么多，以后慢慢补充！
一、概述
二、可控的网络资源
2.1、减少http请求
通过减少请求数量来加快网络加载速度，在雅虎的
YUI35个规则中也有提到，主要是优化js、css和图片资源三个方面：js文件css文件css spritebase64表示简单的图片在现今的前端开发中，其实这4个方面都可以借助
webpack这个优秀的打包工具处理，开发者只关心业务逻辑实现。2.2、减小资源体积
减小资源体积，那么资源在网络传输过程中自然就快一点，可以通过以下几个方面进行实施：
gzip压缩js混淆css压缩同样，后面三个都可以交给
webpack来处理，而gzip压缩主要是通过web服务器中的配置实现的，如Nginx配置文件 一般都会开启gzip压缩，而现代浏览器也都支持这一行为。2.3、缓存：可以通过以下几个方面来描述：
缓存是效率最高的一种，往往缩短的加载时间也是最大的，主要有：
DNS缓存一般是域名服务商提供的服务CDN缓存，CDN作为静态资源文件的分发网络，本身就已经提升了，网站静态资源的获取速度，加快网站的加载速度，同时也给静态资源做好缓存工作，有效的利用已缓存的静态资源，加快获取速度。三、DOM 操作与网页渲染优化
操作
DOM会导致浏览器渲染流程的reflow和repaint，而reflow和repaint会产生浏览器的性能开销。这里的知识可以阅读下面两篇文章：但是
reflow和repaint是无法避免的，所以我们主要是要最小化导致reflow和repaint的次数，即减少DOM操作与网页渲染。3.1、渲染优化
css的文件放在头部，js文件放在尾部css文件放在头部加载，可以保证解析DOM的同时，解析css文件。因为，CSS（外链或内联）会阻塞整个DOM的渲染，然而DOM解析会正常进行，所以将css文件放在头部进行解析，可以加快网页的构建速度。假设将其放在尾部，那时DOM树几乎构建，这时就得等到CSSOM树构建完成，才能够继续下面的步骤。js文件不同，将js文件放在尾部或者异步加载的原因是JS（外链或内联）会阻塞后续DOM的解析，后续DOM的渲染也将被阻塞，而且一旦js中遇到DOM元素的操作，很可能会影响。3.2 DOM 操作优化
JavaScript循环中进行DOM操作classname代替大量的内联样式修改UI元素，设置position为absolute或fixedcss动画setTimeout做动画效果canvascss表达式的使用四、数据显示优化
等等，暂时写这么多，以后慢慢补充！