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


推荐阅读
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
  • 作为一名新手,您可能会在初次尝试使用Eclipse进行Struts开发时遇到一些挑战。本文将为您提供详细的指导和解决方案,帮助您克服常见的配置和操作难题。 ... [详细]
  • libsodium 1.0.15 发布:引入重大不兼容更新
    最新发布的 libsodium 1.0.15 版本带来了若干不兼容的变更,其中包括默认密码散列算法的更改和其他重要调整。 ... [详细]
  • 本文探讨了领域驱动设计(DDD)的核心概念、应用场景及其实现方式,详细介绍了其在企业级软件开发中的优势和挑战。通过对比事务脚本与领域模型,展示了DDD如何提升系统的可维护性和扩展性。 ... [详细]
  • 深入解析 Apache Shiro 安全框架架构
    本文详细介绍了 Apache Shiro,一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作,使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API,同时确保高度的安全性和灵活性。 ... [详细]
  • 本文详细介绍了利用JavaScript实现的五种不同的网页弹出窗口技术,包括全屏窗口、全屏模式窗口、带收藏链接工具栏的窗口、网页对话框及HTA窗口。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 尽管某些细分市场如WAN优化表现不佳,但全球运营商路由器和交换机市场持续增长。根据最新研究,该市场预计在2023年达到202亿美元的规模。 ... [详细]
  • 将Web服务部署到Tomcat
    本文介绍了如何在JDeveloper 12c中创建一个Java项目,并将其打包为Web服务,然后部署到Tomcat服务器。内容涵盖从项目创建、编写Web服务代码、配置相关XML文件到最终的本地部署和验证。 ... [详细]
  • 本文探讨了 Spring Boot 应用程序在不同配置下支持的最大并发连接数,重点分析了内置服务器(如 Tomcat、Jetty 和 Undertow)的默认设置及其对性能的影响。 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
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社区 版权所有