网站优化策略-(网站优化与seo优化)

功能懒加载（曝光或点击后加载html模块、js功能模块）

3.使用离线缓存

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

4.CSS和JS放在正确的位置

将css放在head中，保证浏览页面时样式正确。

将js放在body的最后位置，防止加载js阻塞页面。

5.静态资源压缩

图片、CSS、JS 发布前应压缩。

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

图片、CSS、JS，可以使用多个域名，并发加载。

7、静态资源使用CDN存储

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

8.预加载

当某个功能还未展示时，在空闲时间预加载相关图片或js代码

9.DOM操作优化

使用访问 DOM 元素是比较慢的，所以为了获得更多应该的页面，你应该这样做：

缓存已经访问过的相关元素

离线更新节点后，添加到文档树中

避免使用修改页面布局

10.优化算法

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

11. 使用事件委托

有时我们会觉得页面没有响应，是因为DOM树元素附加了太多的事件处理程序，一些事件语句被频繁触发。 这就是为什么使用事件（事件代理）是个好主意。 如果一个 div 中有 10 个按钮网站优化策略，则只需将事件处理程序附加到 div 一次，而不是为每个按钮添加一个处理程序。 当事件冒泡时，您可以捕获事件并确定发送了哪个事件。

您也不必等待事件发生来操作 DOM 树。 您需要做的就是等待您要访问的树结构中的元素出现。 您也不必等待所有图像加载完毕。 您可能希望在事件应用程序中使用事件而不是方法。

12.减少DNS查找次数

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

13.根据域名划分页面内容

将页面内容分成几个部分可以使并行下载最大化。 由于 DNS 查找的影响，您首先要确保您使用的是 2 到 4 个域名。 比如你可以把你使用的HTML内容和动态内容放在上面，把页面的各个组件（图片、脚本、CSS）分别存放在上面和上面。

14. 可缓存的 AJAX

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

让我们看一个例子：

Web 2.0 电子邮件客户端将使用 Ajax 自动下载用户的地址簿。 如果用户自上次使用Email web应用后没有对通讯录做任何改动，Ajax响应是通过Cacke-缓存的，那么可以直接从上次缓存中读取通讯录。 必须告知浏览器是使用缓存中的地址簿还是发送新请求。 这可以通过在读取地址簿的 Ajax URL 中添加带有最后编辑时间的时间戳来实现，

例如&t=等。如果通讯录自上次下载后没有被编辑过，时间戳将保持不变，从浏览器的缓存中加载，从而减少一次HTTP请求过程。 如果用户修改了地址簿，则根据时间戳判断新的URL与缓存的响应不匹配，浏览器会请求更新地址簿。 即使您的 Ajxa 响应是动态生成的，即使它只针对一个用户，也应该缓存它。 这样做可以使您的 Web2.0 应用程序更快。

15.减少DOM元素的数量

复杂的页面意味着需要下载更多的数据，也意味着遍历DOM的效率更慢。 例如，当你添加一个事件处理程序时，在 500 和 5000 个 DOM 元素之间循环的效果肯定是不同的。 大量 DOM 元素的存在意味着页面中有部分可以精简，无需删除内容，只需更换元素标签即可。 您在页面布局中使用表格吗？ 您是否为布局引入了更多元素？

可能有合适的或语义上更合适的标签供您使用。 YUI CSS可以给你的布局带来很大的帮助：grids.css可以帮助你实现整体布局，font.css和reset.css可以帮助你去除浏览器默认格式。 它提供了重新检查页面中标记的机会，例如仅在语义上有意义时才使用它，而不是因为它具有换行效果。

DOM元素的个数很容易计算，只要在控制台输入：.('*')即可。 那么多少 DOM 元素太多了？ 这可以与具有良好标记使用的类似页面进行比较。 例如，雅虎！ 主页是一个内容很多的页面，但它只用了700个元素（HTML标签）。

16. 尽量减少

元素可以在父文档中插入一个新的 HTML 文档。 为了更有效地使用它，了解某物的工作原理很重要。

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

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

17. 不要收到 404 页面错误

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

18.指定或缓存-

这个规则包括两个方面： 对于静态内容：将文件头过期时间值设置为“Never”（永不过期） 对于动态内容：使用合适的Cache-文件头来帮助浏览器有条件地请求网页 现在内容设计越来越丰富，这意味着页面中应该包含更多的脚本、样式表、图片和Flash。 用户第一次访问您的页面意味着发出多个 HTTP 请求，但通过使用文件标头，您可以使此类内容可缓存。 它避免了后续页面访问时不必要的 HTTP 请求。 文件头通常用于图像文件网站优化策略，但应该用于所有内容，包括脚本、样式表和 Flash。

浏览器（和代理）使用缓存来减少 HTTP 请求的大小和数量，以加快页面访问速度。 Web 服务器使用 HTTP 响应中的标头来告诉客户端应该将内容缓存多长时间。 下面的示例是一个长时标头，它告诉浏览器此响应要到 2020 年 4 月 15 日才会过期。 : Thu, 15 Apr 2020 20:00:00 GMT 如果您使用的是服务器，则可以使用设置相对于当前日期的到期时间。

下面的例子是用来设置请求时间后10年过期的文件头：“plus 10 years” 记住，如果使用文件头，当页面内容改变时，必须改变内容文件名。

