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


推荐阅读
  • 软件工程课堂测试2
    要做一个简单的保存网页界面,首先用jsp写出保存界面,本次界面比较简单,首先是三个提示语,后面是三个输入框,然 ... [详细]
  • Python + Pytest 接口自动化测试中 Token 关联登录的实现方法
    本文将深入探讨 Python 和 Pytest 在接口自动化测试中如何实现 Token 关联登录,内容详尽、逻辑清晰,旨在帮助读者掌握这一关键技能。 ... [详细]
  • 深入解析SpringMVC核心组件:DispatcherServlet的工作原理
    本文详细探讨了SpringMVC的核心组件——DispatcherServlet的运作机制,旨在帮助有一定Java和Spring基础的开发人员理解HTTP请求是如何被映射到Controller并执行的。文章将解答以下问题:1. HTTP请求如何映射到Controller;2. Controller是如何被执行的。 ... [详细]
  • 在尝试使用C# Windows Forms客户端通过SignalR连接到ASP.NET服务器时,遇到了内部服务器错误(500)。本文将详细探讨问题的原因及解决方案。 ... [详细]
  • 深入解析动态代理模式:23种设计模式之三
    在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
  • 深入解析ArrayList与LinkedList的差异
    本文详细对比了Java中ArrayList和LinkedList两种常用集合类的特性、性能及适用场景,通过代码示例进行测试,并结合实际应用场景分析其优缺点。 ... [详细]
  • 为了解决不同服务器间共享图片的需求,我们最初考虑建立一个FTP图片服务器。然而,考虑到项目是一个简单的CMS系统,为了简化流程,团队决定探索七牛云存储的解决方案。本文将详细介绍使用七牛云存储的过程和心得。 ... [详细]
  • 本文探讨了在 SQL Server 中使用 JDBC 插入数据时遇到的问题。通过详细分析代码和数据库配置,提供了解决方案并解释了潜在的原因。 ... [详细]
  • 本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣,并提供了具体的代码示例,帮助读者理解两者在不同场景下的适用性。 ... [详细]
  • ElasticSearch 集群监控与优化
    本文详细介绍了如何有效地监控 ElasticSearch 集群,涵盖了关键性能指标、集群健康状况、统计信息以及内存和垃圾回收的监控方法。 ... [详细]
  • 深入解析Java多线程与并发库的应用:空中网实习生面试题详解
    本文详细探讨了Java多线程与并发库的高级应用,结合空中网在挑选实习生时的面试题目,深入分析了相关技术要点和实现细节。文章通过具体的代码示例展示了如何使用Semaphore和SynchronousQueue来管理线程同步和任务调度。 ... [详细]
  • 本文介绍了如何通过Java代码计算一个整数的位数,并展示了多个基础编程示例,包括求和、平均分计算、条件判断等。 ... [详细]
  • 本文详细介绍了如何在 Android 中使用值动画(ValueAnimator)来动态调整 ImageView 的高度,并探讨了相关的关键属性和方法,包括图片填充后的高度、原始图片高度、动画变化因子以及布局重置等。 ... [详细]
  • Django Token 认证详解与 HTTP 401、403 状态码的区别
    本文详细介绍了如何在 Django 中配置和使用 Token 认证,并解释了 HTTP 401 和 HTTP 403 状态码的区别。通过具体的代码示例,帮助开发者理解认证机制及权限控制。 ... [详细]
  • 远程过程调用(RPC)是一种允许客户端通过网络请求服务器执行特定功能的技术。它简化了分布式系统的交互,使开发者可以像调用本地函数一样调用远程服务,并获得返回结果。本文将深入探讨RPC的工作原理、发展历程及其在现代技术中的应用。 ... [详细]
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社区 版权所有