减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,在服务端设置GZipGZip2.3不阻塞JavaScript写在HTML头部(非异步),而HTML标签中写Style会阻塞页面的渲染,所以将CSS放在页面头部,使用Link导入,避免在HTML标签中写Style,JavaScript放在页面末尾或者异步加载2.4使用首屏加载首屏快显可以大大提高用户对页面速度的感知,所以应该针对首屏快显进行优化越多越好。2.5按需加载不影响首屏的资源和当前屏未使用的资源在用户需要时加载,可以大大提高重要资源的显示速度,降低整体流量。PS:按需加载会导致大量重绘,影响渲染性能。LazyLoadMediaQuery2.6预加载资源比较重的大页面(比如游戏)可以使用增加Loading的方法,等资源加载完成后页面才会显示。但如果加载时间过长,则会造成用户流失。对于用户行为分析,可以在当前页面加载下一页的资源,提高速度。LoadingLoading2.7压缩图片图片是占用流量最大的资源,尽量避免使用,选择最合适的格式(在实现需求的前提下按大小判断)和合适的大小,然后使用知图进行压缩,同时在代码中使用Srcset按需显示PS:图片尺寸压缩过大影响图片显示效果a)使用智图(http://zhitu.tencent.com/)b)使用其他方式替换图片(1.使用CSS32.使用SVG3.使用IconFont)c)使用Srcsetd)选择合适的图片(1.webP优于JPG2.PNG8优于GIF)e)选择合适的尺寸(1.第一个loadisnotgreaterthan1014KB2.宽度不超过640(以手机屏幕的一般宽度为准))2.8减少CookiesCookies会影响加载速度,所以静态资源域名不使用cookies。2.9避免重定向重定向会影响加载速度,所以在服务器上正确设置避免重定向。2.10异步加载第三方资源不可控的第三方资源会影响页面的加载和显示,所以第三方资源应该异步加载2.11减少HTTP请求,因为手机浏览器同时响应4个请求(Android支持4个请求,iOS5之后可以支持6个),所以尽量减少页面的请求数,第一次加载同时请求数不能超过4个a)合并CSS,JavaScriptb)合并小图,使用Sprite3.脚本执行优化脚本处理不当会阻塞页面加载、渲染,所以在使用的时候需要注意CSS写在头部,JavaScript写在末尾或者异步,避免图片、iFrame等Src为空。src会重新加载当前页面,影响速度和效率。尽量避免重新设置图片大小重新设置图片大小是指在页面、CSS、JavaScript等中多次重新设置图片大小,多次重新设置图片大小会导致图片多次重绘,影响性能。图片尽量避免使用DataURL,DataURL图片没有使用图片压缩算法,文件会变大,渲染前需要解码,加载时间长。第四,CSS优化应该尽量避免在HTML标签中写Style属性。webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);转换:translate3d(0,0,0);}4.2避免CSS表达式CSS表达式的执行需要跳出CSS树的渲染,所以请避免使用CSS表达式。4.3不要滥用FloatFloat在渲染时计算量大,尽量减少使用4.4值为0时,不需要单位。为了浏览器兼容性和性能,值为0时不带unit。5.JavaScript执行优化5.1减少重绘和Reflow避免不必要的Dom操作减少drawImage5.2TOUCH事件优化使用touchstart,touchend代替click,因为速度影响速度很快。但需要注意的是Touch响应过快,容易导致误操作6.渲染优化6.1HTML使用ViewportViewport可以加快页面渲染速度,请使用如下代码
