前端开发注意事项

优化

1，页面中使用了大量图片和音频文件的，可以使用CND加速，托管七牛，腾讯云等
2，图片压缩，降低图片分辨率，高分辨比文件大小更影响页面加载速度
3，框架文件可以使用Application Cache 应用缓存
4，动画页面可以使用link标签rel="prefetch"预加载文件
5，压缩文件
6，大量的请求会导致加载过慢，使用雪碧图或合拼请求等

scroll优化

will-change: scroll-position;
启用gpu等待优化
-webkit-overflow-scrolling: touch;
启用滑动回弹效果

安卓图片默认事件和菜单问题解决

img{
-webkit-touch-callout:none;/系统默认菜单被禁用/
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;/用户是否能够选中文本/
}
使用css清除图片预览事件
使用js清除默认事件
e.preventdefault()

ios兼容问题

1），使用fiexd注意事项，如果使用fiexd定位来弹出输入事件，ios会导致整体页面上移，点击事件偏移原来位置，需要使页面滚动会原来位置点击事件或其他事件才会回到原位
$(document).on(‘focus blur’, ‘input’, function () {
$(‘body, html’)[0].scrollTo(0, $(‘body’).height());
window.scrollTo(0, 0);
})
可以使用类似以上代码让页面滚动回来。

2），安卓端在图片上做事件时，默认会有图片预览功能，要先清除默认事件，如
$(document).on(‘click’, ‘img’, function (e) {
e.preventDefault();
});

可以清除默认事件，或使用css清除

3），使用长按事件，会默认弹出菜单，需要清除默认弹出事件
img{
-webkit-touch-callout:none;/系统默认菜单被禁用/
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;/用户是否能够选中文本/
}

4），网速慢时需要给http请求事件做限制，防止重复请求，导致加载更慢