首页 > 其他 > 详细

新时代的页面性能优化

时间:2018-05-18 00:55:04      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:架构   冗余   http2   进行   man   通过   解析   afa   rom   

概述

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

首屏时间

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

  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树命名了,几乎都是子选择器嵌套。

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

新时代的页面性能优化

标签:架构   冗余   http2   进行   man   通过   解析   afa   rom   

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

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号