高性能js之js文件的加载与解析
随着网站的发展,现在的网页已经离不开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文件必须在同一个域。
总结:以上五种方法可能最常用的也就是前两种,刚开始刻意要求自己做到前两点,养成习惯后就会觉得顺理成章。
最新文章
- 从scheduler is shutted down看程序员的英文水平
- Ajax状态值及状态码
- <;!DOCTYPE>;标签的定义与用法
- C/S love自编程序
- 6.9	 Android 优缺点
- Java——再看IO
- css解决方案经验杂记
- JDBC第四次学习
- cocos2d-x入门笔记(1)
- vs自带服务测试工具
- JQuery的几种页面加载完执行三种方式
- [LeetCode#201] Bitwise AND of Numbers Range
- 关于Tcp三次握手的思考
- 自动生成XML空节点格式的差异
- Ubuntu15.04上为火狐浏览器安装Adobe Flash Player插件
- 浅谈BFC与应用
- Java日期工具类,Java时间工具类,Java时间格式化
- Dynamics 365支持的语言(中文语言名/英文语言名)列表
- Python IO编程
- tcpdump完全指南
热门文章
- python5数据存储
- MVC默认提供了一个异常过滤器 HandleErrorAttribte特性
- springboot解决跨域
- 解决";Microsoft Visual C++ 14.0 is required";的问题
- github gist 查看html
- 企业实践 | 如何更好地使用 Apache Flink 解决数据计算问题?
- 硬币问题 (dp,多重背包的二分优化)
- Database基础(七):部署集群基础环境、MySQL-MMM架构部署、MySQL-MMM架构使用
- bash: service: command not found 错误的解决方法
- 2019 牛客暑期多校 B	generator 1 (矩阵快速幂+倍增)