一、 加载过慢的原因
1.网络请求过多(图片>JS>CSS)
2.页面DOM构造复杂(造成选择DOM耗时)
3.JS多次重复操作DOM构造(造成页面多次渲染耗时)
4.某次或多次网络资源请求过大(造成页面请求卡顿)
二、 解决方案
1. 网络请求过多:
Ø 部分常用资源放置app端中(如:jquery或常用CSS文件);
Ø 合并图片,减少请求(对于一些小图标,建议使用font或者svg);
Ø 对一些首屏不需要展示的资源(主要是图片)延时加载(jquery.lazyload);
Ø 对JS引用延时加载;(Android的OnPageFinished事件会在Javascript脚本执行完成之后才会触发。如果在页面中使用JQuery,会在处理完DOM对象,执行完$(document).ready(function() {});事件自会后才会渲染并显示页面。)
2. DOM构造复杂:
Ø 简洁化页面DOM构造;
Ø 推荐使用html5新特性标签;
Ø 使用ID选择DOM元素
3. JS多次重复操作DOM构造:
Ø 用zepto.js代替jquery(jquery里有多余兼容浏览器判断语句);
Ø 用LocalStorage缓存(需app设置允许)需要JS操作的DOM元素(保证首次加载时不需要等待api请求);
Ø 用media query和rem单位进行宽度自适应;
4. 某次或多次网络资源请求过大:
Ø 压缩资源文件(压缩);
Ø 减少文件大小,尤其图片资源,目前小机端屏幕有:600*974(H5)、768*999(H9,H8和H8S,S1)、800*1230(H 10),因此在考虑图片,应以768px为标准;