当前位置: 首页 > 面试题库 >

JavaScript与脚本文件放置位置混淆

施喜
2023-03-14
问题内容

从技术上讲,将脚本放在html页面底部是JavaScript最佳实践。但是我很困惑为什么某些脚本应该像Angular那样在页面顶部调用。因此,当我使用类似Angular的库时,是否违反了JavaScript最佳做法?

有什么解释吗?


问题答案:

从技术上讲,这仅是最佳实践,如果您不关心顺序文件的“太多”加载。您确定要先调用一个库。因此,人们在加载HTML之后将所有自定义脚本加载到底部,因此他们无需照顾该特定DOM loaded事件并应对渲染阻止脚本,这就是将它们全部放在首位时发生的情况标签。

但是JavaScript库实际上是需要首先完全加载的依赖项。从技术上讲,也适用于小型乐队(或如今与慢速智能手机相比)。而且您还应该知道http协议允许您一次下载2个请求。

考虑到这些信息,我说 最好的做法 是将一个捆绑的脚本文件放在async从头标加载的模式下,最好缩小。可通过咕unt声/大口吃设置或某种方式实现。

<head>
    <title></title>
    <script src='path-to-bundled-script.js' async='async' />
</head>

async属性确保页面加载不会等待此脚本完全加载。它仍然会等待一个以上的http请求,因此绑定了顺序执行。

因此,在进行开发时,如果没有为此捆绑包完成grunt / gulp设置,则会遇到错误,表示未加载库或无法识别符号。

为了解决这个问题,您可以使用属性defer

<head>
    <title></title>
    <script src='path-to-library.js' defer='defer' />
    <script src='path-to-library2.js' defer='defer' />
    <script src='path-to-library3.js' defer='defer' />
    <script src='path-to-custom1.js' defer='defer' />
    <script src='path-to-custom2.js' defer='defer' />
</head>

使用defer属性,页面加载将等待脚本执行,而不是HTML完全加载。

使用这种技术,您可以忘记将body标记作为最佳做法,而可以通过Google的pagespeed洞察力获得可测试的速度



 类似资料:
  • 问题内容: 我有一个文本文件想要包含在我的Android应用程序中,它不是字符串文件,而是标准文本文件。它包含定义在板上绘制的“地图”的特征的数据。该文件不是XML文件,所以我不确定应该放在哪里,或者如果这不是适用于Android的良好文件结构?你想这样做吗?如果您位于哪个目录下,应该将它们放在什么目录下?那么您应该如何访问文件?我知道如何使用FileInputStreams和FileOutput

  • 我用一个xml文件配置log4j,但我不确定在哪里添加格式msgnolookups=true?

  • 你可以更改保存 Navicat Data Modeler 内部文件的“配置文件位置”。

  • 你可以为不同的文件类型更改文件夹。在默认情况下,大部分的文件保存于设置位置。然而,某些文件是保存于“配置文件位置”路径,以及所有日志文件是保存于“记录位置”路径。 在配置文件位置的文件 服务器类型 扩展名 自动运行 MySQL .nbatmysql Oracle .nbatora PostgreSQL .nbatpgsql SQLite .nbatsqlite SQL Server .nbatms

  • 你可以为不同的文件类型更改文件夹。在默认情况下,大部分的文件保存于设置位置。然而,某些文件是保存于“配置文件位置”路径,以及所有日志文件是保存于“记录位置”路径。 在配置文件位置的文件 服务器类型 扩展名 自动运行 MySQL .nbatmysql Oracle .nbatora PostgreSQL .nbatpgsql SQLite .nbatsqlite MariaDB .nbatmaria

  • 我对Springs@Configuration和@Conditional annotation是新手。我在问自己,在我的maven文件夹结构中,这些配置java文件应该放在哪里。 到目前为止,我将所有配置xml文件放入src/main|test/Resources/但是使用这种新方法,不再有xml文件。 谢啦