新时代的页面性能优化

概述

最近这几天对页面性能优化进行了一些思考，记录下来，供以后开发时参考，相信对其他人也有用。在我查资料的过程中，发现以前的一些黄金优化法则，在现代有些已经或多或少的被淘汰了！

首屏时间

首屏时间真的很重要，用户的等待忍受能力是有限的。有以下几个优化方向：

1. 可以通过chrome浏览器的performance面板来查看页面加载时的逐帧闪照。来查看在首屏之前浏览器做了哪些多余的动作，然后一一优化掉。
2. 对于首屏有一个很大的背景图的网站，背景图一般是用background-img实现的，但是background-imag里面的图片的加载请求是在下载css完成之后并且开始解析的时候才开始下载的。所以可以对它进行预加载，方法就是建立一个display:none的标签包裹住img标签。
3. 对于大背景图，一定要拆分成几个小的，这样可以并行下载。

http请求数？

前端性能优化的黄金法则里面有这么一条：减少http请求。

现在，这条根本是错的啊，http2.0出来以后，不再有http请求次数限制了，对于同一个域，可以同时进行多个http请求。

雪碧图？不存在的，对于小icon，使用雪碧图是可以的，对于其它图片就可以不使用雪碧图了，因为已经不限制http请求数啦。不过雪碧图有另一个用处，就是预加载图片，但是可以用其他方法实现啊。

css选择器优化？

之前safari和webkit的架构师David Hyatt的两段话：

    样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样
式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
　   如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。

其中第二句，子选择器对于页面性能的改善更值得关注，所以之前大多数大型网站提出了尽量少用子选择器的css优化法则，甚至提出了树命名法。

但是，现在已经不管用了，css子选择器对性能的影响已经没有那么大了，相反，很多冗余的css类名，不仅会加大html和css的体积，而且会严重影响可读性，加大了维护的难度。并且，现代大多数框架都使用less等语法，子选择器嵌套更加容易书写。

所以现代各大网站几乎看不到css树命名了，几乎都是子选择器嵌套。

另外，样式系统从最右边的选择符开始向左进行匹配规则的，所以嵌套层数最好不要太多。

原文地址：https://www.cnblogs.com/yangzhou33/p/9054022.html