前端-【学习心得】-移动端性能提高1

    到了大年初四基本上该拜的年都拜完了，今天天气格外好，阳光明媚，有时候觉得光是简单的晒晒太阳就是幸福，很希望能多多静下心来仔细去思考，然后再去学习。好了不废话了，今天想分享一下自己再前端移动端部分积攒摸索的知识。

    首先向大家介绍一本书《HTML5触摸界面设计与开发》，这本书并不厚，但讲的东西都是干货，十分受用，我今要分享的也是来自于此书中。

    移动端的重要性不言自明，相比于原生的app,移动web端的最大优势就是开发速率很高，并且对于那些内容型为主的应用其实并不需要特别高的性能要求，另外web移动端可以结合类似于phonegap这样的混合应用框架构建混合性应用，这对于我们web开发人员来讲无疑是个很值得研究的领域。

    相比于pc端的web应用，移动端对性能的要求更甚，因为毕竟小小的手机运算能力还是比不上pc的，这里我就先从性能方面更大家说说。

    先看看浏览器如何加载界面的：

    1 解析域名

    用户输入的域名经过dns服务器解析后变为Ip,然后通过ip访问应用，为了减少Dns服务器上的负载，Dns的查找机制会被浏览器，设备及设备和服务器之间的路由器和代理服务器缓存。

    2 发起请求

    浏览器拿到Ip后向Ip地址的主机发起tcp连接，然后发送请求，请求中包含网址，浏览器信息，浏览器能接受的数据类型（编码和语言），以及相关cookie包括域和路径的cookie

    3下载响应

    浏览器开始下载响应，随着响应到达，浏览器解析HTML，并识别更多资源。然后浏览器开始获得这些资源。

    4渲染界面

    最后浏览器会尽快渲染页面。如果页面中包含了css或脚本文件，浏览器会等到这些文件加载和解析完再渲染。

    由此可以总结出页面加载缓慢的几个原因：

    http连接总数。

    总字节数。

    等待时的渲染阻塞。

    延迟。

    缓存能力差。

 早些的时候我分享了一篇前端工具，chrome浏览器，可以通过使用chrome的时间线插件查看响应的时间。方法是审查元素->network.

    然后我们可以针对这些原因一一解决，

    http请求数太多我们可以合并那些资源文件，比如css,js，以及Image，这些合并的工作可以使用grunt,考拉等来完成。

    总字节数，同理我们压缩相关的资源文件即可。

    等待时的渲染阻塞，就是说必须等待js完成后才能渲染界面，那么我们就把js的依赖放到页尾，当然这并不是绝对的，因为有的时候必须把相关js放到前面。

    网络延迟，这个解决的办法就是提高自己服务器的性能，比如增大带宽，使用内容分发网络cdn等。

    缓存能力差，针对缓存问题我会再明天单独跟大家分享一下。

    另外谷歌也曾经针对界面性能优化发表过相关文章，WSLOW是雅虎卓越性能团队在2007年开发的一个工具，他会通过检测你的网站与最佳实践方案之间的差别来给出你最佳优化的建议。developer.yahoo.com/yslow，这个是相关网站，有兴趣的同学可以自己去研究下。