页面性能评测

概述

  1. PC优化手段在Mobile侧同样适用

  2. 在Mobile侧我们提出 三秒种渲染完成首屏指标

  3. 基于第二点,首屏加载3秒完成或使用Loading

  4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以 首屏资源不应超过1014KB

  5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点

  6. 基于第五点,要合理处理代码减少渲染损耗

  7. 基于第二、第五点,所有 影响首屏加载和渲染的代码应在处理逻辑中后置

  8. 加载完成后用户交互使用时也需注意性能

 

加载优化

加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点

  • 减少HTTP请求 
    因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数, 首次加载同时请求数不能超过4个

    • 合并CSS、JavaScript

    • 合并小图片,使用雪碧图 

  • 缓存 
    使用缓存可以减少向服务器的请求数,节省加载时间,所以 所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)

    • 缓存一切可缓存的资源

      1. Favicon.ico

      2. AJAX资源

    • 使用长Cache

      1. 使用时间戳更新Cache

    • 使用外联式引用CSS、JavaScript 

  • 压缩HTML、CSS、JavaScript 
    减少资源大小可以加快网页显示速度,所以要 对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip

    • 压缩(例如,多余的空格、换行符和缩进)

    • 启用GZip 

  • 无阻塞 
    写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此 CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载 

  • 使用首屏加载 
    首屏的快速显示,可以大大提升用户对页面速度的感知,因此应 尽量针对首屏的快速显示做优化 

  • 按需加载 
    将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载 ,可以大大提升重要资源的显示速度和降低总体流量 
    PS: 按需加载会导致大量重绘,影响渲染性能

    • LazyLoad

    • 滚屏加载

    • 通过Media Query加载 

  • 预加载 
    大型重资源页面(如游戏)可 使用增加Loading的方法,资源加载完成后再显示页面。但Loading时间过长,会造成用户流失 
    对用户行为分析, 可以在当前页加载下一页资源 ,提升速度

    • 可感知Loading(如进入空间游戏的Loading)

    • 不可感知的Loading(如提前加载下一页) 

  • 压缩图片 
    图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示 
    PS:过度压缩图片大小影响图片显示效果

    • 使用智图  http://image.isux.us/ 

    • 使用其它方式代替图片

      1. 使用CSS3

      2. 使用SVG

      3. 使用IconFont

    • 使用Srcset

    • 选择合适的图片

      1. webP优于JPG

      2. PNG8优于GIF

    • 选择合适的大小

      1. 首次加载不大于1014KB (基于3秒联通平均网速所能达到值)

      2. 不宽于640 (基于手机屏幕一般宽度) 

  • 减少Cookie 
    Cookie会影响加载速度,所以 静态资源域名不使用Cookie 

  • 避免重定向 
    重定向会影响加载速度,所以在服务器正确设置 避免重定向 

  • 异步加载第三方资源 
    第三方资源不可控会影响页面的加载和显示,因此要 异步加载第三方资源 

脚本执行优化

脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意

  • CSS写在头部,JavaScript写在尾部或异步 

  • 避免空图片和iFrame等的Src 
    空Src会重新加载当前页面,影响速度和效率 

  • 尽量避免重设图片大小 
    重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小, 多次重设图片大小会引发图片的多次重绘,影响性能 

  • 图片尽量避免使用DataURL 
    DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长 

  • CSS

    • 尽量避免写在HTML标签中写Style属性 

    • 避免CSS表达式 
      CSS表达式的执行需跳出CSS树的渲染,因此请 避免CSS表达式 

    • 移除空的CSS规则 
      空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需 移除空的CSS规则 

    • 正确使用Display的属性 
      Display属性会影响页面的渲染,因此请合理使用

      1. display:inline后不应该再使用width、height、margin、padding以及float

      2. display:inline-block后不应该再使用float

      3. display:block后不应该再使用vertical-align

      4. display:table-*后不应该再使用margin或者float 

    • 不滥用Float 
      Float在渲染时计算量比较大,尽量减少使用 

    • 不滥用Web字体 
      Web字体需要下载,解析,重绘当前页面,尽量减少使用 

    • 不声明过多的Font-size 
      过多的Font-size引发CSS树的效率 

    • 值为0时不需要任何单位 
      为了浏览器的兼容性和性能,值为0时不要带单位 

    • 标准化各种浏览器前缀

      1. 无前缀应放在最后

      2. CSS动画只用 (-webkit- 无前缀)两种即可

      3. 其它前缀为 -webkit- -moz- -ms- 无前缀 四种,(-o-Opera浏览器改用blink内核,所以淘汰) 

    • 避免让选择符看起来像正则表达式 
      高级选择器执行耗时长且不易读懂,避免使用 

  • JavaScript

    • 减少重绘和回流

      1. 避免不必要的Dom操作

      2. 尽量改变Class而不是Style,使用classList代替className

      3. 避免使用document.write

      4. 减少drawImage 

    • 缓存Dom选择与计算 
      每次Dom选择都要计算,缓存他

    • 缓存列表.length 每次.length都要计算,用一个变量保存这个值

    • 尽量使用事件代理,避免批量绑定事件 

    • 尽量使用ID选择器 
      ID选择器是最快的 

    • TOUCH事件优化 
      使用touchstart、touchend代替click,因快影响速度快。但应注意Touch响应过快,易引发误操作 

