CSS：
把样式表置于顶部
避免使用CSS表达式（Expression）
使用外部JavaScript和CSS
削减JavaScript和CSS
用<link>代替@import
避免使用滤镜
JavaScript
把脚本置于页面底部
使用外部JavaScript和CSS
削减JavaScript和CSS
剔除重复脚本
减少DOM访问
开发智能事件处理程序
17、把样式表置于顶部
在研究Yahoo!的性能表现时，我们发现把样式表放到文档的<head />内部似乎会加快页面的下载速度。这是因为把样式表放到<head />内会使页面有步骤的加载显示。
注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
HTML规范清楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能出现在文档的<head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文档<head />内加载你的样式表。
18、避免使用CSS表达式（Expression）
CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );
如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用，因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
一个减少CSS表达式计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。
19、使用外部JavaScript和CSS
很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的问题：JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本身之内呢？
在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。
关键问题是，外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。
许多网站没有功能建立这些指标。对于这些网站来说，最好的坚决方法就是把JavaScript和CSS作为外部文件引用。比较适合使用内置代码的例外就是网站的主页，如Yahoo!主页和My Yahoo!。主页在一次会话中拥有较少（可能只有一次）的浏览量，你可以发现内置JavaScript和CSS对于终端用户来说会加快响应时 间。
对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置JavaScript和CSS，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。
20、削减JavaScript和CSS
精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时，所有的注释、不需要的空白字符（空格、换行、tab缩进）等都要去掉。在JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。精简JavaScript中目前用到的最广泛的两个工具是JSMin和YUI Compressor。YUI Compressor还可用于精简CSS。
混淆是另外一种可用于源代码优化的方法。这种方法要比精简复杂一些并且在混淆的过程更易产生问题。在对美国前10大网站的调查中发现，精简也可以缩小原来代码体积的21%，而混淆可以达到25%。尽管混淆法可以更好地缩减代码，但是对于JavaScript来说精简的风险更小。
除消减外部的脚本和样式表文件外，<script>和<style>代码块也可以并且应该进行消减。即使你用Gzip压缩过脚本和样式表，精简这些文件仍然可以节省5%以上的空间。由于JavaScript和CSS的功能和体积的增加，消减代码将会获得益处。
21、用<link>代替@import
前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。
在IE中，页面底部@import和使用<link>作用是一样的，因此最好不要使用它。
22、避免使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
23、把脚本置于页面底部
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
在某些情况下把脚本移到页面底部可能不太容易。比如说，如果脚本中使用了document.write来插入页面内容，它就不能被往下移动了。这里可能还会有作用域的问题。很多情况下，都会遇到这方面的问题。
一个经常用到的替代方法就是使用延迟脚本。DEFER属性表明脚本中没有包含document.write，它告诉浏览器继续显示。不幸的是，Firefox并不支持DEFER属性。在Internet Explorer中，脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟，那么它就可以移到页面的底部。这会让你的页面加载的快一点。
24、剔除重复脚本
在同一个页面中重复引用JavaScript文件会影响页面的性能。你可能会认为这种情况并不多见。对于美国前10大网站的调查显示其中有两家存在重复引用脚本的情况。有两种主要因素导致一个脚本被重复引用的奇怪现象发生：团队规模和脚本数量。如果真的存在这种情况，重复脚本会引起不必要的HTTP请求和无用的JavaScript运算，这降低了网站性能。
在Internet Explorer中会产生不必要的HTTP请求，而在Firefox却不会。在Internet Explorer中，如果一个脚本被引用两次而且它又不可缓存，它就会在页面加载过程中产生两次HTTP请求。即时脚本可以缓存，当用户重载页面时也会产生额外的HTTP请求。
除增加额外的HTTP请求外，多次运算脚本也会浪费时间。在Internet Explorer和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
一个避免偶尔发生的两次引用同一脚本的方法是在模板中使用脚本管理模块引用脚本。在HTML页面中使用<script />标签引用脚本的最常见方法就是：
<script type=”text/javascript” src=”menu_1.0.17.js”></script>
在PHP中可以通过创建名为insertScript的方法来替代：
<?php insertScript(”menu.js”) ?>
为了防止多次重复引用脚本，这个方法中还应该使用其它机制来处理脚本，如检查所属目录和为脚本文件名中增加版本号以用于Expire文件头等。
25、减少DOM访问
使用JavaScript访问DOM元素比较慢，因此为了获得更多的应该页面，应该做到：
缓存已经访问过的有关元素
线下更新完节点之后再将它们添加到文档树中
避免使用JavaScript来修改页面布局
有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章“高性能Ajax应该程序”。
26、开发智能事件处理程序
有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。
你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。
你可能会希望用DOMContentLoaded事件来代替onload，但是在所有浏览器都支持它之前你可使用YUI 事件应用程序中的onAvailable方法。
分享到：
相关推荐
3. 网站优化的内容： 内容优化、技术优化、结构优化和外部链接优化是主要部分。内容优化注重原创和有价值的信息；技术优化涉及代码简洁、响应式设计和移动友好；结构优化是指合理的URL结构、关键词布局和网站地图；...
3. youhua.jpg：可能是与百度优化相关的示例图或者效果展示，让用户直观地了解优化前后网站排名的变化。 4. win.dll：这是一个动态链接库文件，通常用于支持程序的运行，这里可能是百度排名优化工具的一部分，提供...
具体内容包括：基于用户体验的性能优化要素、前端性能优化实战、网站性能分析、服务端性能优化、TCP优化、DNS优化、CDN优化、大型网站性能监控体系、大型网站容量评估、高性能系统架构模式、大促保障体系、数据分析...
网站优化不仅仅是关于关键词的堆砌，而是涵盖了多个方面，包括但不限于内容质量、用户体验、技术优化等。本篇文章将深入探讨SEO的基础知识，帮助你理解如何通过有效的优化策略提升网站的搜索引擎排名。 首先，我们...
网站优化10条 网站优化是一个很大的话题，有一些通用的原则，也有针对不同开发平台的一些建议。雅虎的工程师团队曾经给出过 35 个最佳实践，可以参照Best Practices for Speeding Up Your Web Site。同时，他们还...
SEO的主要工作是通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的...
网站优化，特别是搜索引擎优化（SEO），是提升网站在搜索引擎结果页面排名、增加可见性和吸引潜在用户访问的关键策略。"网站优化.rar"这个压缩包可能包含了关于SEO优化的各种资源和工具，比如"网站优化.exe"可能是一...
网站优化和SEO（搜索引擎优化）是提升网站在线可见度的关键技术，主要目的是为了在搜索引擎的自然搜索结果中获得更高的排名，从而吸引更多的有机流量。本教程将深入探讨这两个概念及其重要性，帮助你掌握有效提高...
SEO（Search Engine Optimization）是网站优化的重要组成部分，其主要目标是提高网站在搜索引擎中的自然排名，从而增加网站的可见度和吸引更多的潜在用户。在这个"seo网站优化-资料"的压缩包中，包含了多份关于SEO的...
【润心油茶网站优化方案】是一份针对中小型企业网站提升搜索引擎排名和网络营销效果的全面策划。该方案由宜春动网网络科技有限公司提供，旨在帮助企业在Google等搜索引擎中获得更好的左侧排名，从而增加网站曝光度，...
### 18个网站优化技巧：首页响应慢与首页速度优化 #### 一、引言 随着互联网技术的发展，用户对网页加载速度的要求越来越高。快速的页面加载不仅能够提升搜索引擎排名，还能显著改善网站转化率及用户体验。然而，...
网站优化计划方案是提升网站在搜索引擎中的可见性和用户体验的关键步骤，主要目标是提高搜索引擎排名，增加网站流量，最终实现业务增长。以下是对标题和描述中所提及知识点的详细说明： 一、SEO综合查询竞争度分析 ...
SEO网站优化不仅仅是关于关键词的堆砌，而是涉及到网站结构、内容质量、用户体验等多个方面。下面将详细阐述SEO网站优化的思路与推广策划。 一、关键词研究 关键词是连接用户搜索意图和网站内容的桥梁。进行SEO优化...
网站性能优化是提升用户体验、降低服务器负担的关键环节，尤其在当今互联网环境中，用户对网页加载速度有着极高的期待。本文将深入探讨网站性能优化的方案和原理，主要围绕"高性能网站建设指南(上1).pdf"这份资料...
### 某个网站优化SEO方案 #### 一、竞争对手分析 在进行SEO优化之前，首先需要对竞争对手进行深入分析，以便明确自身网站的优势与不足之处。本案例中，主要针对“痔疮”、“痔疮治疗”、“怎样治疗痔疮”、“治疗...
【大型网站优化策略】 在构建和管理大型网站时，优化策略是至关重要的，因为它直接影响到网站的可发现性、用户体验和搜索引擎排名。以下是一些关键的优化策略： 1. **关键词分析**： - **选择原则**：了解用户的...
SEO网站优化步骤 SEO流程操作及网站优化技巧网站的SEO流程，假设需要花一年的时间来完成。大致可以分为以下四个阶段： 第一阶段是准备期，主要要完成以下三个工作： 站点分析---形成站点分析报告 竞争对手分析---...
在构建和运行大型网站时，优化是至关重要的...以上方案涵盖了大型网站优化的主要方面，实施这些措施可以显著提升网站的性能和用户体验。然而，每个网站都有其独特性，因此在实际操作中，应根据具体情况灵活调整和优化。