热门标签 | 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对象,但这是我能想到的最明显的原因。


推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • Java 中的 BigDecimal pow()方法,示例 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
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社区 版权所有