1.精简CSS和JS,减少空格,换行符,尽量合并文件,JS导入时需要发送GET请求。
2.延迟加载和执行非必要脚本,这些脚本可以在onload事件之后执行,避免对网页上重要内容的呈现造成影响。
3.使用AJAX
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页面。
4.延迟显示可见区域外的内容
插入js文件:
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
js部分:
<script>
$(function() {
//使用了data-original就不要写src了,要不然没有效果
//在没有完全获取到图片的资源前,是得不到图片的宽高的,所以预先设置宽高,让它提前有个占位
$('.img1').lazyload({
threshold: 200,//滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
effect: 'fadeIn',//show fadeIn slideDown
//placeholder: '',//设置加载中的占位图片路径,如image.load.gif,个人建议不设置,可以通过css设置背景图片加提前设置src=reload.gif的方式,来达到图片正在加载中的效果
container: $(".a3"),//如果是滚动某个div,一定要在这里设置
});
});
</script>
只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这样很明显提升可见区域的加载速度,提高用户体验。
5.使用 CSS Sprites 对图片优化
简单的说就是”利用 CSS background 相关元素进行背景图绝对定位”,把多次HTTP 调用变为一次调用。
慢慢补充~