热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

“把脚本放在底部”是正确的吗?-Is“PutScriptsattheBottom”Correct?

IntheBestPracticestoimprovewebsitePerformancehttp:developer.yahoo.comperformancerules.h

In the Best Practices to improve web site Performance http://developer.yahoo.com/performance/rules.html, Steve Souders mentioned one rule "Move Scripts to the Bottom". It's a little confusing. Actually, I notice that a lot of web pages that doesn't put script at bottom, while YSlow still mark A for these pages.

在改进网站性能的最佳实践http://developer.yahoo.com/performance/rules.html中,史蒂夫·索德斯提到了一条规则“将脚本移到底部”。这有点令人困惑。实际上,我注意到很多网页没有将脚本放在底部,而YSlow仍然标记这些页面的A.

So, when should I follow the rule "Put Scripts at the Bottom"?

那么,我什么时候应该遵循“将脚本放在底部”的规则?

5 个解决方案

#1


28  

When a user requests a page from your site, the page HTML starts streaming to the browser. As soon as a browser encounters a tag for an external image, script, CSS file, etc., it will start downloading that file simultaneously.

当用户从您的站点请求页面时,页面HTML将开始流式传输到浏览器。一旦浏览器遇到外部图像,脚本,CSS文件等的标记,它将立即开始同时下载该文件。

If you put your scripts at the bottom of a page, they'll be loaded last. In other words, the HTML content/structure/css/images of youe page/app will be loaded first, and something can show up in the browser faster; Your users don't have to wait for a script to finish downloading before they see something in your application.

如果您将脚本放在页面底部,它们将最后加载。换句话说,将首先加载您的页面/应用程序的HTML内容/结构/ css /图像,并且可以更快地在浏览器中显示某些内容;您的用户在看到应用程序中的某些内容之前不必等待脚本完成下载。

#2


14  

The reason why pages that have scripts at the top of the page still score an 'A' is because this is not as important as other performance improvements that could be made.

页面顶部具有脚本的页面仍然得分为“A”的原因是因为这不像其他可以进行的性能改进那么重要。

Each rule is weighted, so some rules affect the ySlow grade more than others.

每个规则都是加权的,因此有些规则比其他规则更能影响ySlow等级。

I always put scripts at the bottom. There are very few reasons for needing scripts at the top of your page. The only reason I can think of is you need your Javascript to execute immediately before anything else in the page, which is quite rare.

我总是把脚本放在底部。在页面顶部需要脚本的原因很少。我能想到的唯一原因是你需要你的Javascript在页面中的任何其他地方之前立即执行,这是非常罕见的。

#3


8  

Sometimes, you have no choice but to put scripts at a specific location in page. However, if you put scripts at the bottom of the page, the browser won't interrupt its rendering to load JS engine to process your script (which might be costly, if you have loops running for large number of times) and will probably display an early view of the page sooner.

有时,您别无选择,只能将脚本放在页面中的特定位置。但是,如果您将脚本放在页面底部,浏览器将不会中断其渲染以加载JS引擎来处理您的脚本(如果您有多次循环运行,这可能会很昂贵)并且可能会显示早一点查看页面。

#4


6  

I'm not sure it's a performance issue (could be), but I was at a presentation given by Microsoft, and the presenter said that web spiders sometimes only read the first x amount of characters on a web page to index it. So, if you have a large amount of scripts, your content may not be reached and indexed properly (and your site's page rank won't be as high).

我不确定这是一个性能问题(可能),但是我在微软的演示文稿中,并且主持人说网络蜘蛛有时只读取网页上的第一个x字符数量来索引它。因此,如果您有大量脚本,则可能无法正确访问和索引您的内容(并且您网站的网页排名不会那么高)。

#5


6  

The code may reference DOM objects that haven't been instantiated yet is the most obvious reason I can think of.

代码可能引用尚未实例化的DOM对象,但这是我能想到的最明显的原因。


推荐阅读
  • 【原创】利用Python进行河流遥感处理的PyRIS软件开发
    今天开始着手改造pyris1.0.文章地址:https:doi.org10.1016J.ENVSOFT.2018.03.028Monegaglia,2 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 本文介绍了使用Python解析C语言结构体的方法,包括定义基本类型和结构体类型的字典,并提供了一个示例代码,展示了如何解析C语言结构体。 ... [详细]
  • 本文介绍了在Python中使用zlib模块进行字符串的压缩与解压缩的方法,并探讨了其在内存优化方面的应用。通过压缩存储URL等长字符串,可以大大降低内存消耗,虽然处理时间会增加,但是整体效果显著。同时,给出了参考链接,供进一步学习和应用。 ... [详细]
  • 使用freemaker生成Java代码的步骤及示例代码
    本文介绍了使用freemaker这个jar包生成Java代码的步骤,通过提前编辑好的模板,可以避免写重复代码。首先需要在springboot的pom.xml文件中加入freemaker的依赖包。然后编写模板,定义要生成的Java类的属性和方法。最后编写生成代码的类,通过加载模板文件和数据模型,生成Java代码文件。本文提供了示例代码,并展示了文件目录结构。 ... [详细]
  • 如何用Matlab快速画出带有3D渲染效果的复杂曲面
    简要地介绍了一下如何用Matlab快速画出带有3D渲染效果的复杂曲面图,包括三维曲面绘制、光线、材质、着色等等控制,以及如何 ... [详细]
  • 前言对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]
  • 1print过程procprint<data数据集名><选项>;*label指定打印输出标签noobs制定不显示观测序号*by变量名1< ... [详细]
  • des算法php,Des算法属于加密技术中的
    本文目录一览:1、des是什么算法2、80分求 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 基于Socket的多个客户端之间的聊天功能实现方法
    本文介绍了基于Socket的多个客户端之间实现聊天功能的方法,包括服务器端的实现和客户端的实现。服务器端通过每个用户的输出流向特定用户发送消息,而客户端通过输入流接收消息。同时,还介绍了相关的实体类和Socket的基本概念。 ... [详细]
author-avatar
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有