渲染优化

  • HTML使用Viewport 
    Viewport可以加速页面的渲染,请使用以下代码 
    <meta name=”viewport” content=”width=device-width, initial-scale=1″> 

  • 减少Dom节点 
    Dom节点太多影响页面的渲染,应尽量减少Dom节点 

  • 动画优化

    • 尽量使用CSS3动画

    • 合理使用requestAnimationFrame动画代替setTimeout

    • 适当使用Canvas动画 
      5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL) 

  • 高频事件优化

    • Touchmove、Scroll 事件可导致多次渲染

      1. 1.使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染

      2. 2.增加响应变化的时间间隔,减少重绘次数 

  • 绘制、合成优化

    • GPU加速 
      CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用 
      PS:过渡使用会引发手机过耗电增加




参考资料



78 thoughts on “页面性能评测”

  • naturally like your web site but you have to check the spelling on several of your posts. A number of them are rife with spelling issues and I find it very troublesome to tell the truth nevertheless I will definitely come back again.

  • That is very attention-grabbing, You’re a very skilled blogger. I have joined your feed and stay up for in the hunt for extra of your excellent post. Also, I’ve shared your site in my social networks!

  • I have to thank you for the efforts you’ve put in writing this website. I really hope to view the same high-grade blog posts by you in the future as well. In truth, your creative writing abilities has motivated me to get my own, personal blog now 😉

  • I have seen that right now, more and more people are increasingly being attracted to cams and the area of images. However, as a photographer, you have to first spend so much time period deciding which model of video camera to buy along with moving via store to store just so you might buy the most economical camera of the brand you have decided to settle on. But it would not end at this time there. You also have to consider whether you should obtain a digital photographic camera extended warranty. Thanks alot : ) for the good suggestions I gathered from your web site.

  • It’s perfect time to make a few plans for the longer term and it’s time to be happy. I’ve read this publish and if I may just I desire to suggest you few interesting things or tips. Maybe you could write subsequent articles referring to this article. I want to learn even more things about it!

  • One thing I’ve noticed is that there are plenty of myths regarding the finance institutions intentions while talking about property foreclosure. One delusion in particular would be the fact the bank desires your house. The bank wants your hard earned money, not the home. They want the amount of money they lent you along with interest. Avoiding the bank will draw a foreclosed summary. Thanks for your posting.

  • I?ve been exploring for a bit for any high quality articles or blog posts on this kind of area . Exploring in Yahoo I at last stumbled upon this site. Reading this info So i am happy to convey that I’ve an incredibly good uncanny feeling I discovered exactly what I needed. I most certainly will make certain to do not forget this website and give it a glance on a constant basis.

  • A fascinating discussion is definitely worth comment. I think that you need to write more about this subject, it might not be a taboo matter but typically people don’t discuss these issues. To the next! Many thanks!

  • Thanks for your article on the travel industry. I might also like to add that if you’re a senior taking into account traveling, its absolutely essential that you buy travel insurance for retirees. When traveling, older persons are at biggest risk being in need of a health emergency. Getting the right insurance coverage package in your age group can look after your health and provide peace of mind.

  • The core of your writing while appearing reasonable originally, did not really work perfectly with me personally after some time. Someplace throughout the sentences you were able to make me a believer but just for a while. I nevertheless have a problem with your leaps in assumptions and you might do well to fill in all those breaks. In the event you can accomplish that, I would surely be impressed.

  • certainly like your web site however you need to check the spelling on quite a few of your posts. Many of them are rife with spelling issues and I find it very troublesome to tell the reality then again I?ll definitely come back again.

  • Thanks for giving your ideas right here. The other thing is that each time a problem comes up with a pc motherboard, folks should not consider the risk of repairing that themselves because if it is not done right it can lead to irreparable damage to all the laptop. Most commonly it is safe to approach any dealer of that laptop for the repair of motherboard. They will have technicians who may have an expertise in dealing with laptop motherboard problems and can have the right diagnosis and conduct repairs.

  • The following time I learn a blog, I hope that it doesnt disappoint me as much as this one. I imply, I know it was my option to read, however I truly thought youd have something fascinating to say. All I hear is a bunch of whining about one thing that you may repair should you werent too busy on the lookout for attention.

  • hello there and thank you for your info ? I have certainly picked up something new from right here. I did however expertise some technical points using this web site, as I experienced to reload the web site lots of times previous to I could get it to load properly. I had been wondering if your hosting is OK? Not that I am complaining, but slow loading instances times will sometimes affect your placement in google and can damage your quality score if advertising and marketing with Adwords. Well I am adding this RSS to my e-mail and can look out for much more of your respective interesting content. Ensure that you update this again soon..

  • Wow! This could be one particular of the most helpful blogs We’ve ever arrive across on this subject. Basically Magnificent. I’m also a specialist in this topic therefore I can understand your effort.

  • Another important aspect is that if you are an older person, travel insurance for pensioners is something that is important to really think about. The more mature you are, the more at risk you will be for permitting something negative happen to you while overseas. If you are not necessarily covered by some comprehensive insurance cover, you could have some serious difficulties. Thanks for sharing your advice on this weblog.

  • hello there and thank you for your information ? I?ve definitely picked up something new from right here. I did however expertise a few technical issues using this website, since I experienced to reload the website lots of times previous to I could get it to load correctly. I had been wondering if your web host is OK? Not that I am complaining, but slow loading instances times will sometimes affect your placement in google and could damage your high quality score if ads and marketing with Adwords. Anyway I?m adding this RSS to my e-mail and can look out for a lot more of your respective fascinating content. Make sure you update this again very soon..

发表评论

邮箱地址不会被公开。 必填项已用*标注

− 2 = 5