关于(移动)网站的性能优化笔记

记录

参考移动端网站提升页面加载性能的优化技巧

1. 减少每个页面需要获取额外资源的HTTP请求数。
2. 减少每个请求加载的大小。
3. 优化客户端执行的优先级和脚本执行的效率。

具体实现方案：

• 减少请求：
  1. cnds ,自建静态资源库（statics）
• 整合资源
  1. 统一管理资源加载，减少重复加载
  2. Sprites是css中处理图片
  3. 使用Webpack等打包工具压缩 合并文件css ,js,html
• 使用浏览器缓存和本地缓存
  1. Cache-Control或者Expires头标记的资源，这些头能标记资源需要缓存的时间
  2. HTML5的localStorage操作，可以读写键值数据，每个域名大概有5MB的容量(缓存问题：失效，存满 时新增的删除处理)
  3. 使用Webpack等打包工具压缩 合并文件css ,js,html
• 首次使用的时候在HTML中嵌入资源：
  1. 资源没有很高的被缓存的几率的话，最好把它嵌入到页面的HTML中（叫inlining）
  2. 图片和其他的二进制资源其实也是可以通过内嵌包含base64编码的文本来嵌入到HTML中
  3. 在第一次请求资源后必须能够使用代码在客户端缓存资源，因此，在移动设备上，使用HTML5 localStorage能很好地做到内嵌。
• 使用HTML5服务端发送事件
  1. 这种方式比HTML的WebSocket更高效，WebSocket的使用场景是，当有许多客户端和服务端的交互的时候（比如消息或者游戏），在全双工连接上建立一个双向通道。
  2. 转变成Server-Sent事件需要重构网站的Javascript代码
• 消除重定向
  1. 在原先的请求上传递移动的web页会比传递一个重定向的信息并让客户端再请求移动页面更快。
• 减少资源负载
  1. 关于移动端页面的大小问题，渲染小页面更快，获取小资源也更快，减小每个请求的大小通常不如减少页面请求个数那么显著地提高性能。
• 压缩文本和图像
  1. gzip这样的压缩技术,依靠增加服务端压缩和浏览器解压的步骤(这些操作都是被高度优化过了，而且测试表明，压缩对网站还是起到优化性能的作用的，那些基于文本的响应，包括HTML，XML，JSON（Javascript Object Notation），Javascript，和CSS可以减少大约70%的大小。)
• 调整图片大小
  1. 提前优化图片大小和质量 到PC,移动平台
  2. 使用大小两套图片，小图占位，onload加载原（大）图
  3. 使用lazyload或一些其他延迟加载具提高页面渲染效率
• 使用HTML5和CSS 3.0来简化页面
  1.结构元素，例如header，nav，article和footer 语义化的标签使得页面更简单和更容易解析，，可以有更快的JavaScript执行效率
  1. 新属性 placeholder（占位） ，autofocus ，input 类型（e-mail，URL，数字，范围，日期和时间）减少之前js操作来提高体验
  2. 层次，圆角，阴影，动画，过渡和其他的图片效果，CSS 3.0，功能同上减少耗损
• 延迟读取和执行的脚本
  1. 用户操作如拖拽可以在onload事件之后再进行加载，而在些之前是进行页面渲染
  2. 延迟加载的异步版本的API
• 使用Ajax来增强进程
  1. 增加进程，（ 跨域问题，你需要使用XHR2）
• 使用HTML5的WEB WORKER特性操作多线程应用，（个人理解，如果真要大计算只要不是本地应用都可以使用websocket+serverEnd来处理，毕竟服务器的运算支持能力更强）
• 使用移动事件，如touch 代替click等。

总结

马海祥博客点评：
如果缺少了持续和仔细的测试提醒，性能的优化就只是讨论而已，是无法完成的，如果没有指定基准做比较，你系统上的任何改动都仅仅是理论而已，如果没有真实的测试数据，猜测性能的瓶颈是毫无意义的。
有很多开源和通用的工具能进行集成测试，并且能进行不同地域和带宽/延迟的测试，另外，RUM（real user monitoring）工具能将测试环境从实验室变成不可预测的真实用户行为。
观察移动设备的测试选择和桌面场景一样，如果你在选择一个自动化的解决方案，请确保使用一个能持续测试，并且能区分出应用优化方法前后的变化的解决方案。
如果性能优化如果只是在发展过程中的一个步骤而已，它不会有什么效果的，它必须成为一个持续改善网站的一部分

结合实践运用一些基本的软件原则进行开发，

1. 精简(减少资源，压缩资源…)
2. 优化 （业务逻辑，算法…）

这是有顺序的一种结合方式