1、使用 touchstart 代替 click
由于移动端屏幕的设计， touchstart 事件和 click 事件触发时间之间存在 300 毫秒的延时，所以在页面中没有实现 touchmove 滚动处理的情况下，可以使用 touchstart 事件来代替元素的 click 事件，加快页面点击的响应速度，提高用户体验。但同时我们也要注意页面重叠元素 touch 动作的点击穿透问题。
//不推荐
$('body').on('click','.btn',function(e){
console.log(this);
});
//推荐
$('body').on('touchstart','.btn',function(e){
console.log(this);
});
2、不滥用 float
在 DOM 渲染树生成后的布局渲染阶段，使用 float 的元素布局计算比较耗性能，所以尽量减少 float 的使用，推荐使用固定布局或 flex-box 弹性布局的方式来实现页面元素布局。
1、使用 touchstart 代替 click 由于移动端屏幕的设计， touchstart 事件和 click...
上一篇讲了PC端的部分：前端性能优化（PC端），这次继续说移动端的。相对于PC端的，移动web浏览器上有一些明显的...
移动端Web界面滚动性能优化 Passive event listeners 最近更新了ios11.3,项目上发现...
上期文章分享了PC端的web兼容测试，本期我们通过调研移动端web的特性和移动端浏览器特性，进一步探讨Web移动端...
前言 自JavaScript诞生以来，前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向，Web...
新的征程 web前端介绍 web前端开发做什么 pc端web开发；移动端web开发；混合app开发；网页游戏/移动...
前言 不论是在移动端还是前端，web缓存（Http缓存）都是很重要的一部分。在移动端，对于用户流量控制的优化，we...
时间：2017-03-27 18:02:47 该文章为 《HTML5缓存机制浅析：移动端Web加载性能优化》 ...
移动Web优化专场主要讲在移动设备上如何优化H5，使得Web运行的性能能够尽可能的接近Natvie。 QQ移动页面...
若web前端到达了瓶颈，如何冲出重围? 移动端汇总 腾讯移动web知识库移动前端开发指南移动端上遇到的各种坑移动端...
本文标题：Web移动端优化
本文链接：https://www.haomeiwen.com/subject/rvtuiftx.html
网友评论