6

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

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

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

4

4 回答 4

5

您会想要研究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

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

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

于 2013-07-03T20:38:44.537 回答
2

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

减少 jQuery 的加载时间

使用第三方CDN托管的jQuery

由于第三方 CDN 托管的 jQuery 库的广泛使用，大多数用户已经缓存了 jQuery，这意味着您也可以通过使用相同的资源从中受益。目前最流行的是Google Hosted Libraries，另一个是jQuery 自己的 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。

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

我的其余代码呢？

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

于 2013-06-29T10:06:24.610 回答
2

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

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

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

jQuery Builder（例如） （仅使用 ajax 和 css 模块缩小了 28.35 Kb）

主题外

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

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

于 2013-06-29T10:00:24.063 回答
0

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

ETAG，如果修改

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

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

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

不利的一面是，在需要显示的不仅仅是那篇文章的页面上，它可能会变得非常复杂。

于 2013-07-05T15:14:20.957 回答