页面优化小记

网页的加载速度的重要性感觉已经不需要多介绍了。

网页性能检测

chrome浏览器其实已经十分十分的强大了。通过chrome的开发者模式下我们能看到许多数据，并借助这些数据来进行针对性的优化。

  1. option+cmd+j调出chrome的开发者模式
    如图，

    从左到右分别是元素、网络、源码、时间轴、性能、资源、审计、显示
    有一个官方的文档可以很详细的了解这些工具。
    官方dev tool文档

国内还有一大堆一大堆的介绍。dom方面的就不说了。
主要说介绍里面跟性能优化有关系的Timeline Network Audits

  1. Audits审计
    不知道为毛没有在官方文档里面找到这个的详细介绍，估计是因为这个功能太强大跟小白了。简直优化小天使。进入Audits之后

    里面会针对你的网络、CSS代码、JS代码进行优化提示。
  • 网络方面会针对你的数据有没有gzip压缩、开启cache、cookies压缩、html当中图片是否给定宽度来提高渲染速度。
  • 代码方面则对加载的css和js文件进行判断，使用率达到多少来提示你是否进行相应的删减提速。
    提示简单明了，一条一条的去解决去优化是我觉得很小白又很有效的加速方案。

  1. NetWork网络
    这块主要是对资源加载的事件进行一个细化的分析，比如一个html文件.所有的网络加载信息都能得到，最重要的有一个属性是Timeline能看到这个文件的排队事件，请求时间，响应下载时间等等，相当相当的详细。

  2. Profiles
    主要是针对内存占用进行一个细致的监控

  • (Collect JavaScript CPU Profile)监控函数执行期花费的时间
  • (Take Heap Snapshot)为当前界面拍一个内存快照
  • (Record Heap Allocations)实时监控记录内存变化(对象分配跟踪)
    这里面的东东很深呀，
    详细介绍
    关于各种调用的关系都能查的到，这个就不能继续讲了。如果有机会弄完了可以弄个专题。

优化

可以看到其实chrome提供的检测功能已经强大到变态了，所以暂时不想去再安装什么插件来检测。
优化这个东西其实很大，但是借助谷歌的大腿，我们能看到一些基本的并且又有效的东西。

从以上的工具中能看到大体的优化信息，常见的：

  1. gzip压缩，通过服务端开启gzip压缩数据可以很明显的提高下载速度；

  2. 页面中的图片如果能提前确定宽度高度的话提前指定，而不是等到页面渲染的时候再去计算，这样能够提高页面渲染速度。

  3. 设定资源的cache expiration来实现文件的缓存来加快再次访问时候页面速度。通过在header中指定HTTP/1.1 Cache中的Expiration。www.oneniceapp.com/home的测试显示去掉缓存的加载时间会比有缓存的加载时间多出0.5s的加载时间（简单统计）

  4. 对css和js代码进行压缩和合并：这个其实是有挺多说的，比如哪些css代码合并比较好，哪些js代码合并比较好。顺序怎么放，这些都要在合并和压缩之前考虑好。这些工作最好都借助前端的构建工具例如gulp和webpack来实现。个人建议页面中的自己逻辑代码压缩打包成一个文件，依赖的底层的库压缩打包到一个文件。

  5. 通过timeline看到你的资源加载过程中占用事件较长的文件，分析为毛它要那么长时间加载，有没有办法改变这个问题，还可以通过overview的选项来查看资源加载的时间轴。

后记

好吧，没啥说的，优化是一个细致的活，很多造成页面很慢的问题是要先捕捉，找到了之后单独拎出来查看它的数据，找到为什么慢，进行解决，对比解决之后性能跟时间上区别，记录问题。
之后会针对不同的优化开一个系列把。

优化

留言: