我对标签的属性async和标签有几个问题,据我所知,只能在HTML5浏览器中使用.defer<script>
我的一个网站有两个外部JavaScript文件,目前位于</body>标签上方; 第一个是来自谷歌的jquery,第二个是本地外部脚本.
添加async到页面底部的两个脚本有什么好处吗？
将async选项添加到两个脚本并将它们放在页面顶部是否有任何优势<head>？
<script defer src=...<head>使用与defer之前的脚本相同的属性加载内部的两个脚本 </body>？<script async src=...如果我有两个async启用的脚本
最后,我最好保留原样,直到HTML5更常用？
我相信javascript可以在任何地方(几乎),但我几乎总是在它之间看到它<head></head>.我正在使用jquery,并想知道它是否由于某种原因必须在head标签中,或者如果我移动它会破坏某些东西.谢谢.
编辑:为什么它几乎总是在头标签？
似乎可以在构造函数中嵌套一个类,然后可以从类中的任何地方实例化,这是官方的吗？
[编辑]例如,
class C {
constructor() {
class D {
constructor() { }
}
}
method() {
var a = new D(); // works fine
}
}
//var a = new D(); // fails in outer scope
traceur生成了JS https://google.github.io/traceur-compiler/demo/repl.html
$traceurRuntime.ModuleStore.getAnonymousModule(function() {
"use strict";
var C = function C() {
var D = function D() {};
($traceurRuntime.createClass)(D, {}, {});
};
($traceurRuntime.createClass)(C, {method: function() {
var a = new D();
}}, {});
return {};
});
//# sourceURL=traceured.js
[这与此问题有关,但不是因为它不是关于电子邮件.]
在许多情况下 - 特别是在使用CMS或其他人的框架时,将<style>标签和<script>标签嵌入到<body>比在框架中更容易<head>.这似乎适用于IE6,IE7(Windows),Firefox 3.x和Safari(OS X).
严格来说,这是错的吗？如果是的话,它会带来什么负面影响......除了在一些客户中完全被忽视之外？
注意:很高兴每个人都想谈论DRY和集中风格.想象一下我想在文档中使用样式标签,因为它们不是全球性的,并且我不能在每页基础上访问头部.无论出于何种原因,无论是网站的页面差异,还是每个段落的差异或其他原因.我对跟踪和改变很难感兴趣.我担心在体内使用风格可能会产生什么后果.
你集中了那些核心的东西.中央样式表中的其他一切都很臃肿.
我有以下HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/blazy/1.8.2/blazy.min.js" defer></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" defer></script>
<!-- 26 dec flexslider js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js" defer></script>
<script defer>
(function($) {
$(document).ready(function() {
//do something with b-lazy plugin, lightbox plugin and then with flexslider
});
})(jQuery);
</script>
</head>
<body>
</body>
</html>
我收到一个错误,说没有定义jQuery.现在,即使我从我的内联JS代码中删除defer,它也说jQuery是未定义的.出于某种原因,我必须将jQuery插件保留在头部并保持我的JS代码内联.我的问题是:
为什么内联Javascript代码在defer属性存在时不会延迟？
有没有办法模仿我的内联Javascript代码的延迟行为？如果需要,我可以将它放在body标签的末尾.
我有以下脚本,其中第一个和第三个document.writeline是静态的,第二个是生成的:
<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script language='javascript' type='text/javascript'>alert('during');<\/sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>
Firefox和Chrome将显示之前,期间和之后,在Internet Explorer的第一个节目期间才把它显示之前和之后.
我遇到过一篇文章,说我不是第一个遇到这个问题的文章,但这并不能让我感觉更好.
有没有人知道如何在所有浏览器中将命令设置为确定性,或者黑客IE浏览器像所有其他浏览器一样工作？
警告:代码片段是一个非常简单的repro.它是在服务器上生成的,第二个脚本是唯一发生变化的脚本.这是一个很长的脚本,并且之前和之后有两个脚本的原因是浏览器将缓存它们,并且代码的动态部分将尽可能小.它也可能在具有不同生成代码的同一页面中多次出现.
有人可以"逐步","逐行"解释这段代码吗？我想了解更多关于Asynch代码以及Google如何加载他们的脚本,如何从用户"隐藏"javascrippt(我知道我无法隐藏它但至少让它像Google那样,不显示所有代码)一个档案)
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
ga('send', 'pageview');
</script>
这个问题与哪些浏览器支持<script async ="async"/>相关？.
我最近看过几个脚本做的事情是这样的:
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://www.example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(s);
这是向DOM动态添加脚本的常用方法,Steve Souders的书" Even Faster Web Sites "中的IIRC 提示所有现代浏览器异步加载脚本(即不阻止页面呈现或下载后续资产) .
如果我是正确的,该s.async = true声明是否有用？即使对于支持该属性的浏览器,它也不是多余的,因为动态附加脚本应该已经触发异步下载吗？
HTML页面加载的顺序是什么.请参阅下面的基本HTML大纲 -
<html>
<head>
<link rel="stylesheet" href="css/sheet1.css">
<link rel="stylesheet" href="css/sheet2.css"
<script src="scripts/take1.js"></script>
<script src="scripts/take2.js"></script>
<head>
<body>
<button>button1</button>
<img src = "HQ1.jpg" />
<img src = "HQ2.jpg" />
<button>button2</button>
</body>
</html>
我所知道的 - (如果我不对,请纠正我)
头部首先加载.然后身体部分加载.
我的问题 -
1.只有在头部完全装入后,身体部分才开始加载吗？
2. css sheet1是否完全加载,然后只有sheet2和JS文件开始加载？
3. CSS文件并行加载吗？与JS文件相同..？或者CSS和JS文件并行加载？
4.由于HQ*图像是大文件,因此加载需要时间.只有HQ1和HQ2完全加载后,button2才会加载并显示在页面中？
5. HQ1和HQ2的下载是并行发生的,还是同步的,首先是HQ1然后是HQ2？
我是新学习的响应式设计.我在旅途中注意到的是,当我将媒体查询放在样式表的底部时,一切都在断点方面完美无瑕.如果我将媒体查询放在样式表的顶部,则没有任何作用,直到最近我才发现我需要将!important和max-DEVICE-width(而不是max-width)添加到正在更改的css中.
为什么是这样？当放在样式表的底部时,为什么媒体查询在桌面和移动设备上都有效.
为什么当我将媒体查询放在样式表的顶部时,我需要添加!important和max- DEVICE -width,以便断点能够在桌面和移动设备上运行？
javascript ×8
html ×3
css ×2
asynchronous ×1
browser ×1
ecmascript-6 ×1
html5 ×1
jquery ×1
pageload ×1
syntax ×1
traceur ×1