Question

假设浏览器缓存空白 - 如何仅通过应用HTML / CSS / JavaScript代码更改来加快网页加载速度？

意思是，不建议使用CDN等移动服务器。只需更改代码以使其加载速度更快。

Answer 1

根据我的经验：

（1）为Firefox安装 YSlow 和 Page Speed 扩展程序，并尽可能遵循他们的建议。

（2）非常重要：为保存图像，JS和CSS文件的目录配置 HTTP缓存。我只是将它们放在一个名为static的目录中，然后放在这个.htaccess文件中：

<IfModule mod_headers.c>
    Header set Cache-Control "max-age=29030400, public"
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault A29030400
    ExpiresByType image/x-icon A29030400
    ExpiresByType application/x-javascript A29030400
    ExpiresByType application/javascript A29030400
    ExpiresByType text/css A29030400
    ExpiresByType image/gif A29030400
    ExpiresByType image/png A29030400
    ExpiresByType image/jpeg A29030400
    ExpiresByType text/plain A29030400
    ExpiresByType application/x-shockwave-flash A29030400
    ExpiresByType video/x-flv A29030400
    ExpiresByType application/pdf A29030400
    ExpiresByType text/html A29030400
</IfModule>

（3）从HTML文件中取出 CSS 代码并将其放入单独的CSS文件中。

（4）将您的JS文件合并到一个文件中。然后使用 JSMin 压缩此文件将非常有用。

（5）在Apache中打开静态文本文件中的 gzip compression 。如果您的Apache服务器上有mod_deflate，请将其放入网站根目录中的.htaccess文件中：

<IfModule mod_headers.c>
    <FilesMatch "\\.(js|css|html|htm|php|xml)$">
        SetOutputFilter DEFLATE
    </FilesMatch>
 </IfModule>

Answer 2

将您的JS和CSS移出HTML并将其移入每个缩小的文件中。此外，如果可以，请减小任何图像的大小。我没有注意到任何翻转图像，但如果你有它们，请考虑CSS精灵。

Answer 3

考虑到除了下载之外，HTML和CSS没有加载时间，如果您不愿意考虑将其移动到外部文件或使用服务器端解决方案（如压缩），除了缩小实际的代码大小之外，你无能为力。实际上，这对你的网页没什么影响。

就你的Javascript来说......你在页面中有大量内联，这可能是你速度缓慢的原因。不幸的是，我不能花一个小时的时间来为你描述一切。 Stack Overflow不是免费工作......如果你愿意缩短到特定区域的缓慢程度，我很乐意帮助分析它，但要求有人带你的整个网站并从头开始分析它有点多。

Answer 4

阅读并应用Steve Souders所写的所有内容（特别是但不仅限于他的两本精湛书籍），这只是关于这些问题的全部内容（可能有10％的精彩建议是你不想要的那种）听说，比如使用CDN，但绝大多数都是你所要求的目标。

Answer 5

外部化JS和CSS声明而不是将它们包括在内 - 这将是显而易见的。这样，用户可以下载一次，然后在缓存中使用它们。

Answer 6

将gzip压缩内容提供给接受它的浏览器。

Answer 7

你正在加载一些JS库，每当渲染引擎点击一个标记时，浏览器就会停止并开始执行它，每个人都会坐下来等待你的巨大的JavaScript库完成加载。

阅读本文：non-blocking JavaScript documents并将其应用到您的网站。同时外部化您网页中的所有JavaScript，并在页面末尾以解锁方式加载它们。当用户光学神经元传输页面的第一个视觉效果并试图找出点击的位置时，所有的JS都将执行。这被称为感知性能btw。

Answer 8

Apache's mod_expire授予更快的加载性能，即使在本地测试中也会注意到它。对于mod_expire所有静态内容，包括.js文件，这是一个不错的主意，正如Matt Grande所说。大多数“非常大”的网站使用它或类似物，包括Stackoverflow.com。

Answer 9

除上述建议外：

不要使用CSS表达式。
您的淡入淡出效果代码正在尝试设置无效颜色#ffff100。你为什么不使用jQuery.animate()？
```
$(<selector>).animate({backgroundColor: <targetColor>}, <duration>)
```

Answer 10

在用户实际点击之前，请勿加载备用标签的所有数据。只需获取选项卡文本的计数，并在用户想要查看其他选项时加载数据。

Answer 11

图片：Photoshop可以优化您的图片为网络保存。这减少了巨大的空间。
脚本：更少循环，更优化的解决方案等。
HTML：无表格布局（它减少了很多标签）
CSS：少用过滤器等功能

这些是任何网页优化的提示。

Answer 12

优化图像，使用精灵，优化html，分离css，js，压缩/缩小，使用缓存和聚合将js / css组合到一个文件中。用户服务器端缓存，获得更快的服务器，确保您拥有一个具有最小延迟和快速响应时间的快速网络。

Answer 13

我没有发现抓取地图功能有用。它非常时髦，但它引起了我的注意，它产生的房源从未引起我的注意。我更喜欢更传统的搜索功能，可能会从输入搜索功能扩展。并且，浏览源文件看起来像地图和家庭列表javascript是源的2/3。没有它，必须有更快的负载。

Answer 14

我建议下载Safari并使用他们非常棒的开发工具（以及漂亮的界面）来确切了解需要花费多长时间，以及如何加快速度。

如果您使用的是JQuery，请不要忘记使用Google的托管版本!!

Answer 15

htaccess的

AddOutputFilterByType DEFLATE text / plain AddOutputFilterByType DEFLATE text / html AddOutputFilterByType DEFLATE text / xml AddOutputFilterByType DEFLATE text / css AddOutputFilterByType DEFLATE application / xml AddOutputFilterByType DEFLATE application / xhtml + xml AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / x-javascript

PHP

if(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) 
 ob_start("ob_gzhandler");
else
 ob_start();

2

<IfModule mod_expires.c>

# open

ExpiresActive On



# file images

ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"



# CSS

ExpiresByType text/css "access 1 month"



# javascript

ExpiresByType text/x-javascript "access 1 month"




# icon page

ExpiresByType image/x-icon "access 1 year"



# other

ExpiresDefault "access 2 days"
</IfModule>

心理伎俩:) 使用预加载器，用户喜欢发生的事情：）

如何让我的网页加载速度更快？

15 个答案: