CSS、JS放置正确位置、静态资源压缩图片、CSS

存放常用的js、css、图片改动不大，第二次访问时直接进入本地缓存。在手机上广泛使用。

4）CSS和JS放在正确的位置5）静态资源压缩

图片、CSS、JS 在发布前会被压缩。

6）静态资源使用多个域名

对于图片，CSS，JS，可以使用几个域名，可以同时加载。

7）静态资源使用cdn存储

用户与您的网站服务器的接近程度会影响响应时间的长度。静态资源可以放置在内容分发网络（CDN）中以加快访问速度。

8）预加载

当某个功能还没有显示出来时，在空闲时间预加载相关图片或者js代码

9）DOM 操作优化

使用对 DOM 元素的访问速度较慢，因此为了获得更多页面，您应该这样做：

10）优化算法

优化js处理中的搜索和排序算法。谨慎使用嵌套循环。

有时我们会觉得页面很慢，因为有太多的事件处理程序附加到 DOM 树元素并且这些事件被频繁触发。这就是为什么使用事件（事件委托）是一个好主意的原因。如果一个 div 中有 10 个按钮，则只需将事件处理程序附加到 div 一次，而不是为每个按钮添加一个处理程序。您可以在事件冒泡时捕获它并确定发出了哪个事件。您也不必为了操作 DOM 树而等待事件发生。您需要做的就是等待要在树结构中访问的元素出现。您也不必等待所有图像加载。您可能希望在事件应用程序中使用事件而不是方法。

减少主机名的数量也会减少页面中并行下载的数量。减少 DNS 查找次数可以节省响应时间，但减少并行下载会增加响应时间。我的指导方针是将这些页面上的内容分成至少两个但不超过四个。结果是在减少 DNS 查找次数和保持高度并行下载之间进行权衡。

将页面内容划分为多个部分可让您最大化并行下载。由于 DNS 查找的影响，您首先需要确保使用 2 到 4 个域。例如，您可以将使用的 HTML 内容和动态内容放在其上，并将页面的各种组件（图像、脚本、CSS）分别存储在 和 上。

在用户和 HTML 文档之间添加跳转会延迟页面中所有元素的显示，因为在加载 HTML 文件之前不会下载任何文件（图像、Flash 等）。有一种跳转现象经常被web开发者忽略，但往往是浪费响应时间。当 URL 应该有斜杠 (/) 并被忽略时，就会发生这种情况。例如，当我们要访问 时，实际返回的是一个跳转，它指向的 301 代码（注意尾部斜杠）。在服务器上可以使用 Alias 或 or 来避免。

链接新旧站点是另一种经常使用跳转功能的情况。在这种情况下，往往需要连接网站的不同内容，然后根据不同的用户类型（如浏览器类型、用户账号类型）进行跳转。使用跳转在两个网站之间切换非常简单，所需的代码量并不多。虽然使用这种方法降低了开发人员的复杂性，但它也降低了用户体验。如果两者都在同一台服务器上，另一种方法是使用别名和实现。如果因为域名不同而使用跳转，可以使用别名或者在web服务器上跳转。

在某些情况下，ajax 可以使用缓存来减少网络开销。

我们来看一个例子：一个 Web2.0 电子邮件客户端将使用 Ajax 自动下载用户的通讯录。如果用户自上次使用 Email web 应用后没有对通讯录进行任何更改，并且 Ajax 响应通过或 Cacke- 进行缓存，则可以直接从上次缓存中读取通讯录。必须告知浏览器是使用缓存的地址簿还是发送新请求。这可以通过在读取地址簿的 Ajax URL 中添加一个带有最后编辑时间的时间戳来完成，例如 &t=[电话号码] 等。如果地址簿自上次下载后没有被编辑，则时间戳不变，并且它是从浏览器的缓存中加载的，从而减少了 HTTP 请求过程。如果用户修改了通讯录，时间戳将用于确定新的 URL 与缓存的响应不匹配，浏览器将发出更新地址簿的重要请求。即使您的 Ajxa 响应是动态生成的，即使它只针对一个用户，也应该缓存它。这样做可以使您的 Web2.0 应用程序更快。

