我目前已从WordPress切换到Yii框架,并且外部开发人员正在重建我的网站。

我注意到的一件事是,每次他以Yii方式调用AJAX / jQuery时,都会在其中嵌入内嵌JavaScript网页。尽管似乎JavaScript代码位于页脚下方,但它仍然是内联的。

通常,似乎更经常将JavaScript代码放在网页中。一直以来,我一直认为JavaScript脚本应尽可能地放置在JavaScript文件中。这是即将到来的“新”趋势吗?还是我还是应该尝试将JavaScript代码保存在单独的文件中?

评论

您将JavaScript内联插入网页是什么意思?

为了其他人找到这个问题并考虑单击此处,我理解这被认为是非常糟糕的应该将其代码与HTML分开。请参见:本文

@ user1066946 t.co/j1RpJgwoku :-)

@ user1066946我真的很喜欢使用Angular,我只是观察到“语义网”已经绕了一个圈(就在DOM旁边保留了一些粘合代码而言)

“尽管似乎JavaScript代码位于页脚下方,但仍是内联的。” -听起来好像您是在指嵌入式JavaScript,而不是“内联” JavaScript(TecBrat指的是)。

#1 楼

内联JavaScript会增加页面的下载时间,这不好。通过调用.js文件,至少可以并行调用这些文件,并且可以减少内容下载时间。是的,在某些情况下可以直接将JavaScript放入HTML代码中,但最好还是尽量减少这些负担。

请记住页面下载时间(即,HTML)和并非所有资源调用都会影响会影响排名的指标(尽管是PageRank或在SERP中都没有关系)。关键是,它会影响网站的SEO性能,但它会体现出来。

评论


协商到大概相同的主机的第二个连接以下载相同数量的数据是否比活动流中的速度更快?通常,如果您将文件的50Kbps发送到主机,则开始第二个会话可能会削减它,因此现在两者都为25Kbps。除非主机由于某种原因而限制每个连接。

– EkriirkE
2014年5月14日下午6:46

虽然有一个外部文件的骗局。如果操作不正确,则会创建DOMblocking代码,即doc.ready触发器较慢,这会影响预期的速度。但是,如果做得好,外部方式是可行的

–马丁(Martijn)
14年5月14日在9:38

.js文件更适合缓存,没有意义的是,到同一主机的两个连接会神奇地使您的下载速度更大。

–user29263
2014年5月14日14:00



虽然我了解您的逻辑,但这并不是完全错误的想法,但是划分带宽的想法有些误导。 HTML较小,花费的时间更少,任何后续调用实际上都可以等待。

– closetnoc
2014年5月14日15:59

如果您在寻找时间,那么查看带宽是错误的。查看分析器在加载时间:通常,连接时间比实际数据交换时间大10-100倍。这意味着片段化是一个真正的问题,对于一个很小的js使用外部专用文件可能会更糟糕。内联在不进行真正并行化的浏览器上更好

– Lesto
14年5月14日在17:10

#2 楼

在我的货币换算网站上,大多数会话都是单页浏览。这是因为用户可以直接在目标网页上进行货币计算(所有计算均通过JavaScript在客户端进行。)

我的页面在所有资源(css, js,甚至图片)都在页面中内联。由于很少有用户查看多个页面,因此无法从页面视图之间缓存的某些资源中受益匪浅。

我的网站并不典型。大多数站点每个会话都有多个页面,并且图像较大,这会使我的技术不太适用。这个问题没有正确的解决方案。这取决于站点。您需要根据用户的典型行为自己进行测量。

#3 楼

在HTML文件中包含JavaScript不一定很糟糕,但是您必须对其进行判断。

如果跨多个页面使用大量JavaScript则很糟糕。在这种情况下,JavaScript应该位于外部,压缩且可缓存的文件中,并且如果您的网站流量非常大,则应使用CDN。 JavaScript需要将其附加到外部文件中的事实可能会被否定,因为您需要提出一个额外的HTTP请求来检索它。在这种情况下,将JavaScript保留在页面中会更有效。

然后,如果在多个页面上使用相同的JavaScript小片段,则将其放置在外部文件中将是有益的要充分利用缓存。

最终,您必须权衡JavaScript的大小和发出其他HTTP请求的开销。在大多数情况下,对于“平均”网站,仅将其放在外部文件中可能不会产生很大的不同。

#4 楼

我是Yii开发人员,我可以告诉你,Yii与这无关。无论是将Javascript代码放置到一个单独的文件中,然后使用CClientScript::registerScriptFile方法在HTML(视图)页面中注册它,还是将其直接用于查看(HTML)代码并使用CClientScript::registerScript方法进行注册,这完全在开发人员方面。 >
根据您的回答,大多数(专业人士)Yii开发人员都强烈赞成第一种方法,即-在单独的文件中保留尽可能多的Javascript代码。因此,这当然不是编码的新趋势,而是不良的开发人员实践。至少,这就是在Yii社区中看到的方式。

编辑:实际上,我忘记了最重要的论点。 Yii(以及大多数其他专业的PHP框架)是基于MVC设计模式(实际上是架构模式)构建的。并且前面可以使用相同的模式:HTML代码是模型(数据),CSS是视图(装饰器),而Javascript是控制器。所有这些文件都放在单独的文件.js.css文件中–在最佳情况下已缩小,混淆和压缩。

