How should I place my scripts in my html files? Is there any difference to the browser?
我应该如何将我的脚本放在我的html文件中?浏览器有什么不同吗?
- To place all
<script>
elements before the<body>
- To place all
<script>
elements to the top of the<body>
- To place all
<script>
elements to the end of the<body>
- To place all
<script>
elements after the</body>
将所有
将所有
将所有
将所有
Because I think I have used all 4 variants before, but I think there should be some consistency of the </script>
elements placement.
因为我认为我以前使用过所有4个变体,但我认为 元素放置应该有一些一致性。
5 个解决方案
#1
As a rule of thumb: Script tags should go at the bottom, unless they need to be higher up.
根据经验:脚本标签应该在底部,除非它们需要更高。
That's because they block the rest of the page from rendering until that script is done executing.
那是因为它们会阻止页面的其余部分呈现,直到该脚本完成执行。
I think google recommends putting their analytics tracking script in the head. That's so if people leave your site before it's done loading, they can still track the visit.
我认为谷歌建议将他们的分析跟踪脚本放在首位。如果人们在完成加载之前离开您的网站就是这样,他们仍然可以跟踪访问。
#2
you can put almost everywhere, but the main ways to do it is by placing it in the <head>
or after the body part. Place it after all body of the document will speed up the loading of your page
几乎可以放在任何地方,但主要的方法是将它放在或身体部位之后。放置文档的所有正文后,将加快页面的加载速度
#3
I think it depends on usage of the script files. Higher in the document loads earlier but do you need them as soon as possible?
我认为这取决于脚本文件的用法。文档中较高的文件会提前加载但是您是否需要尽快加载?
Google advises against loading javascript in the head (https://developers.google.com/speed/docs/insights/BlockingJS).
谷歌建议不要在头脑中加载javascript(https://developers.google.com/speed/docs/insights/BlockingJS)。
But some tracking code (and google analytics also: https://support.google.com/analytics/answer/1008080?hl=en) need to be placed in the head section of the document for proper collection of data.
但是,一些跟踪代码(以及谷歌分析:https://support.google.com/analytics/answer/1008080?hl = en)需要放在文档的head部分,以便正确收集数据。
Also javascript may be used for content loading etc. and therefore should be placed as high as possible.
此外,javascript可以用于内容加载等,因此应该尽可能地放置。
#4
It is considered to be a good practice to put all synchronously (the normal ones) loaded scripts to the bottom of <body>
, since they block rendering of rest of the page.
将所有同步(正常的)加载脚本放在的底部是一种很好的做法,因为它们阻止了页面其余部分的渲染。
However, asynchronously loaded scripts and trackers (i.e. Google Analytics) can be placed wherever, since they are downloaded and executed parallelly and they should fire off as soon as possible.
但是,异步加载的脚本和跟踪器(即Google Analytics)可以放在任何地方,因为它们是并行下载和执行的,它们应该尽快启动。
As for the synchronous scripts, the order is determined by dependencies, ususally first go basic frameworks (i.e. jQuery), then its modules or plugins, then your own "inicialization" code.
对于同步脚本,顺序由依赖关系确定,通常首先是基本框架(即jQuery),然后是模块或插件,然后是你自己的“inicialization”代码。
#5
Usually is necessary to execute the script code after the page is completely loaded. In this case, the default option is right before the </body>
tag.
通常在页面完全加载后执行脚本代码是必要的。在这种情况下,默认选项位于 标记之前。
There are some cases you need to include scripts before the page loads inside head tag.
在某些情况下,您需要在页面加载到head标记之前包含脚本。
#1
As a rule of thumb: Script tags should go at the bottom, unless they need to be higher up.
根据经验:脚本标签应该在底部,除非它们需要更高。
That's because they block the rest of the page from rendering until that script is done executing.
那是因为它们会阻止页面的其余部分呈现,直到该脚本完成执行。
I think google recommends putting their analytics tracking script in the head. That's so if people leave your site before it's done loading, they can still track the visit.
我认为谷歌建议将他们的分析跟踪脚本放在首位。如果人们在完成加载之前离开您的网站就是这样,他们仍然可以跟踪访问。
#2
you can put almost everywhere, but the main ways to do it is by placing it in the <head>
or after the body part. Place it after all body of the document will speed up the loading of your page
几乎可以放在任何地方,但主要的方法是将它放在或身体部位之后。放置文档的所有正文后,将加快页面的加载速度
#3
I think it depends on usage of the script files. Higher in the document loads earlier but do you need them as soon as possible?
我认为这取决于脚本文件的用法。文档中较高的文件会提前加载但是您是否需要尽快加载?
Google advises against loading javascript in the head (https://developers.google.com/speed/docs/insights/BlockingJS).
谷歌建议不要在头脑中加载javascript(https://developers.google.com/speed/docs/insights/BlockingJS)。
But some tracking code (and google analytics also: https://support.google.com/analytics/answer/1008080?hl=en) need to be placed in the head section of the document for proper collection of data.
但是,一些跟踪代码(以及谷歌分析:https://support.google.com/analytics/answer/1008080?hl = en)需要放在文档的head部分,以便正确收集数据。
Also javascript may be used for content loading etc. and therefore should be placed as high as possible.
此外,javascript可以用于内容加载等,因此应该尽可能地放置。
#4
It is considered to be a good practice to put all synchronously (the normal ones) loaded scripts to the bottom of <body>
, since they block rendering of rest of the page.
将所有同步(正常的)加载脚本放在的底部是一种很好的做法,因为它们阻止了页面其余部分的渲染。
However, asynchronously loaded scripts and trackers (i.e. Google Analytics) can be placed wherever, since they are downloaded and executed parallelly and they should fire off as soon as possible.
但是,异步加载的脚本和跟踪器(即Google Analytics)可以放在任何地方,因为它们是并行下载和执行的,它们应该尽快启动。
As for the synchronous scripts, the order is determined by dependencies, ususally first go basic frameworks (i.e. jQuery), then its modules or plugins, then your own "inicialization" code.
对于同步脚本,顺序由依赖关系确定,通常首先是基本框架(即jQuery),然后是模块或插件,然后是你自己的“inicialization”代码。
#5
Usually is necessary to execute the script code after the page is completely loaded. In this case, the default option is right before the </body>
tag.
通常在页面完全加载后执行脚本代码是必要的。在这种情况下,默认选项位于 标记之前。
There are some cases you need to include scripts before the page loads inside head tag.
在某些情况下,您需要在页面加载到head标记之前包含脚本。