随着网站的发展,现在的网页已经离不开js,经常一个页面会引入大量的js。那么该如何合理的加载这些js?
head标签中引入js文件可能是最常见的一种方式,但是这样会造成一个问题。因为j可以说是浏览器中的霸主,换句话说在js的引入和解析过程中页面是不会进行加载和渲染的。那么如果js加载的时间过长,就会造成页面一段时间的空白,这样的用户体验无疑是很差的。下图是引入head中js和css时的加载过程。
从上图可以看到加载和解析每个js文件时都会耗费一定的时间,而这段时间不能同时进行别的事情,显然这种情况是不合理的,下面将介绍几种解决办法。
1.将所有<script>标签尽可能的放在靠近<body>的底部,这样js的加载将在页面渲染完后进行,不会造成页面空白的现象。
2.限制js文件的总数,尽量合并成js文件,下载一个100k的文件远比下载四个25k的文件要快。这一工作可以用打包工具实现,例如“Yahoo! combo handler”。
3.使用<script>的defer属性。defer属性是HTML4增加的东西,只在internet Explorer和fireFox 3.5以上版本才支持。defer 属性规定是否对脚本执行进行延 迟,直到页面加载为止。但是要确保<script>中的js不会改变文档的内容,也就是说没有document.write.
4.实现js的动态加载。例如可以将js的引入封装成一个函数,然后在页面加载完成后再调用函数,个人觉得这种方法太麻烦,但是有一些js库可能有封装好的方法。
5.使用XHR注入,也就是Ajax技术动态请求,这种方法的优点是你可以下载不立即执行的JavaScript代码,等需要执行时,代码都已经下载完成,可以直接使用,缺点是请求js文件必须在同一个域。
总结:以上五种方法可能最常用的也就是前两种,刚开始刻意要求自己做到前两点,养成习惯后就会觉得顺理成章。