构建Yii应用程序时,可以破坏MVC模式并将所有内容保留在其中。相同的文件。问题是-这样做值得吗?好处是什么(没有?),它将带给您什么?在询问是否保持JS代码内联时,可以使用相同的论点?

评论


好。开发人员似乎对所有东西都使用了第三方小部件。自动完成,ajax图像上传等。所有这些都添加了内联js。

–史蒂文
2014年5月14日13:11

不,我不同意。我在我的Yii应用程序中使用Twitter Bootstrap(可能是Yii的最大扩展和大量的小部件),以及许多其他Yii的扩展,但没有一个使用内联JS。您的开发人员必须非常幸运地找到仅使用内联Javascript的小部件和扩展。您必须在Yii方面具有丰富的经验,才能开始编写自己的扩展(除了少数例外,写得不好),即使其他经验不足的Yii开发人员也将内联代码用作最后的选择,如果其他所有方法都失败的话。

– Trejder
2014年5月14日13:16

在Yii中使用第三方扩展和小部件是个好主意(您无需再次发明轮子)。但是,在Yii应用程序或扩展中使用内联JS代码确实是一种不好的态度。因此,要么强迫您的开发人员编写更好的代码/使用更好的扩展程序和小部件,要么……获得更好的开发人员! :]

– Trejder
2014年5月14日13:17



好的,谢谢您的反馈。除了Stackoverflow,我在哪里可以找到一个好的Yii社区?

–史蒂文
2014年5月14日13:18

在Yii论坛上。大多数页面均可免费访问。有些要求注册帐户并登录。 Stack Overflow的大多数Yii开发人员在论坛上都有自己的帐户。经过近六年的发展,Yii框架赢得了一个庞大的开发人员社区,因此,如果仔细观察,您应该能够在本地社区甚至社区中找到很少的Yii开发人员。祝好运。

– Trejder
2014年5月14日13:23



#5 楼

实际上,这取决于您要开发的网页的目的:

我使用少量的内联JavaScript,但是如果外部JavaScript文件很大,我宁愿使用它。

无论哪种方式,当页面加载JavaScript时,都必须先执行它。最佳做法是使用外部JavaScript,这样就不会延长页面内容。它还使调试更加容易。

#6 楼

答案实际上取决于正在执行的操作。

如果您注意到在网站上使用的内联JavaScript(例如,在网站所有页面的标题内显示的小部件),则将其移至“通用” JavaScript文件是适当的。

实际上,即使将其用于单个页面,我也会将尽可能多的JavaScript移至一个常见的JavaScript文件。我将服务器配置为发送强大的JavaScript文件缓存和压缩头。

另一方面,如果JavaScript只是一堆配置选项/初始化,例如:

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});


由于某种原因,无法将代码移动到外部JavaScript文件中(例如,当图像参数来自数据库时),我将其内联。话虽如此,我会选择“不引人注目的”第三方插件(或将其转换为此类插件)。

#7 楼

这些答案没有达到目标。看一下内联缓存。

由于Yii是用PHP编码的,因此您会发现一种常见的(或者可能是不常见的)PHP模式是开发人员有时会编写PHP代码来动态生成Java代码。服务器-根据服务器已知的某些状态,条件或值-然后将其全部发送给客户端,从而允许客户端执行功能并跳过服务器已经完成的一些计算。 br />
我们没有在.js文件中向客户端发送一堆通用的Javascript函数,而这些客户端在没有提供数据之前一直没有上下文(数据可能位于服务器上并且需要往返),而没有上下文可以将上下文/数据作为Javascript函数的一部分“引入”。节俭是因为这意味着您要一起发送功能/数据,并且只发送客户端当时可能需要的功能/数据,而不是在第一页加载时发送整个应用程序。这也意味着您不必在首次加载页面时就使整个应用程序易于下载和反向工程,因为您只需要注入每个客户端当时可能需要的一小部分功能。不确定SEO的预兆如何,但我确定可以相应地对其进行优化。通过使用一些内联Javascript来减少HTTP请求的数量可能是有用的,这取决于。

考虑最终用户使用WYSIWYG编辑器在某些CMS软件中编写页面的情况。当该用户无权访问服务器上的源.js文件时,该如何向页面添加新功能?他们切换到HTML选项卡并使用内联Javascript。

并非所有内联Java都是不好的;而是所有内联Java都是不好的。有时onclick也可以。一般建议,避免编写内联Javascript,否则您将养成良好的习惯。

参考文献:


内联缓存
使用内联缓存优化动态JavaScript
在JavaScript中解释JavaScript虚拟机-内联缓存
为什么要避免使用内联脚本? (请参阅MainMa和us​​er1389596的答案)


#8 楼

通常,内联JS代码很糟糕,就像其他人在我之前说的那样。

但是我认为内联JS更好的用例。

想想插入一个CMS的CMS。 JS驱动的图库。画廊可能在jQuery中完成。它由id属性标识,该属性不仅在页面上是唯一的,而且在整个网站上也是唯一的。在这种情况下(我认为),内联JS会更好,因为该JS代码仅在一页上使用,并且没有HTTP开销