解决加载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 ...
随机推荐
- C++ Set运用实例
C++ Set运用实例 #include <iostream> #include <set> #include <algorithm> #include <i ...
- Nexus上传npm包
1.创建npm仓库 私服仓库npm-hosted 代理仓库npm-proxy npm-group 创建成功 在工程的根目录下创建文件 .npmrc registry=http://xxx:8081/n ...
- shell基础知识6-在不按回车键的情况下读入N个字符
Bash命令 read 能够从键盘或标准输入中读取文本.我们可以使用 read 以交互的形式读取用 户输入,不过 read 能做的可远不止这些.编程语言的大多数输入库都是从键盘读取输入,当回 车键按下 ...
- BeetlConfiguration扩展配置
beetl拓展配置类,绑定一些工具类,方便在模板中直接调用 BeetlConfiguration.java public class BeetlConfiguration extends BeetlG ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器软件正式环境安装部署攻略
背景介绍 EasyDSS流媒体服务器软件,提供一站式的转码.点播.直播.时移回放服务,极大地简化了开发和集成的工作.其中,点播功能主要包含:上传.转码.分发.直播功能,主要包含:直播.录像, 直播支持 ...
- Grammar01 语法七要素之一_词类
1 词类 1.1 词类表格 实词 名词 -> n. -> noun -> 给所有人和物命名的词. 动词 -> v. (vt. vi.) -> verb ( transit ...
- 编译器的系统include路径查询
环境:Ubuntu 18.04.3 LTS 以 aarch64-linux-gnu-gcc 为例,运行如下命令: echo "main(){}" | aarch64-linux-g ...
- Linux内核参数详解
所谓Linux服务器内核参数优化(适合Apache.Nginx.Squid等多种web应用,特殊的业务有可能需要做略微调整),主要是指在Linux系统中针对业务服务应用而进行的系统内核参数调整,优化并 ...
- js实现html表格<td>标签中带换行的文本显示出换行效果
遇见问题 如下内容中我写了几行,但是表格中并未按行显示,换行符反而变成了空格,于是想自己转换下 思考问题 1.可以看到表格的内容是后端传来的数据,于是想直接在后端转换下,把换行符替换成<br&g ...
- day53——标签操作
day53 今日内容 标签操作 值操作 取值: 文本输入框:$('#username').val(); input,type=radio单选框: $('[type="radio"] ...