webview加载html优化

一、  加载过慢的原因

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为标准；