根据 Yahoo!，我们经常使用这一步：将版本号添加到内容的文件名中，例如 .0.6.js。 只有当用户已经访问过您的网站时，使用标头才会起作用。 这对减少用户首次访问您的站点时的 HTTP 请求数没有影响，因为浏览器的缓存是空的。 因此，这种方法能在多大程度上提高您网站的性能取决于您的页面在“预缓存”（已经包含页面上的所有内容）时被点击的频率。 雅虎！ 建立了一组测量结果，我们发现所有页面浏览量中有 75-85% 是“预缓存”的。 通过使用标头，您可以增加缓存在浏览器中的内容量，并且可以在用户的​​下一个请求中重复使用，甚至无需通过用户请求发送一个字节。

19.gzip压缩文件内容

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

提早刷新输出缓冲区

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

20.简单请求使用GET方法

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

21. 避免使用 CSS 表达式()

CSS 表达式是动态设置 CSS 属性的一种强大（但危险）的方法。 从5版本开始支持CSS表达式。在下面的例子中，可以使用CSS表达式每小时切换一次背景颜色： -color: ( (new Date()).()%2 ? “#” : “#″ ) ; 如上所示，使用表达式。

CSS 属性是根据表达式的求值来设置的。

方法在其他浏览器中不起作用，因此在跨浏览器设计中单独定位设置很有用。

表达式的问题在于它们的计算频率比我们想象的要高。 不仅是页面显示缩放时，页面滚动时，甚至是鼠标移动时，都会重新计算一次。 向 CSS 表达式添加一个计数器可以跟踪表达式被评估的频率。 在页面上随便移动鼠标，可以轻松实现一万次以上的计算。

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

22. 使用外部和 CSS

很多性能规则都是关于如何处理外部文件的。 然而，在您采取这些步骤之前，您可能会问一个更基本的问题：CSS 和 CSS 应该放在外部文件中还是应该放在页面本身？ 在实际应用中使用外部文件可以提高页面速度，因为CSS和CSS文件都可以缓存在浏览器中。 内置的 HTML 文档和 CSS 将在每​​次请求时随 HTML 文档一起重新下载。 虽然这减少了 HTTP 请求的数量，但它增加了 HTML 文档的大小。 另一方面，如果浏览器缓存了外部文件和 CSS，则可以在不增加 HTTP 请求次数的情况下减小 HTML 文档的大小。

关键问题是相对于请求 HTML 文档的次数，缓存外部文件和 CSS 文件的频率。 虽然很难，但还是有一些指标可以衡量的。 如果用户在会话期间浏览站点中的多个页面，并且在这些页面上重复使用相同的脚本和样式表，则缓存外部文件可能会更有用。 许多网站没有构建这些指标的功能。 对于这些站点，最好的坚决方法是将CSS作为外部文件包含在内。

一个例外是网站的主页，例如 Yahoo! 主页和我的 Yahoo!。 主页每次会话的浏览量较少（也许只有一次），您可以看到内置和 CSS 加快了最终用户的响应时间。 对于页面浏览量高的主页，有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存的好处。 其中一种是在首页内置CSS，但在页面下载后动态下载外部文件，而这些文件在子页面中使用时，已经缓存在浏览器中。

23. 用链接替换@

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

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

24.避免使用过滤器

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

25.消除重复的脚本

重复引用同一页面中的文件会影响页面的性能。 您可能认为情况并非如此。 对美国排名前 10 位的网站进行的一项调查显示，其中两个网站有重复的脚本。 有两个主要因素导致脚本被重新引用的奇怪现​​象：团队规模和脚本数量。 如果是这种情况，重复的脚本会导致不必要的 HTTP 请求和无用的计算，从而降低网站性能。 不必要的 HTTP 请求在 中生成，但不在 中生成。 在 中，如果一个脚本被引用了两次并且它不可缓存，那么它会在页面加载期间发出两次 HTTP 请求。 即使可以缓存脚本，当用户重新加载页面时，也会发出额外的 HTTP 请求。 除了增加额外的 HTTP 请求之外，多次运行脚本也会浪费时间。 不管脚本是否可缓存，都存在重复计算的问题。 避免偶尔重复引用同一脚本的一种方法是使用脚本管理模块来引用模板中的脚本。 使用标记在 HTML 页面中引用脚本的最常见方法：在 PHP 中，它可以通过创建一个名为的方法来替换：

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

26.减少音量

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

去掉不需要的 尽可能小，减少对用户响应的影响 注意在适配级别的域名上设置，使子域名不受影响 设置合理的过期时间。 提早计时而不是过早清除将缩短用户响应时间。

27.静态资源不使用域名

当浏览器请求静态图像并在请求中发送它时，服务器不会对其进行任何操作。 因此，它们只是由于某些不利因素而产生的网络传输。 您应该确保对静态内容的请求是 None 请求。 创建一个子域并使用它来托管所有静态内容。

如果您的域名是，您可以在 上托管静态内容。 但是，如果您将它设置在顶级域上而不是在顶级域上，那么所有对它的请求都会被包括在内。 这种情况下，可以重新购买一个新的域名来存放静态内容，并把这个域名留空。 雅虎！ 使用、使用、使用等

28. 不要缩放 HTML 中的图像

不要仅仅为了在 HTML 中设置高度和宽度而使用过大的图像。 如果您需要：那么您的图像 (mycat.jpg) 应该是 像素，而不是缩小使用的 像素图像。

29. .ico 应该小且可缓存

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

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

30.跳跃的正确使用

在用户和 HTML 文档之间添加跳转将延迟页面上所有元素的显示，因为在加载 HTML 文件之前不会下载任何文件（图像、Flash 等）。 有一种跳跃现象，经常被web开发者忽略却又经常浪费响应时间。 当 URL 应包含斜杠 (/) 但被省略时，会出现此行为。 比如我们要访问，实际上返回的是一个包含301代码的跳转，指向（注意末尾的斜线）。 在服务器上可以使用Alias or or 来避免。

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