移动端页面性能探究

一、背景：

     

     智能终端的普及改变了人们对互联网的使用习惯，终端环境对页面性能有更高的要求，接下来以一张图来分析：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