解决HTML加载时,外部js文件引用较多,影响页面打开速度问题
来源:互联网 发布:rsa算法原理 一 编辑:程序博客网 时间:2024/05/17 09:06
前言
通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的js文件数量过多,就会导致页面展示延迟。那么,在开发的过程中,改怎么解决呢?
首先,我们看一看传统中js加载的做法,所有的<script>元素都应该放在页面的<head>元素中,例如:
<!DOCTYPE html><html><head><title>HTML js应用</title><meta http-equiv="Content-type" content="text/html; charset=GBK"></meta><script type="text/javascript" src="example1.js"></script><script type="text/javascript" src="example2.js"></script></head><body><div><h1>好好学习,天天向上</h1></div></body></html>
这种做法的目的就是把所用的外部文件(包括CSS文件和js文件)的引用都放在相同的地方。可是,在文档的<head>元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容。而对于需要很多JavaScript文件的页面来说,无疑会出现页面展示延迟现象。下面我给出3种解决方案:
方案一、改变标签的位置
我们把<script>元素引用放在<body>元素中,如下例所示:
<!DOCTYPE html><html><head><title>HTML js应用</title><meta http-equiv="Content-type" content="text/html; charset=GBK"></meta></head><body><div><h1>好好学习,天天向上</h1></div><script type="text/javascript" src="example1.js"></script><script type="text/javascript" src="example2.js"></script></body></html>
这样,在解析包含的JavaScript代码之前,页面的内容将完全展示在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开的速度加快了。
方案二、在<script>元素中加延迟脚本
HTML4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面解析完成后再运行。因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。下面看代码实现:
<!DOCTYPE html><html><head><title>HTML js应用</title><meta http-equiv="Content-type" content="text/html; charset=GBK"></meta><script type="text/javascript" defer="defer" src="example1.js"></script><script type="text/javascript" defer="defer" src="example2.js"></script></head><body><div><h1>好好学习,天天向上</h1></div></body></html>
在这个例子中,虽然我们把<script>元素放在了文档的<head>元素中,但其包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行加载。
方案三、在<script>元素中加异步脚本
HTML5为<script>元素定义了async属性,这个属性与defer属性类似,都用于改变处理脚本的行为。async与defer类似,只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定它们的先后顺序执行。如下例:
<!DOCTYPE html><html><head><title>HTML js应用</title><meta http-equiv="Content-type" content="text/html; charset=GBK"></meta><script type="text/javascript" async src="example1.js"></script><script type="text/javascript" async src="example2.js"></script></head><body><div><h1>好好学习,天天向上</h1></div></body></html>注意:在XHTML文档中,要把async属性设置为async="async"。
转载请标明出处:
http://blog.csdn.net/mark_yangs/article/details/75246717
本文出自:【杨海波的博客】
阅读全文
0 0
- 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题
- 引用外部.css或.js文件的路径问题--jsp或html页面引用
- 引用外部.css或.js文件的路径问题--jsp或html页面或是在web项目中的引用
- 解决HTML外部引用CSS文件不生效问题
- 影响网站加载速度之外部资源文件分析
- 2016.12.9 js 加载过多 影响页面的加载速度
- Js加载广告,不影响网页的打开速度
- 如何让js调用不影响页面的加载速度
- 如何让js调用不影响页面的加载速度?
- 一次页面引用文件无法正确加载问题的解决
- html加载外部css、js的问题
- jenkins 生成引用外部CSS、JS的HTML无法打开
- html外部js文件引用其他js文件的函数
- JS延迟加载加快页面打开速度示例代码
- 解决myeclipse引用单独的js外部文件时中文编码问题(解决的是js文件本身编码问题)
- 关于AsyncTask影响文件列表加载速度的问题
- 解决 UIWebView 加载 html 时 js 加载不了的问题
- 用CSS/JS技巧优化HTML页面加载速度
- Git基本操作
- OpenSSL 1.1.0f 25 May 2017 OpenSSL 1.0.1e-fips 11 Feb 2013性能比较
- 函数
- Tomcat 7.0在Eclipse下安装与部署(上)
- 【DL--06】深度学习基本概念—batch
- 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题
- 贴片陶瓷电容材质NPO、C0G、X7R、X5R、Y5V、Z5U区别
- ACM 树的递归 Not so Mobile & The Falling Leaves
- 最长公共子序列LCS和最长子串SLCS
- https请求单向认证
- 使用远程线程注入的三个函数CreateRemoteThread、NtCreateThreadEx、RtlCreateUserThread
- CODEV和zemax tilt反射镜建立和对比3
- JMS之——ActiveMQ支持两种事务
- Recyclerview的一些个人理解与使用(七)Recyclerview的嵌套与增加删除