移动端优化

1、解决点击 300ms 延迟


问题原因:点击的 300ms 延迟是由双击缩放机制所导致的,由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,移动端浏览器就等待 300 毫秒,以判断用户是否再次点击了屏幕。

解决方案:一个轻量级的库FastClick可以很好的解决延迟问题。FastClick 在检测到 touchend 事件的时候,会通过 DOM 自定义事件立即触发一个模拟 click 事件,并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

使用方法:在 window load 事件之后,调用FastClick.attach()。

window.addEventListener("load",function(){

    FastClick.attach(document.body );

},false);

2、滚动问题


问题描述:移动端滚动列表是卡顿,无法快速回弹滚动;

解决方案:

overflow:auto;/* auto | scroll */

-webkit-overflow-scrolling:touch;

3、页面加载优化


   3.1 减少HTTP请求

          首次加载同时请求数不能超过4个。

   3.2 缓存

          使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长      Cache(长Cache资源的更新可使用时间戳,使用外联式引用CSS、JavaScript)。

   3.3 无阻塞

             写在HTML头部的JavaScript(不要异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使     用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾。

   3.4 加载方式

          (1)首屏的快速显示,可以提升用户对页面速度的感知,因此尽量针对首屏的快速显示做优化。

          (2)进行预加载,对用户行为分析,可以在当前页加载下一页资源,提升速度。

          (3)不影响首屏的资源和当前屏幕资源不用的情况下,把资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量。(按需加载需要注意重绘问题,防止过分重绘影响渲染性能)。

          (4)异步加载第三方资源,第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源

4、css优化

   4.1 css规则、属性

         (1)尽量避免写在HTML标签中写Style属性。

         (2)移除空的CSS规则,空的CSS规则增加了CSS文件的大小以及css的健壮性,且影响CSS树的执行,所以需移除空的      CSS规则。

4.2 css注意事项

(1)Display的属性注意事项

     (a) display:inline后不应该再使用width、height、margin、padding以及float。

     (b)display:inline-block后不应该再使用float。

     (c)display:block后不应该再使用vertical-align。

     (d)display:table-*后不应该再使用margin或者float。

(2)不滥用Float、Web字体、Font-size

     (a)Float在渲染时会造成大量的计算,尽量减少使用

     (b)Web字体需要下载、解析、重绘当前页面,尽量减少使用

     (c)避免过多声明Font-size,过多的Font-size引发CSS树的效率;值为0时不需要任何单位为了浏览器的兼容性和性能,值为0时不要带单位。

(3)浏览器前缀、选择器

(a) 无前缀应放在最后,CSS动画只用 (-webkit- 无前缀)两种即可,

(b) 避免让选择符看起来像正则表达式,高级选择器执行耗时长且不易读懂;



5、设备检测


原文:https://github.com/binnng/device.js

var WIN =window;

var LOC = WIN["location"];

var NA = WIN.navigator;

var UA = NA.userAgent.toLowerCase();

function test(needle){

return needle.test(UA);

}

var IsTouch ="ontouchend"inWIN;

var IsAndroid = test(/android|htc/) ||/linux/i.test(NA.platform +"");

var IsIPad = !IsAndroid && test(/ipad/);

var IsIPhone = !IsAndroid && test(/ipod|iphone/);

var IsIOS = IsIPad || IsIPhone;varIsWinPhone = test(/windows phone/);

var IsWebapp = !!NA["standalone"];

var IsXiaoMi = IsAndroid && test(/mi\s+/);

var IsUC = test(/ucbrowser/);

var IsWeixin = test(/micromessenger/);

var IsBaiduBrowser = test(/baidubrowser/);

var IsChrome = !!WIN["chrome"];

var IsBaiduBox = test(/baiduboxapp/);

var IsPC = !IsAndroid && !IsIOS && !IsWinPhone;

var IsHTC = IsAndroid && test(/htc\s+/);

var IsBaiduWallet = test(/baiduwallet/);


你可能感兴趣的:(移动端优化)