异步执行脚本

异步执行脚本

script 元素的 async 属性可以使关联脚本相对于页面的其余部分进行异步加载和执行。 也就是说,在继续对页面进行解析的同时,在后台加载并执行脚本。如果页面使用了要占用大量处理时间的脚本,那么使用 async 属性可以显著提高页面加载性能。

async 属性。

async 属性是万维网联合会 (W3C)  HTML5 规范的一部分,它是为以下情形设计的:对于脚本不存在依赖关系,但是脚本仍需要尽快运行。在以下假设示例中,如果不使用 async(或 defer)属性,则脚本可能会阻止加载其他页面内容。

Lilah 有一个博客,其中使用了一些基于脚本的小工具。这些小工具可以增强访问者的体验,即使不加载它们中的任何一个,她的页面也仍然能正常工作(她想在支持用户的同时禁用脚本)。目前,她在其 HTML 文件的页首加载所有这些小工具,但她已经收到一些访问者的抱怨,反映她的网页加载时间过长,原因是脚本执行时间过于冗长。她试图将脚本移动到页面的底部以帮助提高页面加载速度,但由于页面上的内容太多,所以这种改变仍然不足以改善她的网站的访问体验。她真正想要的是让这些小工具尽可能快地加载,同时又不阻止页面上的其他内容。在快速搜索之后,她认识到 HTML5 的 async 属性正是她所需要的。通过将其所有基于脚本的小工具都置于一个外部文件中,她已经在性能和基于脚本的增强之间找到一种更加平衡的方法。

HTML

<head>
  <title>Lilah‘s Blog</title>
  <script async src="widgets.js"></script>
</head>

实现详细信息

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用对于 script 元素既支持 async 属性又支持 defer属性(早期版本的 Windows Internet Explorer 仅支持 defer 属性)。只有在提供了 src 属性时,才能使用 async 和defer 属性。以下是四种可能的组合。

用法 描述

<script src="widgets.js"></script>


立即执行脚本,页面等待脚本完成之后再继续解析。这会大大降低页面加载性能。


<script async src="widgets.js"></script>


异步下载脚本,同时页面继续解析。下载完成之后执行脚本。


<script defer src="widgets.js"></script>


在页面完成解析之后执行脚本。


<script async defer src="widgets.js"></script>


处理 async 属性,并忽略 defer 属性。这使开发人员能够在支持 async 的浏览器中使用它,但在不支持 async 的浏览器中依然使用 defer

总之,async 使 Web 开发人员能以最少的工作量来缩短页面加载时间。它还可以减少脚本加载程序库所要求的针对特定浏览器的解决方法的数量。

时间: 2024-08-25 06:25:15

异步执行脚本的相关文章

多线程异步执行脚本

获取远程计算机信息: $d=get-date $servers="10.4.34.41","10.4.34.40","10.4.34.36","10.4.34.37","10.4.34.39" $serverpass="Dell1950" $UserName="Administrator" #定义线程数量$throttleLimit = 5$SessionState

php 异步执行脚本

这里说的异步执行是让php脚本在后台挂起一个执行具体操作的脚本,主脚本退出后,挂起的脚本还能继续执行.比如执行某些耗时操作或可以并行执行的操作,可以采用php异步执行的方式.主脚本和子脚本的通讯可以采用外部文件或memcached的方式.原理就是通过exec或system来执行一个外部命令.注意:本文所述的是针对Linux环境. 在Linux下要让一个脚本挂在后台执行可以在命令的结尾加上一个 "&" 符号,有时候这还不够,需要借助nohup命令,关于nohup,可以参考http

异步执行js脚本——防止阻塞

JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaScript可以查询和修改DOM和CSSOM JavaScript的执行阻塞了CSSOM的执行 JavaScript 阻塞了DOM的形成,除非特殊声明js异步执行 js是一个同步语言可以修改网页的任何方面: <html> <head> <meta name="viewpo

php异步执行其他程序

这里的"其他程序",可能是linux命令,可能是其他的php文件. 网上说法有四种.分别为: 1.通过加载页面的时候通过ajax技术异步请求服务器 2.通过popen()函数 3.通过curl扩展 4.通过fscokopen()函数 说说我的看法! 通过ajax技术 不推荐 若需要异步执行的"程序"太过于耗时,而用户此时若关闭了浏览器的话,一般如果没有做什么特殊配置或者服务器端代码没有做特殊处理的话,服务器端的代码会终止执行.这就导致了这个"程序"

python 批量执行脚本(服务端和客户端建立TCP连接)

有很多开源的批量部署的工具可以使用,比如puppet, ansible , saltstack , chef . 但这些工具都有自己的一套语法规则,你得按照他的语法来编写程序,然后批量执行. 那有没有方法可以直接写bash 或者Python脚本,然后批量执行呢? 方法当然是有的,需要自己写程序来传输脚本,拷贝文件,再复杂点,可以自定义脚本式同步还是异步执行,自定义要执行的主机组,等等,需要根据自己的业务需要来想. 这里只是抛砖引玉,我采用建立socket(TCP)连接来批量执行脚本. 服务端脚本

PHP提权之异步执行

在服务器上都会定时运行一些脚本以完成周期性的任务. 而这些脚本往往是以root权限启动的, 替换或者改变其中的内容就可以完成提权.而今天在这要讲解的就是php提权中的异步执行方法. 在php中一般大家都用下面四个函数来调用系统命令,或者外部程序: <?echo exec("dir");echo shell_exec("dir");echo system("dir");echo passthru("dir");echo `

Celery框架实现异步执行任务

Celery 官方 Celery 官网:http://www.celeryproject.org/ Celery 官方文档英文版:http://docs.celeryproject.org/en/latest/index.html Celery 官方文档中文版:http://docs.jinkan.org/docs/celery/ Celery架构 Celery的架构由三部分组成,消息中间件(message broker).任务执行单元(worker)和 任务执行结果存储(task result

html5_延迟(defer)脚本与异步(async)脚本

延迟脚本: 诸如以下的html文档: <!Doctype html> <html> <head> <title>延迟脚本</title> <script src="defer.js"></script> </head> <body> <div id="target"></div> </body> </html>

celery异步执行任务框架

Celery 官方 Celery 官网:http://www.celeryproject.org/ Celery 官方文档英文版:http://docs.celeryproject.org/en/latest/index.html Celery 官方文档中文版:http://docs.jinkan.org/docs/celery/ Celery异步任务框架 """ 1)可以不依赖任何服务器,通过自身命令,启动服务(内部支持socket) 2)celery服务为为其他项目服务提