对于图片懒加载，可以为页面添加一个滚动条事件，判断图片是否在可视区域内或者即将进入可视区域，优先加载。如果为幻灯片、相册文件等，可以使用图片预加载技术，对于当前展示图片的前一张图片和后一张图片优先下载。如果图片为CSS图片，可以使用CSSSprite、SVGsprite、Iconfont、Base64等技术。如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别小的缩略图，以提高用户体验。如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了。

优化方式如下：1、尽量使用CSS3动画，开启硬件加速。2、适当使用touch事件代替click事件。3、避免使用CSS3渐变阴影效果。4、可以用transform:translateZ（0）来开启硬件加速。5、不滥用Float,Float在渲染时计算量比较大，尽量少使用。6、不滥用Web字体，Web字体需要下载、解析、重绘当前页面，尽量少使用。7、合理使用requestAnimationFrame动画代替setTimeout。8、合理使用CSS中的属性（CSS3transitions、CSS33Dtransforms、Opacity、Canvas、WebGL、Video）触发GPU渲染。过度使用会使手机耗电量増加。

具体方法如下（1）优化图片（2）选择图像存储格式（比如，GIF提供的颜色较少，可用在一些对颜色要求不高的地方）（3）优化CSS（压缩、合并CSS）（4）在网址后加斜杠（5）为图片标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小。如果图片很多，浏览器需要不断地调整页面。这不但影响速度，而且影响浏览体验。当浏览器知道高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而优化加载时间，提升浏览体验）。

利用性能分析工具监测性能，包括静态Analyze工具和运行时的Profile工具（在Xcode工具栏中依次单击Product→Profile项可以启动）。比如测试程序的运行时间，当单击TimeProfiler项时，应用程序开始运行，这就能获取到运行整个应用程序所消耗时间的分布和百分比。为了保证数据分析在同一使用场景下的真实性，一定要使用真机，因为此时模拟器在Mac上运行，而Mac上的CPU往往比iOS设备要快。

具体方法如下：（1）缓存DOM的选择和计算。（2）尽量使用事件委托模式，避免批量绑定事件。（3）使用touchstart、touchend代替click。（4）合理使用requestAnimationFrame动画代替setTimeOut。（5）适当使用canvas动画。（6）尽量避免在高频事件（如TouchMove、Scroll事件）中修改视图，这会导致多次渲染。