解决加载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 ...
随机推荐
- SDN实验---Ryu的应用开发(三)流量监控
一:实现流量监控 (一)流量监控原理 其中控制器向交换机周期下发获取统计消息,请求交换机消息------是主动下发过程 流速公式:是(t1时刻的流量-t0时刻的流量)/(t1-t0) 剩余带宽公式:链 ...
- Ajax验证
import javax.servlet.http.HttpServletRequest; import org.slf4j.Logger; import org.slf4j.LoggerFactor ...
- LwIP应用开发笔记之三:LwIP无操作系统UDP客户端
前一节我们实现了基于RAW API的UDP服务器,在接下来,我们进一步利用RAW API实现UDP客户端. 1.UDP协议简述 UDP协议全称是用户数据报协议,在网络中它与TCP协议一样用于处理数据包 ...
- coding git push 403 时
直接修改 项目目录下的 .git/config url url = https://coding用户名:coding密码@git.coding.net/coding账号/coding项目名称.gi ...
- centos7 中查看log_bin是否开启以及开启log_bin
1.查看是否开启的命名: 在mysql客户端执行:show variables like 'log_bin'; ON:代表开启 OFF:代表未开启 2. 开启log_bin 在配置文件vi ...
- Spring boot启动成功后输出提示
添加logback-spring.xml,将log输出到文件,控制台输出的level改为error因此只会出处banner src/main/resources/banner.txt的内容为 star ...
- Java并发之等待/通知机制
目录 1 前言 1.1 先来段代码放松一下 2 Object wait()/notify() 2.1 一段入门代码 2.2 问题三连击 a.为什么官方说wait() 要放在while里面? b.为什么 ...
- chrome的无头(headless)模式
chrome的无头(headless)模式 用selenium调用phantomjs浏览器的方式几乎可以爬取任何网站,但是与调用chrome相比,phantomjs的稳定性还是不够.如果能让chrom ...
- JVM的基本结构和JVM的内存结构
这里概要介绍一下JVM在启动后,作为操作系统的一个进程的基本结构,以及从操作系统角度看,JVM如何管理它从操作系统里申请来的内存的,也就是JVM的内存结构或者叫JVM内存模型. 1.JVM的基本结构 ...
- C++对象模型:单继承,多继承,虚继承,菱形虚继承,及其内存布局图
C++目前使用的对象模型: 此模型下,nonstatic数据成员被置于每一个类的对象中,而static数据成员则被置于类对象之外,static和nonstatic函数也都放在类对象之外(通过函数指针指 ...