移动H5前端五大性能优化方案

移动H5前端.png

移动H5前端五大方案.png

移动H5前端性能优化

概述

1. PC优化手法在移动端相同适合使用

2. 在移动端我们提出3s加载完首屏资源

3. 根据第二点，首屏加载3s完或使用Loading

4. 根据联通3G网络均匀338KB/s(2.71Mb/s)，所以首屏资源不该超过1014KB

5. 移动端因手机配置原因，除加载外呈现页面速度也是优化重点

6. 根据第五点，要合理处理代码削减呈现页面的损耗

7. 根据第二、第五点，一切影响首屏加载和呈现页面的代码应在处理逻辑中后置

8. 加载完结后用户交互使用时也需注意功能

优化方案

[数据加载优化]

数据加载是最为耗时的进程，可能会占到总耗时的80%时刻，因此是优化的重中之重

· 尽量减少HTTP请求

· 使用缓存

· 压缩HTML、CSS、JavaScript

· 无阻塞

· 首屏加载

· 要按需加载

· 进行预加载

· 一定要压缩图片

· Cookie减少

· 避免重定向

· 第三方资源进行异步加载

[脚本执行优化]

脚本处理不妥会堵塞页面加载、烘托，因此在使用时需当留意

[优化CSS]

[JavaScript执行优化]

[渲染优化]

欢迎关注“IT实战联盟”哦~~~