使用JavaScript添加

其他提示

一个主要的缺点是浏览器不兼容。并非所有浏览器都正确获取并将资源纳入DOM,因此使用此方法是有风险的。样式表比脚本更正确。

另一个问题是可维护性之一。串联和编写字符串以在客户端的范围内添加DOM元素可能会成为一场维护噩梦。最好使用诸如创建元素之类的DOM方法来创建元素。

一个明显的优势是,它使有条件地使用资源。您可以拥有确定要加载哪些资源的逻辑,从而减少页面的带宽消耗和整体处理时间。我将使用库呼叫(例如jquery $ .getScript()来加载脚本与document.write。优点是这种方法更清洁,还允许您在请求完成或失败时执行代码。

好吧,我不妨把我的帽子戴在这圈上...

如果您检查了Google的关闭库,base.js,您将看到该文档。 writeScriptTag_() 功能。这是依赖关系管理系统的重要组成部分,在创建复杂,多文件,库基本JavaScript应用程序时,它提供了“闭合”,并且是一个巨大的优势 - 它可以让文件/代码先决条件确定加载顺序。我们目前使用这种技术,并且对此遇到了很少的麻烦。 TBH,我们没有浏览器兼容性的单一问题,我们定期在IE 6/7/8,FF3/2,Safari 4/5和Chrome最新测试。

到目前为止,我们唯一的缺点是,通过两次加载资源或根本无法加载一个资源而导致的问题可能具有挑战性。由于加载资源的行为是程序化的,因此它会受到程序化错误的约束,并且与将标签直接添加到HTML不同,因此很难看到确切的加载顺序是什么。但是,可以通过使用具有某种形式的依赖关系管理系统(例如关闭或Dojo)的库来克服此问题。

编辑: 我已经对这种性质发表了一些评论,但是我认为最好总结我的答案:dojo.require()和jquery.getScript()有一些问题(这两者最终执行AJAX请求和评估)。

  1. 通过AJAX加载意味着没有交叉脚本 - 即没有来自您网站的JavaScript。如果您想包括在内,这将是一个问题 https://ajax.googleapis.com 如说明中列出。
  2. 评估脚本不会出现在JavaScript调试器的页面脚本列表中,从而使调试非常具有挑战性。最新的firebug版本将向您显示评估代码,但是由于设定断点乏味的行为,文件名却丢失了。 AFAIK,WEBKIT JAVASCRIPT控制台和IE8开发人员工具 不要 显示评估脚本。

它的优势是您不需要在每个HTML文件中重复脚本引用。缺点是浏览器 必须 获取并执行主JavaScript文件,然后再加载其他文件。

我想我能想到的一个优势是,如果您在多个页面上使用这些脚本,您只需要记住包含一个脚本,就可以节省一些空间。

在Google PagesPeed上,它们极大地阻止您使用此技术,因为它使情况变得较慢。除了您的顺序负载 脚本 在其他所有人之前, 还有另一个捕获:

现代浏览器使用投机性解析器来更有效地发现外部资源[...],因此,使用JavaScript的document.write.write()获取外部资源,使投机性解析器无法发现这些资源,从而可以延迟下载,解析和解析和分析和这些资源的渲染。

SEO公司也有可能将其作为建议,以使头部元素缩短,因此唯一的内容更接近文档的顶部 - 还创建了更高的文本与HTML比率。尽管听起来确实是全能的,就像做到这一点的好方法一样;尽管这将使维护更加耗时,但更好的方法可能是将JavaScript凝结到一个.js文件中,而CSS则将其置于单个.CSS文件中,如果完全必要以减少头部元素大小。

一个很大的缺点是添加 scripts头将暂停文档的处理,直到完全下载这些脚本并执行这些脚本(因为浏览器认为他们可以使用 document.write)。 - 这将损害响应能力。

现在,建议您将脚本标签正确放置 </body>. 。当然,这是100%不可能的,但是如果您正在使用 Unobtrusve JavaScript (您应该),所有脚本都可以在文档末尾重新定位。

HTML5提出了 async 属性建议仅在加载主文档后浏览器才能执行脚本。这是许多浏览器中脚本插入脚本的行为,但所有这些浏览器都没有。

我建议 反对 使用 document.write 不惜一切成本。即使没有它,这也会引起对服务器的额外请求。 (我们喜欢对请求的数量进行影响,例如 CSS精灵.)

是的,正如前面提到的其他人所述,如果禁用脚本,您的页面将在没有CSS的情况下显示(这可能是无法使用的)。

  1. 如果JavaScript是 禁用 - <script> and <link> 根本不会添加元素。

  2. 如果将JavaScript Init函数放置在页面底部(这是一个很好的做法),并将CSS与JavaScript链接,则可能会在CSS负载之前延迟一些延迟(在短时间内将在短时间内可见布局)。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top