复杂的页面意味着要下载更多的数据，也意味着更慢的 DOM 遍历。例如，在添加事件处理程序时，循环遍历 500 个和 5000 个 DOM 元素肯定是不一样的。大量 DOM 元素的存在意味着页面的某些部分可以通过简单地替换元素标签来进行修剪而无需删除内容。您是否在页面布局中使用表格？您是否为了布局而引入了更多元素？可能有一个合适的或语义上更合适的标签供您使用。YUI CSS 对你的布局有很大帮助：grids.css 可以帮助你实现整体布局，font.css 和 reset.css 可以帮助你删除浏览器默认格式。它提供了重新访问页面中标签的机会，例如仅在语义上有意义时才使用它，不是因为它具有换行效果。DOM 元素的数量很容易计算网站优化，只需在控制台中输入：.(‘*’)。那么有多少 DOM 元素是太多了呢？这可以与标记良好以供使用的类似页面进行比较。例如，雅虎！ 是一个内容非常丰富的页面，但它只使用了 700 个元素（HTML 标记）。

元素可以在父文档中插入新的 HTML 文档。了解它的工作原理很重要，这样您才能更有效地使用它。

优点：解决图标、广告等第三方内容加载缓慢的问题；; 并行加载脚本；

缺点：即使内容为空，加载也需要时间；将阻止页面加载；没有语义；

HTTP 请求耗时非常大，所以使用 HTTP 请求得到一个无用的响应（如 404 页面未找到）是完全没有必要的，只会降低用户体验，没有任何好处。有的网站将404错误响应页面改为“你在找***吗”，提高了用户体验的同时也浪费了服务器资源（如数据库等）。最坏的情况是外部链接出错并返回 404 代码。首先，这种加载会破坏并行加载；其次，浏览器会尝试寻找返回的 404 响应内容中可能有用的部分作为代码来执行。

该规则包括两个方面： 对于静态内容：将文件头的过期时间设置为“Never”（永不过期） 对于动态内容：使用合适的 Cache-file 头来帮助浏览器对网页进行有条件的请求 内容设计是这些天变得更丰富了，这意味着页面上有更多的脚本、样式表、图像和 Flash。用户第一次访问您的页面意味着发出多个 HTTP 请求，但通过使用标头，您可以使此内容可缓存。它避免了后续页面访问时不必要的 HTTP 请求。文件头通常用于图像文件，但应用于所有内容，包括脚本、样式表和 Flash。浏览器（和代理）使用缓存来减少 HTTP 请求的大小和数量以加速页面访问。Web 服务器使用 HTTP 响应中的标头来告诉客户端内容需要缓存多长时间。以下示例是一个较长的标头，它告诉浏览器响应将在 2010 年 4 月 15 日之前过期。 : Thu, 15 Apr 2010 20:00:00 GMT 如果您使用的是服务器，您可以使用它来设置过期时间相对于当前日期。下面是一个用于设置请求时间后 10 年到期的标头示例：“加 10 年” 请记住，如果使用标头，则必须在页面内容更改时更改内容的文件名。根据Yahoo!，我们经常使用这样的程序：将版本号添加到内容的文件名中，例如.0.6.js。仅当用户已经访问过您的网站时，才可以使用标题。当用户第一次访问您的站点时，这对于减少 HTTP 请求的数量是无效的，因为浏览器的缓存是空的。因此，这种方法将根据您的页面在“预缓存”存在时被点击的频率来提高您网站的性能（“预缓存”已经包含页面上的所有内容）。雅虎！建立了一组测量，我们发现所有页面浏览量的 75-85% 是“预缓存”的。通过使用文件头，您可以增加缓存在浏览器中的内容量，并且可以在用户的​​后续请求中重用，甚至无需从用户发送单个字节请求。s 性能取决于您的页面在“预缓存”存在时被点击的频率（“预缓存”已经包含页面上的所有内容）。雅虎！建立了一组测量，我们发现所有页面浏览量的 75-85% 是“预缓存”的。通过使用文件头，您可以增加缓存在浏览器中的内容量，并且可以在用户的​​后续请求中重用，甚至无需从用户发送单个字节请求。s 性能取决于您的页面在“预缓存”存在时被点击的频率（“预缓存”已经包含页面上的所有内容）。雅虎！建立了一组测量，我们发现所有页面浏览量的 75-85% 是“预缓存”的。通过使用文件头，您可以增加缓存在浏览器中的内容量，并且可以在用户的​​后续请求中重用，甚至无需从用户发送单个字节请求。

