移动端的300ms延时:
300ms延时的主要原因是双击缩放,即手指在屏幕上迅速点两下,iOS自带的浏览器会将网页缩放至原始比例。所以假如当用户点击一个链接时,浏览器不能立即确定用户是否要打开这个链接还是执行双击屏幕操作,所以iOS就等待300ms,以等待用户是否再次点击屏幕,而且现在几乎所有的移动端都有这个功能。
解决方案:
添加viewpoint meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,minium-scale=1,maximum-scale=1,user-scalable=no /">
前端性能优化:
①减少HTTP请求次数:
根据需要尽可能的去合并静态资源图片,JavaScript代码和css文件,减少页面请求次数,这样可以缩短页面首次访问的等待时间,除此之外也要尽量避免重复资源,防止增加多余的请求。
②减少HTTP请求大小:
对文件进行压缩优化,开启GZIP压缩传输内容,缩短网络传输等待延迟等等。
③将css和js放到外部文件中,使用<link hrref="">和<script src="">,在外部进行引入
④为HTML指定Cache-Control或者Expires,可以将HTML内容缓存起来,避免频繁向服务器发送请求,缓存之后浏览器会直接从缓存读取内容,不向服务器发送请求。
<meta http-equiv="Cache_control" content="max-age=7200">
<meta http-equiv="expires" content="Wed ,20 July 2018 10:29:00 GMT">
⑤减少页面的重定向
⑥静态资源不同域名存放:
浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的,因此可以有多个域名的主机来存放不同的静态资源,增大页面加载时资源的并行下载数。
⑦使用可缓存的Ajax , 合理使用ajax能加快ajax响应速度并减少服务器压力
$.ajax({
url:url,
dataType:‘json‘,
cache:true,
success:function(data){
}
})
⑧合理使用get请求
POST请求会首先发送文件头,然后发送HTTP正文的数据。而使用get只发送头部,做一在获取数据时使用get请求效率要高
⑨减少cookie的大小并进行cookie隔离
因为HTTP请求默认会带上浏览器端的cookie一起发送给服务器端,所以在不必要的情况下要尽量减少Cookie。
对于静态的资源,尽量使用不同的域名存放,因为Cookie默认是不能跨域的,这样就会做到不同域名下静态资源请求的Cookie隔离。
页面渲染类的前端优化
①css文件放在页面的头部,JavaScript文件放在页面的底部
②减少DOM元素数量和深度
尽量避免使用table,iframe等慢元素,table的DOM渲染是全部生成完并一次性绘制到页面上,所以长表格渲染是很耗性能,可以考虑用ul代替。
尽量使用异步的方式动态加载iframe,因为iframe内资源的下载进程会阻塞父页面静态资源的下载以及HTML中DOM的解析。
页面重定向的几种方法:
JS实现页面重定向:
window.location.href=c
window.history.back(-1) //后退一步并刷新
window.navigate("http:www.baidu.com")
self.location="http:www.baidu.com"
原文地址:https://www.cnblogs.com/fanfan0916/p/9389791.html