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/);