JavaScript 文件延迟和异步加载
JavaScript 文件延迟和异步加载
—般情况下，在文档的 <head> 标签中包含 JavaScript 脚本，或者导入的 JavaScript 文件。
这意味着必须等到全部 JavaScript 代码都被加载、解析和执行完以后，才能继续解析后面的 HTML 部分。
如果加载的 JavaScript 文件很大， HTML 文档解析就容易出现延迟。
为了避免这个问题，在开发 Web 应用程序时，建议把导入 JavaScript 文件的操作放在 <body> 后面，让浏览器先 将网页内容解析并呈现出来后，再去加载 JavaScript 文件，以便加快网页响应速度。
延迟执行 JavaScript 文件
<script> 标签有一个布尔属性 defer ，设置该属性能够将 JavaScript 文件延迟到页面解析完毕后再运行
<script type="text/javascript" defer src="test.js"></script>
注意：defer 属性适用于外部 JavaScript 文件，不适用于 <script>签包含的 JavaScript 脚本。
异步加载 JavaScript 文件
在默认情况下，网页都是同步加载外部 JavaScript 文件的，如果 JavaScript 文件比较大， 就会影响后面 HTML 代码的解析。
上面提到一种解决方法：就是最后加载 JavaScript 文件。
现在可以为 <script> 标签设置 async 属性，让浏览器异步加载 JavaScript 文件，即在加载 JavaScript 文件时，浏览器不会暂停，而是继续解析。
这样能节省时间，提升响应速度。
<script type="text/javascript" async src="test.js"></script>
async 是 HTML5 新增的布尔型属性，通过设置 async 属性，就不用考虑 <script> 标签的放置位置，用户可以根据习惯继续把很多大型 JavaScript 库文件放在 <head> 标签内。
JavaScript 文件延迟和异步加载的更多相关文章
- JS文件延迟和异步加载：defer和async属性
-般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件.这意味着必须等到全部 JavaScript 代码都被加载.解析和执行完以 ...
- 转:web前端面试题合集 (Javascript相关)（js异步加载详解）
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- HTML5 <script>元素async,defer异步加载
原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...
- Python 爬取异步加载的数据
在我们的工作中,可能会遇到这样的情况:我们需要爬取的数据是通过ajax异步加载的,这样的话通过requests得到的只是一个静态页面,而我们需要的是ajax动态加载的数据! 那我们应该怎么办呢??? ...
- Javascript 文件的同步加载与异步加载
HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面b ...
- 页面异步加载javascript文件
昨天听一同事说的异步加载js文件,可以提高页面加载速度.具体方法如下:(function() { var ga = document.createElement('script'); ga.type ...
- 26、首先通过javascript包的异步加载来学习echarts包的结构
1.在这里先写一写前言,今天在公司搞定了一个对于滚动条进行定位的case,明天开始做TestManagement. 首先大家先来一起看一看流行的javascript文件的加载方式,这里采用别人博客上的 ...
- Javascript 异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- 不得不说的JavaScript异步加载
同步加载的问题 默认的js是同步加载的,这里的“加载”可以理解成是解析.执行,而不是“下载”,在最新版本的浏览器中,浏览器对于代码请求的资源都是瀑布式的加载,而不是阻塞式的,但是js的执行总是阻塞的. ...
随机推荐
- 【Fine学习笔记】Jmeter笔记
熟悉几个专有名词: 1.测试计划是顺序执行的,一个性能测试必须有的三部分:测试计划.线程组.sampler(采样器)--核心 2.控制器(用来定义请求执行的):loop if else 3.timer ...
- [原]SVN代码管理
1.SVN工程结构 branches zhangsan lisi wangwu tags project-release trunk project-trunk branches:下为trunk的分支 ...
- win10 安装"pip install orange3" 出现LINK : fatal error LNK1158: cannot run 'rc.exe' 错误的解决办法
解决办法: 从(本例使用的是64位的python3.6 注意:如果python的版本是32位,则使用x86:如果是64位,则使用x64;) 复制一下两个文件 rc.exe rcdll.dll 到
- 基于Struts2+Hibernate开发小区物业管理系统 附源码
开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+MySql数据库 运行效果图: 源码及原文链接:https://javadao.xyz/forum.php?mo ...
- DHT协议网络爬虫磁力链接和BT种子搜索引擎
系统功能和用到的技术. 系统包括几个独立的部分: 使用 Python 的 Scrapy 框架开发的网络爬虫,用来爬取磁力链接和种子: 使用 PHP CI 框架开发的简易网站: 搜索引擎目前直接使用的 ...
- Ubuntu中安装pycharm
1.首先在官网上下载pycharm 2.下载完成后解压,进入到解压文件夹里的bin,找到pycharm.sh 3.使用终端启动:sh pycharm.sh 4.关于破解: 通过命令打开hosts:cd ...
- linux jar 启动shell 脚本
#!/bin/bash APP_NAME=/data/wwwroot/app.jar #使用说明,用来提示输入参数 usage() { echo "Usage: sh app.sh [sta ...
- Maven打包项目失败；报错：Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war (default-war) on project Hello: Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/we
报错信息: E:\MIKEY\mikey\HTML5\TestMaven_01>mvn package [INFO] Scanning for projects... [INFO] [INFO] ...
- 【原】nginx配置文件
一:下载nginx方式 1.yum install nginx 2.源码安装 二:学习网址 nginx documentation — DevDocs 三:配置文件信息 server { listen ...
- 各颜色LED压降
一下是参考1.直插LED压降红:2.0-2.2V黄:1.8-2.0V绿:3.0-3.2V 额定电流约20mA.2.贴片LED压降红:1.82-1.88V,电流5-8mA绿:1.75-1.82V,3-5 ...