解决加载WEB页面时,由于JS文件引用过多影响页面打开速度的问题
1、一般做法
一般我们会把所有的<script>元素都应该放在页面的<head>标签里,但由于是顺序加载,因此只有当所有JavaScript代码都被依次下载、解析和执行完之后,才开始加载<body>标签里面的内容。
2、把<script>标签放在<body>标签最后面
这样会先加载、解析页面元素,而后再加载JS代码,直观表现上就是页面打开速度有所提升。当然需要注意的是,如果页面需要用到某个JavaScript文件,那这个JS文件的引用还是需要放在页面元素之前,如放在<head>标签里。
3、加defer属性
在<script>标签中加入defer属性,该defer属性相当于告诉浏览器立即下载脚本,但延迟执行。脚本会在整个页面元素解析完成后再运行。
4、加async属性
在<script>标签中加入async属性,该属性与defer属性类似,相当于告诉浏览器立即下载脚本,但是是异步下载,下载顺序不确定,执行速度也不确定。
这个属性可用于在网络不通的环境下,需要引入某个互联网脚本资源的时候,依然可以快速打开页面,这样不至于因为个别脚本访问不到而阻塞后面资源的请求。
解决加载WEB页面时,由于JS文件引用过多影响页面打开速度的问题的更多相关文章
- 图片_ _Android有效解决加载大图片时内存溢出的问题 2
Android有效解决加载大图片时内存溢出的问题 博客分类: Android Android游戏虚拟机算法JNI 尽量不要使用setImageBitmap或 setImageResource或 Bit ...
- Android开发中如何解决加载大图片时内存溢出的问题
Android开发中如何解决加载大图片时内存溢出的问题 在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...
- Android有效解决加载大图片时内存溢出的问题
首先,您需要了解一下,图片占用内存的计算方法,传送门:http://blog.csdn.net/scry5566/article/details/11568751 尽量不要使用setImageBitm ...
- 判断不同浏览器,加载不同的css和js文件
在低版本的IE中,条件注释还有效果,但是在ie9,10,11浏览器中,条件注释不起作用. 在网上找了个校验ie的方法. function isIE(){ if (window.ActiveXObje ...
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
原文链接: http://www.bubuko.com/infodetail-671521.html
- 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题
解决HTML加载时,外部js文件引用较多,影响页面打开速度问题 通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的j ...
- C# Winform 加载窗体/对象时的等待页面设计
在设计应用程序过程中,有时候加载对象需时较长,我们可以显示一个Loading等待页面,对用户来说就比较友好了. 这个还是涉及到多线程,下面是步骤. 一.创建好Loading窗体: 一个Panel用于显 ...
- 在页面所有元素加载完成之后执行某个js函数
在页面所有元素加载完成之后执行某个js函数 http://lgscofield.iteye.com/blog/1884352
- 使用 PDBDownloader 解决 IDA 加载 ntoskrnl.exe 时符号不完全问题
解决 IDA 加载 ntoskrnl.exe 时符号不完全问题 1. 问题:IDA加载xp系统的 ntoskrnl.exe 加载不完全. 2. 尝试过但未成功的解决方案: 1)配置好的IDA的 pdb ...
随机推荐
- (转载)基于比较的少样本(one/few-shoting)分类
基于比较的方法 先通过CNN得到目标特征,然后与参考目标的特征进行比较. 不同在于比较的方法不同而已. 基本概念 数据集Omniglot:50种alphabets(文字或者文明); alphabet中 ...
- Redist的主从配置
Redis的主从复制一般用来在线备份和读写分离,提高服务器的负载能力.主数据库主要进行写操作,而从数据库负责读操作. 主从的配置: 主节点: [root@master ~]# grep -v -E & ...
- 上传下载execl
ajax上传execl + easyexecl解析execl <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- java Random 随机重排
将一个数组或序列随机重新排列. /** * Created by xc on 2019/11/23 * 随机重排 */ public class Test7_7 { public static voi ...
- Centos7快速安装Rancher
通过docker,我们可以快速安装rancher 安装步骤如下:[root@localhost ~]# #run运行,-d后台模式 --restart=always跟随docker启动,-p映射端口, ...
- Linux——xargs命令学习
有时候我们会遇到需要将指定命令返回结果进行处理的情况 这种情况下,可能就需要写for循环之类的脚本进行处理了(目前我只能想到这种方法) 但是想起来还有一个xargs命令,组合这个命令就比较省事了. 场 ...
- [数据结构 - 第6章] 树之二叉排序树(C语言实现)
一.什么是二叉排序树? 对于普通的顺序存储来说,插入.删除操作很简便,效率高:而这样的表由于无序造成查找的效率很低. 对于有序线性表来说(顺序存储的),查找可用折半.插值.斐波那契等查找算法实现,效率 ...
- opencc介绍
1.什么是opencc? Open Chinese Convert(OpenCC)是一个开源的中文简繁转换项目,致力于制作高质量的基于统计预料的简繁转换词库.还提供函数库(libopencc).命令行 ...
- PHP防止刷微信红包方法
PHP防止刷微信红包方法1 输入验证码2授权登陆后 领取红包记录下 openid ip 第二次用openid或者ip(ip)连接同一个路由器是一样的 所以用ip 判断最好是判断有没有6个以上 判断有没 ...
- Python怎么去写单元测试用例去测试hello world呢
逛着博客园,看到乙醇大佬的一篇随笔 https://www.cnblogs.com/nbkhic/p/9370446.html,于是就在想怎么测试这句hello world print('hello ...