一、背景:
智能终端的普及改变了人们对互联网的使用习惯,终端环境对页面性能有更高的要求,接下来以一张图来分析:1s内渲染一个移动页面
网络整体消耗来分析:
1、服务器响应应该小于200ms
2、尽量少的重定向
3、尽量少的第一次渲染的请求
4、避免过多堵塞的js和css堵塞
js执行效率和渲染效率:
1、给浏览器留的200ms渲染时间
2、优化我们的js执行效率和渲染时间
二、主要的web性能优化
页面请求:DNS Lookup、减少重定向、并行请求、压缩、缓存、按需加载、前端模块化
运行环境:交互、动画、滚动、内存和GC、FPS
三、渲染问题的思考
1)智能终端与pc的性能差异巨大
x86的性能是ARM的5倍以上甚至更多,原先存在的许多性能问题被掩盖,终端市场爆发后,问题随之而来,表现在下面一些情况:
-用户所持的终端CPU优劣差异巨大
-运行速度慢
-用户操作卡顿
-内存不足
-本地存储空间不足
-可控的资源有限
-...
2)IOS与Android硬件对比
早期为何大家会觉得iphone比android手机好用?
流畅性:流畅的动画和滑动
节能:省电
稳定:很少crash
操作系统 | 型号 | CPU | RAM |
iphone | 4s | 双核A5 800MHZ | 512M |
iphone | 4 | A4 800MHZ | 512M |
iphone | 3GS | S5PC100 600MHZ | 256M |
Android | Glaxy Note | Exynos 双核 1.4GHZ |