给javascript标签添加 defer和async属性。
defer和async的区别是什么？
1、defer和async都是使script异步加载的意思，当都没有设置这个属性的时候，html的加载会被阻塞等着script加载完成和执行完成后再渲染页面。
2、当设置了async时，异步加载，一旦加载完成则阻塞html渲染，进行执行，而且如果有多个script标签则谁先加载完，谁先执行。
3、当设置了defer时，异步加载，不会阻塞html，待html渲染完毕后再进行script执行。
注意：ie只支持defer
一般有以下几种方式：
defer 属性
HTML 401 为 <script>标签定义了 defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。
在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。
<!DOCTYPE html><html><head><script src="test1js" defer="defer"></script><script src="test2js" defer="defer"></script></head><body> <!-- 这里放内容 --> </body></html>
说明：虽然<script> 元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。
defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。
2 async 属性
HTML5 为 <script>标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。
异步脚本一定会在页面 load 事件前执行。
不能保证脚本会按顺序执行。
<!DOCTYPE html><html><head> <script src="test1js" async></script><script src="test2js" async></script> </head><body> <!-- 这里放内容 --> </body></html>
4使用jQuery的getScript()方法
$getScript("outerjs",function(){//回调函数，成功获取文件后执行的函数consolelog("脚本加载完成")
});
5使用setTimeout延迟方法
6让JS最后加载
把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度
by三人行慕课
1．把 CSS 资源引用放到 HTML 文件顶部一般推荐将所有 CSS 资源尽早指定在 HTML 文档
中，这样浏览器可以优先下载 CSS 并尽早完成页面渲染。
2．JavaScript 资源引用放到 HTML 文件底部
JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。
3．尽量预先设定等大小
在加载大量的元素时，尽量预先限定的尺寸大小，否则在加载过程中会更新的排版信息，产生大量的重排
4．不要在 HTML 中直接缩放
在 HTML 中直接缩放会导致页面内容的重排重绘，此时可能会使页面中的其他 *** 作产生卡顿，因此要尽量减少在页面中直接进行缩放。
5．减少 DOM 元素数量和深度
HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。
6．尽量避免在选择器末尾添加通配符
CSS 解析匹配到 渲染树的过程是从右到左的逆向匹配，在选择器末尾添加通配符至少会增加一倍多计算量。
7．减少使用关系型样式表的写法
直接使用唯一的类名即可最大限度的提升渲染引擎绘制渲染树等效率
8．尽量减少使用 JS 动画
JS 直接 *** 作 DOM 极容易引起页面的重排
9．CSS 动画使用 translate、scale 代替 top、height
尽量使用 CSS3 的 translate、scale 属性代替 top、left 和 height、width，避免大量的重排计算
10．尽量避免使用 table、iframe
table内容的渲染是将 table 的 DOM 渲染树全部生成完并一次性绘制到页面上的，所以在长表格渲染时很耗性能，应该尽量避免使用它，可以考虑使用列表元素 ul 代替。尽量使用异步的方式动态添加 iframe，因为 iframe 内资源的下载进程会阻塞父页面静态资源的下载与 CSS 及 HTML DOM 的解析。
11．避免运行耗时的 JavaScript
长时间运行的 JavaScript 会阻塞浏览器构建 DOM 树、DOM 渲染树、渲染页面。所以，任何与页面初次渲染无关的逻辑功能都应该延迟加载执行，这和 JavaScript 资源的异步加载思路是一致的。
12．避免使用 CSS 表达式或 CSS 滤镜
CSS 表达式或 CSS 滤镜的解析渲染速度是比较慢的，在有其他解决方案的情况下应该尽量避免使用<php
echo date('h:i:s') "<br />";
//暂停 10 秒
sleep(10);
//重新开始
echo date('h:i:s');
>您好，这样的：
windowonload=function(){//页面加载后执行的函数
setTimeout(function(){
var newE = documentcreateElement("iframe");//创建iframe元素
newEsrc="1jpg";//设置新元素src属性值
var crea = documentbodyappendChild(newE);//为body添加子元素
},60000);//60000毫秒后执行
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）