重新审视网站优化经验法则:现代浏览器的底层仍然需要 JavaScript?

2023-12-28

十多年来我一直在关注 Web 开发趋势。我一直坚持的最大的网站优化技术之一就是将 JavaScript 放在网站的底部。

我坚持的理由是 JavaScript 会阻止并行下载,并且每个主机名一次只能下载两个组件。如果添加到文档标题中,这将对您的网站加载时间产生负面影响。

现在,我正在重新审视我之前关于网站优化的所有想法,我了解到,对于现代网络浏览器来说,这一切实际上都不再正确了。

例如,截至 2015 年 2 月,Internet Explorer 11 现在每个主机名可以有 13 个连接(不再只有 2 个),并且 JavaScript 不再阻止并行下载!所有现代浏览器都存在这种行为。

如果在用户与页面交互之前不使用 JavaScript,并且无论如何都应该将其放在底部,这是可以理解的,但现在它和以前一样重要吗?

我正在浏览电子商务网站以了解他们现在使用的模式:

看着这座建筑,我差点哭了。超过 60 个外部 JavaScript 文件,其中很多位于页眉中,而几乎没有位于页脚中。

但从网络时间线来看,大多数 JavaScript 文件都以如此惊人的速度首先加载,这实际上并没有影响网站的其余部分。您可以看到所有并行文件同时下载。

我假设这是出于某种特殊原因而完成的,所以我冗长的问题是我是否遗漏了一些东西?

对于现代浏览器来说,有必要遵守过去的旧规则吗?既然我们不再依赖 IE6 和那个时代为浏览器制定的规则,我们是否应该重新审视如何优化网站?


优化技术发生了变化,但与此同时,浏览器的 JavaScript 运行时引擎 + 用户资源也变得更好。确实,您可以通过重新访问旧代码来获得更高的性能,但我怀疑性能的提高是否值得冒意外破坏旧代码的风险(尤其是涉及 IE 时)。

显然,您的代码的用途以及它的服务对象会对您的决定产生很大的影响。例如,如果很大一部分用户使用移动浏览器,则 JavaScript 性能就更为重要。

--edit--

作为旁注,我想提一下,在我看来,该网站对性能并不友好。加载那么多外部(和嵌入式)脚本是不正常的。现在加载大量 JS 文件的更好方法之一是通过 AJAX 注入它们。另一种是让你的服务器根据你的页面将各种JS文件合并成一个,然后缓存这些处理过的文件。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

