利用defer关键字让网页中的javascript推迟执行

我们有时候会在网页中的<script>段中看到defer关键字,那么它到底是派什么用处呢?

defer从字面意思上来看就是延迟,推迟的意思。它的目的在于:

让浏览器在下载脚本的时候就不必立即对其进行处理,而是继续对页面进行下载和解析,

等到全部页面下载完成后执行JS脚本。这样做有时候能够提高下载的性能。

那么defer的应用有什么呢?

 

我们经常会用innerHTML来动态给DOM元素加载JS,比如:
object.innerHTML = "<script" + ">"..."</script" + ">";
但是当你调用你这个新定义的动态JS经常会出错,说还未定义,

解决方法是给<script>加上defer。

在下面的代码中你可以试下把 defer去掉程序就会出错:

<HTML>
    
<SCRIPT>
    function insertScript(){
        var sHTML = "<input type=button onclick=myAlert()" + " value='Click Me'><BR>";
        var sScript="<SCRIPT defer>";
        sScript = sScript + "function myAlert() { alert('Hello Javascript!') }";
        sScript = sScript + "</SCRIPT" + ">";
        ScriptDiv.innerHTML = sHTML + sScript;
    } 
</SCRIPT>

<BODY onload="insertScript();">
<DIV ID="ScriptDiv"></DIV>
</BODY>

</HTML>

 

时间: 2024-08-01 20:31:49

利用defer关键字让网页中的javascript推迟执行的相关文章

软件开发-安卓,jsoup,解析网页中的javascript的内容,提取信息

问题描述 安卓,jsoup,解析网页中的javascript的内容,提取信息 开发-安卓,jsoup,解析网页中的javascript的内容,提取信息-jsoup解析javascript"> 这个是网页地址:http://www.bilibili.com/mobile/subchannel.html#tid=33 以下是抓取到的网页源码,以图片发出,实在不好意思了,可是好像因为这个而发不出来了,现在安全起见还是以图片的形式发出,或者可以上该链接获取,我是用ie仿真为windows phon

网页中JS函数自动执行常用三种方法_javascript技巧

本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下 一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: <body onload="myfunction()"> <html> <body onload="func1();func2();func3();"> </body> </html> 2.在JS语句调用: <script type="text

SEO知识:谈谈关键字在网页中得表现和分布

        当选取了某个关键字,需要把关键字融入到网页中,透过这种信息,才能告诉搜索引擎,这张网页与某关键字息息相关.比如你的网站是销售"炒股软件"相关的网站,于是你设定了网站首页要优化的关键字是"炒股软件",可是在整个网页中,由始至终都没有出现过"炒股软件"这四个字,所以即使网页再优秀,在搜索引擎输入"炒股软件"这个关键字时,也找不到,因为搜索引擎无法得知你的网页和"炒股软件"这个关键字息息相关.关键

关键字-搜索网页中的内容html+js

问题描述 搜索网页中的内容html+js 用js实现,按照输入的搜索关键字,筛选网页当中的内容.网页上主要是新闻链接.只显示包含关键字的新闻链接.然后在别的网页搜索的时候,如果选择搜索新闻,也会跳转到这个网页,然后执行新闻的筛选. 解决方案 获取页面上的所有a对象变量innerHTML属性是否包含你的关键字,包含就显示,不包含隐藏.不知道你的新闻链接怎么导入页面的,如果是iframe框架别人的网页跨域了是获取不到链接对象的 <a href="#">关键字1</a>

ActiveX如何调用引用该ActiveX的网页中的JavaScript函数

active|activex|javascript|函数|网页  前言 很多网友问到,在HTML的页面中放置一个COM对象,这个对象该如何调用页面中的脚本函数的问题,本人近日也因为工作需要实现这样的功能,在网上搜索后,获得了很多帮助,但并没有发现完整的实现.本文描述了实现过程中的几个要点,同时提供一个示例工程的下载. 1--给接口添加一个方法:方法名:SetClientSite参数:IOleClientSite* pClientSite 2--给上面的方法加以实现(在相应的类中实现,已经自动生成

利用HTML优化加快网页速度

速度|网页|优化      web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易.无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要.      明显HTML,暗渡"公用脚本"      减少web页面下载时间的关键就是设法减小文件大小.当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来.比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的

如何利用HTML优化加快网页速度

速度|网页|优化 web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易.无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要. 明显HTML,暗渡"公用脚本"减少web页面下载时间的关键就是设法减小文件大小. 当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来.比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件,然后再在页面中按如

Javascript设计网页中的下拉菜单

javascript|菜单|设计|网页|下拉 在网页制作时,为了更好地组织信息,使显示的信息分类明确.层次清晰,网页制作者往往费尽心机.常用的方法有用树型结构显示信息,用表格进行网页布局,用框架(frame)组织页面等等.但对于习惯了Windows操作系统的用户来说,利用菜单操作可以算是最自然的方法了.下面我们就来看一下怎样在网页中设计下拉式菜单. 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成.每个子菜单往往还包含几个子菜单项.通常,只有菜单条显示在窗口中,并且当鼠标指

javascript在网页中实现读取剪贴板粘贴截图功能_javascript技巧

见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下. 可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好. 输入框的结构代码: 复制代码 代码如下: <input type="text" id="testInput" /> 为输入框绑定粘贴事件: 复制代码 代码如下: var input = document.getElemen