js延迟加载优化页面响应速度
网页打开速度是衡量网站性能的一个极为重要的指标，今天就来说说如何通过JS延迟加载的方式提高页面响应速度：
JS延迟加载的
含义：即等页面加载完成之后再加载 JavaScript 文件。
作用：JS延迟加载有助于提高页面加载速度。
途径：
1. defer 属性
HTML 4.01 为 <script>标签定义了 defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。
在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。
说明：虽然<script> 元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。
注：defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。
2. async 属性
HTML5 为 <script>标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。
异步脚本一定会在页面 load 事件前执行。
不能保证脚本会按顺序执行。
async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。
缺点：不能控制加载的顺序
3.动态创建DOM方式
//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
varelement = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener){
window.addEventListener("load",downloadJSAtOnload, false);
}
else if (window.attachEvent){
window.attachEvent("onload",downloadJSAtOnload);
}
else{
window.onload =downloadJSAtOnload;
}
</script>
4.使用jQuery的getScript()方法
$.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
console.log("脚本加载完成")
});
5.使用setTimeout延迟方法
6.让JS最后加载
把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度
最后：个人认为最后一种是最方便的啦，你觉得呢？
js延迟加载优化页面响应速度的更多相关文章
- VUE项目性能优化实践——通过懒加载提升页面响应速度
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...
- 关于js延迟加载（异步操作）的方式
一.概述 最近重新开始学习js,在第一章的一个小节里写到了“脚本调用策略”,书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js文件写在head里, ...
- 应用r.js来优化你的前端
r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用 ...
- js性能优化-事件委托
js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...
- Lazyr.js – 延迟加载图片（Lazy Loading）
Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
- python操作三大主流数据库(5)python操作mysql⑤使用Jinja2模板提取优化页面展示
python操作mysql⑤使用Jinja2模板提取优化页面展示 在templates目录下的index.html.cat.html等页面有一些共同的元素,代码比较冗余可以使用模板提取公共代码,在各网 ...
- Angular.js中处理页面闪烁的方法详解
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
- js 性能优化 篇一
JS性能优化 摘自:http://www.china125.com/design/js/3631.htm 首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...
- 13. js延迟加载的方式有哪些
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件. JS延迟加载有助于提高页面加载速度. 一般有以下几种方式: 1)defer 属性 <script src=&q ...
随机推荐
- [iOS笔试600题]一、语法篇（共有147题）
[A]1. @property 的作用是申明属性及真特性?［判断题］ A.正确 B.错误 [A]2. @synthesize的作用是自动笠成属性的访问器(getter/setter)方法?［判断题］ ...
- Python 的 GIL 是什么鬼，多线程性能究竟如何
作者:卢钧轶(cenalulu) 本文原文地址: http://cenalulu.github.io/python/gil-in-python/ 前言:博主在刚接触Python的时候时常听到GIL这个 ...
- python 第一天学习(画个正方体)
import turtleturtle.goto(200,0)turtle.goto(200,200)turtle.goto(0,200)turtle.goto(0,0)turtle.penup()t ...
- webpack+vue中安装使用vue-layer弹窗插件
1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原 ...
- Saiku 系列
1.Saiku2.6 Saiku315 链接SQL的JDBC字符串 2.Saiku2.6 配置数据源 3.Saiku2.6 保存查询后,重新打开报 Error Loading Query错误. 4.C ...
- 用 diff 比较两个 hdfs 文件内容
diff <(hadoop fs -cat /path/to/file) <(hadoop fs -cat /path/to/file2)
- 那些H5用到的技术（6）——屏幕适配
前言长屏适配单页适配参考 前言 曾经屏幕适配一直是个头疼的问题,各种坑,各种浏览器&设备兼容问题,好在的是,随着技术&标准的不断发展,这个问题得到了极大程度的解决,这篇文章主要对之前开 ...
- WCF系列教程之客户端异步调用服务
本文参考自http://www.cnblogs.com/wangweimutou/p/4409227.html,纯属读书笔记,加深记忆 一.简介 在前面的随笔中,详细的介绍了WCF客户端服务的调用方法 ...
- Jmeter 建立数据库测试计划
建立数据库测试计划(Building a Database Test Plan) 在本节中,将学习如何创建测试数据库服务器一个简单的测试计划.您将创建五十个用户向数据库服务器发送2个SQL请求.并且, ...
- Scrum 冲刺博客第七篇
一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 对排行榜的界面和功能进行初步设计 今天计划完成的工作 重新对界面进行美化 ...