这个ajax请求，几秒钟的延迟时间正常范围，它步运行的，对页面的不会造成直接影响。从图片中可看出，它的加载时间为138ms，不算长啊，后面的4.84s是它等待服务器返回数据的时间，在这段时间里，页面的其他元素是继续加载的，不会受影响。所以这个4.84s是不算在首页加载时间内的。就好比一个体育赛事直播的网页，它的比分一般都是通过ajax异步方式定时刷新的，而这个刷新的时间并不算在页面的加载时间内，因为这时候页面早就加载完毕了。
当然，这个4.84s的时间长短，是由多种因素造成的，比如电脑性能、网络状态等，但最大的影响因素通常都是后台数据库的查询速度，通过优化可以大大缩短这个查询时间。
如何优化网站性能，提高页面加载速度
c42abe5799143f7e118b6903c5d210f1.png
提升页面加载速度
1、图片大小越小打开速度越快
2、网页中代码不要臃肿所以不要有无用代码
3、js css使用外部引入
4、如果js css 不是显示用户看到的信息 而是一些特效的话放在最后加载。
怎样提高页面加载速度，论优化页面的过程
a82ba7b0082a37426238a85f636a6646.png
1、精简：去掉html页面不必要的空格释，尽量将script和css写在外部文件
可以借用第三具对页面进行加
2、减少文件数量减少页面上引用的文件数量可以减少HTTP连接数许多JavaScript、CSS文件可以合并最好合并，人家财帮子都把自己的JavaScript.functions和Prototype.js合并到一个base.js文件里去了
3、减少外部域名文件的引用
4、优化页面元素加载顺序例如：首先加载页面最初显示的内容和与之相关的JavaScript和CSS，不需要的图片文件放到后面加载，或者引用延迟加载的js
5、减少页面中inline和JavaScript的数量
6、不要在table标签中嵌套table标签，不过现在基本上都用div+css了，HTML5也出来了。
7、检查页面是否有js错误，或者空引用(检查页面有没有502错误)，有没有
从上到下运行，先解析head标签中的代码，（1）head标签中会包含一些引用外部文件的代码，从开始运行就会下载这些被引用的外部文件
当遇到script标签的时候
浏览器暂停解析（不是暂停下载），将控制权交给JavaScript引擎（解释器）
如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行，执行完毕后将控制权交给浏览器渲染引擎
（2）当head中代码解析完毕，会开始解析body中的代码
如果此时head中引用的外部文件没有下载完，将会继续下载
浏览器解析body代码中的元素，会按照head中声明一部分样式去解析
如果此时遇到body标签中的<script>，同样会将控制权交给JavaScript引擎来解析JavaScript
解析完毕后将控制权交还给浏览器渲染引擎。
当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后，css会重新渲染整个页面的html元素。
（3）按照之前的描述，<script>写到body标签内靠后比较好，
因为JavaScript 会 *** 作html元素， 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素
但是我们经常将<script>写到head中，body中不会有大量的js代码，body中的html代码结构会比较清晰
window.onload： 等待页面中的所有内容加载完毕之后才会执行
$(document).ready()： 页面中所有DOM结构绘制完毕之后就能够执行
可以这样理解：window.onload 和 $(document).ready()/$(function(){})相当于 写在body 内 最靠后的<script>代码段
ios上plus是一直存在的，不涉及等ready事件。但安卓上还是需要等plus ready。在安卓环境中，通常情况下需要html页面解析完成后才会让5+ API生效，安卓的执行的顺序为：
1. 加载html页面,loading
2. 解析html页面（解析title节点、下载script/link等节点引用的资源，如js/css文件）
3. 触发DOMContentLoaded事件
4. 触发plusready事件
此文对执行顺序有详细描述：http://ask.dcloud.net.cn/article/571
我们总是在不停追求性能优化，生效时间越早，我们可以把app的体验做的更好。
在HBuilder7.5版本之后安卓版支持提前注入5+ API，可以在plusready事件触发之前调用5+ API， *** 作方法是在页面中添加以下节点：
<script src="html5plus://ready"></script>，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>HTML5+ API</title>
<script src="html5plus://ready"></script>
<script type="text/javascript" charset="utf-8">
// 这里可以调用5+ API了，为了更好的兼容性，应该使用以下代码进行判断
if(window.plus){
// 在这里调用5+ API
}else{// 兼容老版本的plusready事件
document.addEventListener('plusready',function () {
// 在这里调用5+ API
},false)
}
</script>
</head>
<body>
Hello HTML5 plus
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）