重新审视网站优化经验法则:现代浏览器的底层仍然需要 JavaScript? 的相关文章

  • 在 Three.js 中绕点旋转对象的正确方法是什么?

    关于 Three js 的大多数教程 问题都建议使用 Three js 绕点旋转对象的方法是在要旋转的位置创建父对象 附加对象 然后移动子对象 然后 当父级旋转时 子级围绕该点旋转 例如 Make a pivot var pivot new
  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • 如何阻止直接访问我的 JavaScript 文件?

    我使用 Minify 来缩小并缓存所有脚本请求 我只希望我的用户能够访问 JavaScript 文件的缩小版本 缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
  • Vue 3 Composition API 提供/注入在单文件组件中不起作用

    我正在使用 Composition API 在 VueJS 3 中创建一个库 我实现了提供 注入 如中所述docs https v3 vuejs org guide composition api provide inject html i
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • .push() 将多个对象放入 JavaScript 数组中返回“未定义”

    当我将项目添加到beats数组然后console log用户时 我得到了数组中正确的项目数 但是当我检查 length 时 我总是得到 1 尝试调用索引总是会给我 未定义 如下所示 Tom beats 1 我想我错过了一些明显的东西 但这让
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 如何检测安装了哪些 .NET Framework 版本和服务包?

    有人问了类似的问题here https stackoverflow com questions 198931 how do i tell if net 35 sp1 is installed 但它特定于 NET 3 5 具体来说 我正在寻找
  • 如何解决 java.lang.VerifyError: org/apache/poi/xssf/usermodel/XSSFWorkbook?

    我正在尝试从 asset 文件夹中读取 xlsx 文件 我收到以下异常 05 16 10 12 05 613 E AndroidRuntime 2915 致命异常 主要 05 16 10 12 05 613 E AndroidRuntime
  • iOS 在滚动视图之间拖放

    所以这就是问题所在 我有两个滚动视图 其中一个充满了 10 个奇怪的子视图 基本上就像扑克牌 自定义类视图 我希望能够将其中一些视图拖放到我拥有的空滚动条中 这两个滚动视图之间有许多不同的视图 所以我想显示实际从一个视图拖动并放置在另一个滚
  • spectj 中 .. 和 * 是什么意思

    我的理解是 is 0 Many参数和 是一个参数any姓名 它是否正确 spectj 是否支持类似语法args myArg 这是来自 AspectJ 网站 http www eclipse org aspectj doc next prog
  • 跨界棋盘算法改进

    感谢大卫 卡恩的书 古代密码学成为我的爱好之一 我正在尝试在 Ruby 类中实现来处理旧密码 例如虚无主义密码 http en wikipedia org wiki Nihilist cipher and ADFGVX http en wi
  • 数据流中的 nltk 依赖关系

    我知道外部Python依赖项可以通过requirements txt文件输入到Dataflow中 我可以在我的数据流脚本中成功加载 nltk 然而 nltk 通常需要下载更多文件 例如停用词或 punkt 通常在本地运行脚本时 我可以运行
  • 返回局部变量行为的地址[重复]

    这个问题在这里已经有答案了 可能的重复 局部变量的内存可以在其作用域之外访问吗 https stackoverflow com questions 6441218 can a local variables memory be access
  • 我应该如何从 scipy.sparse.csr.csr_matrix 和列表进行子采样

    我有一个scipy sparse csr csr matrix表示文档中的单词和列表列表 其中每个索引表示矩阵中每个索引的类别 我遇到的问题是我需要从数据中随机选择 N 行 所以如果我的矩阵看起来像这样 1 3 2 3 4 4 1 5 2
  • 使用 .NET 检查 Internet 连接的最佳方法是什么?

    在 NET 中检查 Internet 连接的最快 最有效的方法是什么 您可以使用此代码 它也应该适用于伊朗和中国 public static bool CheckForInternetConnection int timeoutMs 100
  • git fsck 代表什么?

    后面的是什么意思fsck命令名称 The 文档 http git scm com docs git fsck该命令的似乎没有提及该名称代表什么 它代表文件系统检查 这个名字取自Unixfsck http linux die net man
  • 用于克隆数据库的 SQL 脚本,保持原始数据库不变

    我们目前有 CMS 的基本安装 在此 CMS 中 它包含用户 产品 内容等的完整工作数据集 我们希望增加安装时间 因为现在我们必须进入 SQL Server 2012 创建一个新数据库 然后从现有基本安装数据库恢复该数据库 我们每次安装可能
  • 我不断收到错误消息,指出范围列太小

    我正在编写一些代码 当我尝试运行它时出现错误 范围的起始列太小 我正在使用 Google Apps 脚本 我收到的错误就在这一行 var cellCup ss getRange ctCup 0 activate getValue const
  • 如何使用较旧的第三方依赖项在 net46 框架上构建 ASP.NET Core RC2 应用程序

    我有一个闪亮的新 Asp Net Core MVC 应用程序 它引用了一些旧的net45图书馆 在完整的 net45 框架上与 Asp Net Core RC1 配合良好 从 Asp NET Core rc1 迁移到 rc2 我遇到了一个我
  • org.hibernate.tool.schema.spi.CommandAcceptanceException:使用 h2 和 JPA 在 SpringBoot 中通过 JDBC 语句执行 DDL 时出错

    使用 h2 数据库和 JPA 运行 spring boot 时 出现以下错误 org hibernate tool schema spi CommandAcceptanceException Error executing DDL via
  • jQuery 缓动在我的 animate() 调用中不起作用

    我有 4 个圆形按钮 位于中心区域在我的页面上 http goo gl yacZly 将鼠标悬停其中一个会使其尺寸增大 但我想为这些按钮的增大和缩小运动添加一些缓动 弹跳效果 但是由于某种原因 缓动部分不起作用 我确实将缓动插件添加到我的页
  • 奇怪的Java Unicode正则表达式StringIndexOutOfBoundsException

    我的问题很简单 但却令人费解 可能有一个简单的开关可以解决这个问题 但我在 Java 正则表达式方面经验不多 String line line replaceAll i 1 2 1 这会崩溃 如果我删除 i 开关 有效 这三个unicode
  • 在启动时运行 python 脚本 - debian

    我已经使用网络摄像头创建了一个应用程序 在这里 我的应用程序打开一个窗口来显示图像 我想在启动时运行该应用程序 如果我将启动文件放入 rc local 中 它会在启动时成功运行 但不允许显示窗口 表明 gtk warning cannot
  • FlatBuffers:如何写入巨型文件

    我正在尝试使用 FlatBuffers 来存储 OpenStreetMap 数据 所以 这将是 50GB 由于通常所有内容都保存在内存中 因此如何可能 如果有的话 将数据顺序写入文件 我有一种感觉 这并不是 FlatBuffers 所擅长的
  • 如何检查TouchID是否启用

    有什么方法可以检查我的应用程序是否启用了 TouchID 我如何检查我的应用程序是否启用了 TouchID 例如 DropBox 能够启用图形打印传感器 现在有什么方法可以检查我的应用程序是否显示基于 touchid 的 TouchID 屏
  • 重新审视网站优化经验法则:现代浏览器的底层仍然需要 JavaScript?

    十多年来我一直在关注 Web 开发趋势 我一直坚持的最大的网站优化技术之一就是将 JavaScript 放在网站的底部 我坚持的理由是 JavaScript 会阻止并行下载 并且每个主机名一次只能下载两个组件 如果添加到文档标题中 这将对您