找回密码
 立即注册

QQ登录

只需一步,快速开始

当我们在页面中引入多个js文件时,从前的欣赏器会逐一下载这些js文件,也就是每个文件必须等前一个文件下载并实行完成之后,才气开始下载。
只管如今的欣赏器可以并行下载这些script标签,也就是当script标签在下载外部资源时,不会壅闭其他script标签,但是,js下载过程仍旧会壅闭其他资源的下载,如图片等。那么,题目来了,我们要怎么办理如许的题目呢,大概说,我们要怎么在页面加载js文件不会影响其他历程呢。
耽误脚本
<script>标签界说了一个defer属性,该属性指明本元素所含的脚本不会修改DOM,因此代码可以安全的耽误实行。当页面剖析到该<script>标签时开始下载,但不会立刻实行,直到DOM加载完成(onload变乱被触发前)。
动态添加脚本元素
我们可以利用尺度的DOM方法向页面动态添加<script>标签
t09963bZ3X9lN902.jpg
如许向页面中动态添加标签,js文件在该元素被添加到页面时开始下载,无论何时启动下载,文件的下载和实行都不会壅闭页面其他的历程。
利用动态脚本节点下载文件时,返回的代码会立刻实行(而不是等候全部动态脚本节点实行完毕), 但是今世码只包罗供页面其他脚本调用的接口时,就会出现题目。以是必须要确保脚本下载完成且预备停当。
下面这个函数实现了兼容IE和其他欣赏器的js文件动态添加
Hm7MMg6zsALSzgrz.jpg
我们可以将这段代码放在单独的js文件中(假设是load.js),然后在<body>标签闭合之前如许调用
aLNfLL59deVF5OCc.jpg
这种头脑很牛逼有木有。
只管如许照旧会下载load.js脚本,但它很小,而且实行也很快,以是对页面不会有太多的影响。
固然,也可以把loadScript()函数之间嵌入到页面,从而淘汰一次HTTP哀求。
总结一下可以优化脚本加载的方法:
1、在<body>标签闭合之前,将全部的<script>标签放到页面底部,如许可以包管脚本实行之前页面已经完成渲染
2、归并脚本。在页面中,<script>标签越少,加载越快。 //一样平常开辟最常用的
3、利用<script>标签的defer属性
4、动态创建<script>标签元素
分享至 : QQ空间
收藏

1 个回复

倒序浏览
其实互联网最难的是引流,我现在在观察引流脚本
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册