节省页面加载时间的提示[重复]答案

【问题标题】：Tips to save up our page load time [duplicate]节省页面加载时间的提示[重复]
【发布时间】：2013-06-27 01:26:35
【问题描述】：

我的问题：减少那些不必要的 kb 并使页面加载更快的最佳方法是什么。所有 优化实践+编码实践（在 js、php ) 如果执行可以使您的页面更轻。

我为什么问这个：我读了这篇关于 jquery.js vs jquery.min.js 用法的文章。我以为很多人在不知道它的含义的情况下使用它。我基本上是在 android 和 ios 手机上制作广告单元。所以在我的领域 保存每个 kb 变得非常重要。我最近开始使用 jquery.min 而不是普通的 javascript。但这又增加了整体 kbs 的大小。大老爹 google 在他们的页面排名理念中跟踪这方面。所以这个问题在大多数搜索中变得更加重要.我确实搜索了谷歌，但没有找到一些可靠的答案。

我想知道除了使用任何 js 库的缩小版本之外，人们应该怎么做才能使他们的网页在移动设备、平板电脑和 PC 浏览器上更轻量级。在某个时间点，每个 javascript 编码人员都必须考虑这个问题。

【问题讨论】：

您可以使用Google Speed Analysis 来检查您的网站
有很多方法。当然使用缩小的 js、css、... 文件。尽管大多数服务器会自动执行此操作，但使用 gzip 也会提高速度。将 js 文件的解析推迟到文档末尾，使用 sprite 来最小化需要发出的请求数量，...对于 jquery 与 jquery.min，我认为 jquery.js 用于开发和jquery.min.js 更轻，因此适合实际使用。正如 Michael Walter 所说，Google 的 PageSpeed 工具非常方便您查看您的网站在哪里存在缺陷并可以加快速度。
在 CDN 上使用缩小版或构建自己的 jquery 版本：projects.jga.me/jquery-builder
“增加整体大小”。怎么来的？
使用纯 javascript（加起来 0kb）与使用 jquery.min.js（加起来 70kb）

标签： php javascript jquery performance optimization

【解决方案1】：

要利用并行下载和更频繁的缓存，请使用 CDN 作为 google：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

如果您关心的只是文件的大小，请构建您自己的 jquery 版本，删除您当前不使用的内容：{您仍然可以将此文件放在外部服务器上进行并行下载}

jQuery Builder (e.g)（仅使用 ajax 和 css 模块缩小了 28.35 Kb）

题外话

现在，关于动画的性能，如果您为此目的使用 jquery，您应该看看 GSAP jquery 插件，它可以将性能提高到 20 倍：jQuery GSAP

查看速度测试页面以在库之间进行比较：http://www.greensock.com/js/speed.html

【讨论】：

我不是唯一一个说 Google CDN 实际上减少了流量，而不是页面加载速度的人
@vladkras 从来没有遇到过那个 imo，你能提供反馈链接吗？我只知道在某些国家/地区谷歌限制使用。

【解决方案2】：

我猜您正在考虑减少首次访问或未缓存请求的页面负载，这意味着客户端必须下载所有资源。

减少 jQuery 的加载时间

使用第三方CDN-hosted jQuery

由于第三方 CDN 托管的 jQuery 库的广泛使用，大多数用户已经缓存了 jQuery，这意味着您也可以通过使用相同的资源从中受益。目前最受欢迎的是Google Hosted Libraries，还有一个是jQuery's own CDN。

使用第三方 CDN 托管的 jQuery 就像添加脚本标签一样简单：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

注意：想知道 url 中省略的协议/方案？请参阅 Paul irish 的 Protocol-relative urls。

使用第三方 CDN 的唯一缺点是服务的任何中断也会影响您的网站/广告。但是，与上述任何 CDN:s 相比，您的托管服务中断的可能性要大得多。

jQuery 的自定义构建

如果您出于某种原因不想或不能使用第三方 CDN 托管，您还可以自定义 jQuery 构建以仅包含您在项目中使用/需要的部分。为了简化构建过程，您可以使用这个名为 jQuery Builder 的出色工具。

jQuery 的替代品

jQuery 是一个相当重的库，有些人认为它不适合移动设备。有一些替代品旨在更小更轻，例如Zepto.js、Snack.js 和$dom。

请务必注意，并非所有功能和浏览器支持都将出现在替代库中，因此您需要确保获得所需的内容。

我的其余代码呢？

您应该始终确保所有源代码都是minified 并在从生产环境提供时压缩（即gzipped）。您还应该努力使请求尽可能少，因此将多个文件连接到一个文件中是降低请求数量和更好地从缓存中受益的好方法。这可以用于 JavaScript 和 CSS 文件。

【讨论】：

【解决方案3】：

您可能想研究WPO（Web 性能优化）和/或FEO（前端优化）。

它已经过时了，但今天仍然适用：http://stevesouders.com/hpws/rules.php

Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable

然后是雅虎的规则：http://developer.yahoo.com/performance/rules.html

当然还有 google 的推荐：https://developers.google.com/speed/docs/best-practices/rules_intro

最后用http://webpagetest.org测试你的网站

【讨论】：

+1 以“教人钓鱼”的方式回答问题，而不是继续讨论 jQuery 优化的细节
@anthony：我认为您应该阅读赏金下面的行。我已经得到了答案。您的 14 条规则和 YDN 是来源。这个问题需要更多的关注，人们需要阅读这个。那就是我保留赏金的原因。我不需要更多答案。等一下，我会给你赏金！！

【解决方案4】：

降低带宽也很重要的是缓存标头。

ETAG，如果修改

当您从数据库中提取一篇文章并将其显示在一个简单的页面上时，您可以将 last_edit（示例）列用于 Last-Modified 标题，这样当客户端重新访问该文章时，它可以从缓存中加载。

您应该映射那些可以优化缓存的页面。

它不适用于带有 cmets 的页面，但是当它们通过按按钮加载 ajax 时是可能的。

缺点是它可能会在需要显示更多文章的页面上变得相当复杂。

【讨论】：