移动端的300ms延时:css
300ms延时的主要缘由是双击缩放,即手指在屏幕上迅速点两下,iOS自带的浏览器会将网页缩放至原始比例。因此假如当用户点击一个连接时,浏览器不能当即肯定用户是否要打开这个连接仍是执行双击屏幕操做,因此iOS就等待300ms,以等待用户是否再次点击屏幕,并且如今几乎全部的移动端都有这个功能。前端
解决方案:ajax
添加viewpoint meta标签json
<meta name="viewport" content="width=device-width,initial-scale=1,minium-scale=1,maximum-scale=1,user-scalable=no /">跨域
前端性能优化:浏览器
①减小HTTP请求次数:缓存
根据须要尽量的去合并静态资源图片,JavaScript代码和css文件,减小页面请求次数,这样能够缩短页面首次访问的等待时间,除此以外也要尽可能避免重复资源,防止增长多余的请求。性能优化
②减小HTTP请求大小:服务器
对文件进行压缩优化,开启GZIP压缩传输内容,缩短网络传输等待延迟等等。cookie
③将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"