服务器启用Gzip，可以减少50%以上的传输。

当用户请求一个页面时，在后台组织 HTML 文件需要 200 到 500 毫秒。在此期间，浏览器将保持空闲等待数据返回。在 PHP 中，可以使用 flush() 方法，它允许你先将编译好的部分 HTML 响应文件发送到浏览器，然后浏览器可以下载文件的内容（脚本等），而后台处理剩余的HTML 页面。当背景烦人或前台空闲时，这样的效果会更加明显。

雅虎！邮件团队发现，在使用时，浏览器中的 POST 方法是一个“两步”过程：首先发送标头，然后发送数据。所以使用 GET 是最合适的，因为它只需要发送一个 TCP 数据包（除非你有很多）。IE中一个URL的最大长度是2K，所以如果要发送超过2K的数据，就不能使用GET。一个有趣的区别是 POST 实际上并不像 GET 那样发送数据。根据 HTTP 规范，GET 表示“获取”数据，因此在获取数据时使用 GET 更有意义（在语义上），反之，在服务器上发送和保存数据时使用 POST。

CSS 表达式是动态设置 CSS 属性的一种强大（但危险）的方法。从版本 5 开始支持 CSS 表达式。在以下示例中，可以使用 CSS 表达式每隔一小时切换一次背景颜色： -color: ( (new Date()).()%2 ? “#” : “#” ); 如上图，使用表达式。CSS 属性根据表达式的评估结果进行设置。该方法在其他浏览器中不起作用，因此在跨浏览器设计中单独定位设置很有用。

表达式的问题在于，它们的求值频率比我们想象的要高。不仅在页面显示和缩放的时候，在页面滚动的时候，甚至在鼠标移动的时候。向 CSS 表达式添加计数器可以跟踪表达式的计算频率。只需在页面上移动鼠标即可轻松实现10000次以上的计算。

减少 CSS 表达式求值次数的一种方法是使用一次性表达式，在第一次运行时将结果分配给指定的样式属性，并用该属性替换 CSS 表达式。如果必须在页面循环期间动态更改样式属性，则使用事件处理程序而不是 CSS 表达式是一个可行的解决方案。如果您必须使用 CSS 表达式，请记住它们会被评估数千次，并且会对您的页面产生性能影响。

许多性能规则都是关于如何处理外部文件的。但是，在您采取这些步骤之前，您可能会问一个更基本的问题：CSS 和 CSS 应该放在外部文件中还是页面本身中？在实际应用程序中使用外部文件可以提高页面速度，因为 CSS 和 CSS 文件都缓存在浏览器中。每次请求时，都会随着 HTML 文档重新下载 HTML 文档中内置的 CSS 和 CSS。这减少了 HTTP 请求的数量，但增加了 HTML 文档的大小。另一方面，如果外部文件和 CSS 被浏览器缓存，则可以在不增加 HTTP 请求数量的情况下减小 HTML 文档的大小。关键是外部和 CSS 文件被缓存的频率与 HTML 文档被请求的次数有关。虽然有一定的难度，但还是有一些指标可以衡量的。如果用户在单个会话中浏览您网站上的多个页面，并且在这些页面中重复使用相同的脚本和样式表，则缓存外部文件会更加有益。许多网站没有建立这些指标的功能。对于这些网站，最好的方法是引用 CSS 和 CSS 作为外部文件。使用内置代码的一个很好的例外是网站的主页，例如 Yahoo! 主页和我的 Yahoo!。主页在会话中的浏览量较少（可能只有一个），您可以找到内置和 CSS 来加快最终用户的响应时间。对于浏览量高的主页，有一种技术可以在减少内置代码的 HTTP 请求与通过使用外部文件进行缓存的好处之间取得平衡。其中一种是在首页构建和CSS，但是在页面下载完成后动态下载外部文件，而这些文件在子页面中使用时，已经缓存在浏览器中。

之前最好的实现提到CSS应该放在顶部以便有序的加载和渲染。在 IE 中，在页面底部 @ 并使用

效果是一样的，所以最好不要用。

IE 特有的属性用于修正 7.0 以下版本中显示的 PNG 图像的半透明效果。这个过滤器的问题是它会在浏览器加载图像时停止渲染内容并冻结浏览器。它对每个元素（不仅仅是图像）进行一次操作，增加了内存成本，因此它的问题是多方面的。完全避免它的最好方法是改用 PNG8 格式，它在 IE 中运行良好。如果确实需要使用，请使用下划线并使其对IE7+用户无效。

重复引用同一页面中的文件会影响页面的性能。你可能认为这种情况很少见。一项对美国前 10 名网站的调查显示，其中两个网站有重复的脚本引用。导致一个脚本被重复引用的离奇现象主要有两个因素：团队规模和脚本数量。如果是这种情况网站优化，复制脚本会导致不必要的 HTTP 请求和无用的计算，从而降低网站性能。in 会产生不必要的 HTTP 请求，而 in 不会。在 中，如果一个脚本被引用两次并且它不可缓存，它将在页面加载期间发出两次 HTTP 请求。动态脚本可以被缓存，并在用户重新加载页面时生成额外的 HTTP 请求。除了添加额外的 HTTP 请求，多次运行脚本是浪费时间。总之，无论脚本是否可缓存，它们都存在重复操作的问题。避免偶尔两次引用同一脚本的一种方法是使用模板中的脚本管理模块来引用脚本。在 HTML 页面中使用标签来引用脚本的最常见方法是： 在 PHP 中，您可以通过创建一个名为的方法来覆盖它：

为了防止对脚本的多次引用，在该方法中还应该使用其他机制来处理脚本，例如检查所属目录，并在脚本文件名中添加版本号，以便在文件头中使用。

HTTP 可用于多种用途，例如授权验证和个性化身份。相关信息通过 HTTP 标头在 Web 服务器和浏览器之间进行通信。因此，保持它尽可能小以减少用户的响应时间很重要。有关更多信息，请查看 Tenni 和 Patty Chi 的文章“When the”。这些研究主要包括：

去掉不必要的，使音量尽可能小，以减少对用户响应的影响。注意适配级别的域名设置，不影响子域名。设置合理的过期时间。尽早计时而不是过早清除将改善用户响应时间。

当浏览器在请求中同时请求并发送静态图片时，服务器对这些什么都不做。因此，它们只是由于某些负面因素而创建的网络传输。您应该确保的只是对静态内容的请求什么都不是。创建一个子域并使用它来托管所有静态内容。

如果你的域名是，你可以有静态内容。但是，如果您不是在顶级域而是在顶级域中设置它网站优化，那么所有对 . 在这种情况下，您可以重新购买一个新的域名来保存静态内容并保持域名为空。雅虎！用途、用途、用途等

不要使用比实际需要更大的图像来设置 HTML 中的长度和宽度。如果您需要：那么您的图像 (mycat.jpg) 应该是 而不是 的图像。

.ico 是位于服务器根目录中的图像文件。它必须在那里，因为即使您不关心它是否有用，浏览器也会请求它，因此最好不要返回 404 Not Found 响应。由于它在同一台服务器上，因此每次请求时都会发送它。这个图像文件也会影响下载顺序，例如在 IE 中请求附加文件时，它们会在附加内容加载之前被下载。因此，为了减少.ico带来的弊端，做：

文件尽量小，最好小于1K；在适当的时候为它设置文件头（也就是说，当您不打算再次更改 .ico 时，因为在替换新文件时它无法重命名）。您可以安全地将标题设置为未来几个月。您可以通过检查当前 .ico 的最后编辑时间来判断。可以帮助您创建小。

此限制主要是由于无法缓存大于 25K 的文件。请注意，这是指未压缩的大小。由于纯gizp压缩可能达不到要求，所以压缩文件很重要。有关更多信息，请参阅 Wayne Shea 和 Tenni 的论文“，第 5 部分：– it Stick”。

除非注明，否则均为未来可期SEO原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.szsinotech.com/seo_1791.html