web移动端性能调优及16ms优化

时间 2019-11-08

标签 web 移动性能 16ms 优化栏目 HTML 繁體版

原文原文链接

本文只是一个索引，收集了网络上大部分关于调试及优化方面的文章，从中挑选了一些比较好的文章分享给你们。javascript

移动端性能不及桌面浏览器性能的10分之1，特别是在android设备参差不齐的状况下，性能显得尤其重要。感受作移动端页面，重回了解放前电脑仍是386的年代，呵呵。css

国内，16ms优化，60fps指标等相关的文章很是少，大部分仍是翻译国外的一些优秀文章，很是感谢这些翻译者对web前端的贡献，让我等英文盲能及时了解前沿技术哈。html

在进行毫秒级的优化时，了解浏览器的工做原理很是重要，这是晋级优秀程序员的关键。就像写win客户端软件的，总会去了解一下计算机组成原理、操做系统原理等。而咱们作web页面的，了解浏览器工做原理也是同样的道理前端

浏览器的工做原理

掌握调试方法比记住别人总结的结论更重要，所谓授人以鱼如授人以渔。根据实际业务发现其页面的瓶颈，才能制定对应的优化方案。github

调试方法主要是使用chrome的开发者工具进行调试，学会如何使用timeline并结合Rendering选项里的内容发现性能瓶颈

浏览器自带开发工具的秘密
里面有写到本地电脑如何链接手机，经过chrome查看网页。（安装ADB插件）

Explore and Master Chrome DevTools
几个简单的视频介绍了解chrome devtools的相关知识

web性能优化，其实不分PC端、移动端，优化思路及手法都是相通的，只是目前PC端，性能问题并不明显，不少时候被忽视了。
这里主要强调的是渲染优化及滚动优化，是微观层面上的毫秒级优化。

若是以上的文章连接打不开，那估计是别人博客down掉了，你能够尝试google一下文章标题，也许会找到别人转载的文章。

我接触移动端其实并不久，不少优化知识还仅仅停留在在理论层面，并未真正实施体验过。移动端的优化路上，还有很长的路要走。

最后，丢一个我和荔枝同窗一块儿写的PPT
若没法查看可点击连接查看