H5前端性能测试小结

osc_6lwba9kg 2020-11-13 13:21:41
javascript


Http请求个数


  • 同一个域名不同浏览器内核、不同版本浏览器,大部分并发请求数是6个;

  • 优化方案:

    a.雪碧图:即CSS Sprite,也称CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分。

    b.图片地图:是一种小图合并大图的范式,和雪碧图相似,区别仅在实现原理上有不同,雪碧图仅仅是通过CSS的方式来呈现图片的某个局部,而图片地图是从html代码的方式来控制显示区域。

    c.JS&CSS合并:将多个小的js、CSS合并成一个大的js、CSS文件,间接达到减少http请求的目的。

组件是否压缩


  • 压缩方法:在http请求中设置所接受到压缩方式,在Server端对Response资源进行压缩再传给浏览器。一般使用GZIP设置content-Encoding字段

  • 压缩对象:图片音乐不需要再压缩;Js,CSS通过去掉空格和回车来压缩,再经过GZIP压缩;

图片格式和大小是否合适


  • 图片格式:JPG性价比最高;

  • 图片尺寸:常用规格为480×800、600×1024、720×1280,800×1280等,获取原图而不是通过代码对图片放大或缩小;

  • 图片压缩:压缩工具如TinyPNG, Smush.it可以得到更好的压缩且图片质量不变;

CSS放在顶部


  • CSS要放到html代码的开头的head标签结束前,放底部可能会引起“闪屏”的不好体验;

JS放在底部


  • 下载js时,并行下载机制失效,渲染引擎会等待js下载完成再开始渲染,最后加载js减少页面加载时间;

JS &CSS压缩


  • 压缩方法,比如:

    //CC的压缩示例代码function echo(stringA,stringB){ var hello = "你好"; alert("hello world");}

    第一步:“精简”,去掉js中的空格,换行符和注释等信息,使得js代码变得紧凑而不失其语义。如:

    function echo(stringA,stringB){var hello="你好";alert("hello world")};

    第二步:”混淆”,将方法名和变量名用更简短的方式来表达,如变量可以用一个字符来表示。如:

    function echo(c,b){var a="你好",alert("hello world")};

    最后,经过压缩过的脚本文件使用务器端设置GZIP压缩算来压缩;

是否添加缓存


  • 通过HTTP的META设置expires和cache-control;

避免非200返回值


  • 如果有http请求返回为非200的状态码,我们认为这一次请求是无意义的,占用了稀缺的网络资源,所应该避免非200的返回状态码;

使用CDN


  • 时间相关:首屏时间,首资源下载时间,总资源下载时间,用户可操作时间;

  • WebView相关: 内存:加载页面前后内存变化,可间接反映H5中资源数量和大小,如dom数量,图片大小;

    CPU:当页面中资源样式复杂,强调视觉效果时,可观察CPU占用率来反映H5绘制质量。如果CPU长期处于高占用率,可考虑降低高计算量的视觉效果等手段;

    FPS:帧率尤其在有视频和动画效果的H5中,应该重点关注,防止严重的卡顿流出。

//    前端学习培训、视频教程、学习路线,请添加威信:kaixin666haoyun    }


版权声明
本文为[osc_6lwba9kg]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4319574/blog/4715735

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple