在设计网页时,我应该在哪里放置以下代码?
<link rel=stylesheet type="text/css" href="css/layout.css">
我应该把它放入<head>或者我应该把它放入<body>?请澄清以下问题:
<head>HTML代码周围或其他任何地方,会有什么不同?我有各种javascripts,这是我的一个WordPress域中必需的插件,我知道它在php文件中的位置.
我正在采取一切措施来加快页面加载时间,网上的每个速度测试员都会说如果可能的话推迟javascripts.
我已经阅读了关于defer ='defer'和javascript中的异步函数,我认为其中一个将完成我想要完成的任务.但是我不明白我是如何在php文件中这样做的.
例如,这是一个特定插件的php文件的片段,其中调用了javascript文件:
function add_dcsnt_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'dcsnt', dc_jqsocialtabs::get_plugin_directory() . '/js/jquery.social.media.tabs.1.7.1.min.js' );
}
Run Code Online (Sandbox Code Playgroud)
我已经读过,最好这样做,以加快页面加载时间:
<script defer async src="..."></script>
Run Code Online (Sandbox Code Playgroud)
但我不知道如何在php文件中完成它.我想用我的所有javascript文件来做这件事.
我如何完成推迟或推断这个javascript片段是最后加载并加快页面加载时间?在所有浏览器中增加页面加载时间的理想方法是什么?感谢任何人提供的任何指导!
我即将开始一个新的Web项目,我计划使用以下方案将我的JS脚本放在头部和终端之前:
对于页面的用户体验至关重要的脚本是有头脑的.因为我已经开始仔细阅读网页 - 在页面加载之前加载了头部的脚本,所以在那里放置对用户体验至关重要的脚本是有意义的.
对于页面的设计和用户体验(谷歌分析脚本等)不重要的脚本会在之前发布<head>.
这是一种明智的做法吗?
另一种方法是将所有脚本放入</body>并将defer属性添加到非必要脚本 - 但是我已经读过旧版本的FF没有获取defer属性.
我正在阅读一个教程,作者提到要在HTML中的结束body标记(</body>)附近包含Javascript文件.
我想知道我不应该在head部分中声明/定义JavaScript包含哪些类型的功能?对我来说,在结束body标记附近包含像Google Analytics这样的JavaScript是有道理的.在结束body标记附近定义JavaScript包含时应该注意哪些地方?
我遇到了问题.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
alert(document.getElementsByTagName("li").length);
</script>
<title>purchase list</title>
</head>
<body>
<h1>What to buy</h1>
<ul id="purchases">
<li> beans</li>
<li>Cheese</li>
</ul>
</body>
Run Code Online (Sandbox Code Playgroud)
当我把脚本放在头部时,结果显示为0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Shopping list</title>
</head>
<body>
<h1>What to buy</h1>
<ul id="purchases">
<li>Cheese</li>
<li>Milk</li>
<script type="text/javascript">
alert(document.getElementsByTagName("li").length);
</script>
</ul>
</body>
Run Code Online (Sandbox Code Playgroud)
当我试图将脚本放入正文时,结果显示2.为什么存在这样的差异?主要区别是什么?
我已将asyncattrib 添加到我的javascript包含HTML中.
所以我现在:
<script async src="jquery.myscript.js"></script>
Run Code Online (Sandbox Code Playgroud)
这适用于所有JS我加载,除了jquery之外.
如果我添加async到jQuery <script>标记所有其他依赖于jquery的脚本都不起作用.
在那个jsfiddle你可以看到问题:
JsFiddle
在我使用的示例中,我使用的<script> Mycode </script>不是包含外部file.js,但这并没有改变这种情况.
我想用异步attrib运行jQuery并在加载jquery之后异步运行其他几个外部脚本.
有可能的?
对于cakephp项目中的图像上传,我使用了java-script.I在app\View\Layouts中添加了这个js文件default.ctp
js代码
document.querySelector('input[type=file]').addEventListener('change', function(event){
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
if (files[i].type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
var imageElement = document.createElement('div');
imageElement.classList.add('uploading');
imageElement.innerHTML = '<span class="progress"><span></span></span>';
var progressElement = imageElement.querySelector('span.progress span');
progressElement.style.width = 0;
document.querySelector('form div.photos').appendChild(imageElement);
var canvas = document.createElement('canvas'),
max_size = 1200,
width = image.width,
height = image.height;
if (width > height) {
if (width …Run Code Online (Sandbox Code Playgroud) 我应该在哪里放置外部JavaScript文件?我知道人们把它放在body标签的末尾,以使网页看起来更快加载.但最后把它放在一边有什么缺点吗?
将JavaScript与Google Analytics代码放在一起是一种很好的做法吗?
<body>
// Everything else over here ... conent etc..
<script src="myjavascript.js" type="text/javascript"></script>
<script type="text/javascript">
// google analytics code
</script>
</body>
Run Code Online (Sandbox Code Playgroud) 在所有文档中,我看到<title>头部下方的jQuery脚本标签,但是当我进入其他一些站点时(初始化模板是我头顶的第一个),它们将它放入正文的底部(你知道,就在此之前</body>).
这两个中的哪一个是对的?
什么时候必须<script>在<head>节内使用标签,什么时候必须<script>在<body>节内使用标签?这两种情况有什么区别?
javascript ×9
html ×6
asynchronous ×2
jquery ×2
cakephp ×1
css ×1
css3 ×1
firefox ×1
php ×1
wordpress ×1