Yahoo!网站性能最佳体验的34条黄金守则 JavaScript和CSS
构建高性能的网站+-+Yahoo14条军规
GET //lib/common/utils/2/yahoo_2.0.0-b2.js HTTP/1.1 Host: User-Agent: Mozilla/5.0 (...) Gecko/20061206 Firefox/1.5.0.9 Accept-Encoding: gzip,deflate Connection: keep-alive HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Wed, 22 Feb 2006 04:15:54 GMT Connection: keep-alive
•
GET //lib/common/utils/2/yahoo_2.0.0-b2.js HTTP/1.1 Host: User-Agent: Mozilla/5.0 (...) Gecko/20061206 Firefox/1.5.0.9 Accept-Encoding: gzip,deflate If-Modified-Since: Wed, 22 Feb 2006 04:15:54 GMT HTTP/1.1 304 Not Modified Content-Type: application/x-javascript Last-Modified: Wed, 22 Feb 2006 04:15:54 GMT
网站易用性规则34条
完美的内容是用来使用的，不管您的内容多么精彩，如果它们很难访问，用户照样会离开，易用性不仅仅牵扯到技术，更多的是良好的Web 创作习惯以及易用性。
以下就介绍34条实用的网站建设规则，希望能对建站朋友们有用。
1、只使用成熟，简单，兼容的技术Web 技术一直在发展，因为 Http 协议最初只是为了表现简单的超文本，当人们赋予Web 越来越多的使命的时候，Web 的局限性就表现出来了，为了解决这些问题，人们在 Web 上面附加了很多新技术以增强 Web 的表现能力，Cookie, Javscript, DHTML, ActiveX, Applet, CSS 一直到现在炙手可热的 AJAX 技术，然而这些新技术很快带来了兼容性问题，因为 Web 内容要靠浏览器解释，不同的浏览器加不同的安全配置，导致这些新技术并不能被如期地渲染出来。
2、Cookie, Javascript, CSS如果您希望您的企业网站能在绝大多数环境下被无障碍的访问，请谨慎使用除此之外的技术，这里我们需要特别说一下 AJAX 和 Flash，它们也被很多人认可，而且 AJAX 事实上是基于 Javascript 的，然而，AJAX 同时要使用在某些浏览器安全配置下容易被禁用的XMLHTTPRequest 对象，事实上，我的 IE 浏览器的安全配置就禁用 XMLHTTPRequest ，所以，除非加入到可信任站点，否则我连 Google Map 都无法顺畅访问。
Flash 是一种伟大技术，在线广告几乎是它最完美的使命，作为易用性规则，我们不排斥以 Flash 技术提供广告，但 Flash 绝对不可以用在站点导航等站点基础结构中。
3、不使用任何网页特效虽然网页特效并不一定涉及不兼容技术，但网页特效对绝大多数人来说是非常厌烦的，企业网站绝对不应该使用那些仅仅为了好玩的网页特效，除非您还生活在90年代(现在已经是2009年)，或者您只有14岁。
使用Wordress插件和最佳实践优化网站速度和响应时间
使用Wordress插件和最佳实践优化网站速度和响应时间WordPress是目前最受欢迎的内容管理系统之一，它被广泛应用于建立和管理网站。
然而，由于一些因素，如主题、插件、图片和代码等导致的不良优化，很多WordPress网站在速度和响应时间方面存在问题。
本文将介绍使用WordPress插件和最佳实践来优化网站速度和响应时间的方法。
一、优化主题主题是WordPress网站的外观和功能的基础。
选择轻量级、经过优化的主题是提高网站速度的关键。
以下是一些选取和优化主题的最佳实践：1. 选择响应式设计的主题，以确保您的网站可以在各种设备上获得最佳的显示效果。
2. 避免使用功能繁多的主题，尽量选择简洁、干净的主题，这些主题通常会有更好的性能表现。
3. 在主题之前使用速度测试工具，如Google PageSpeed Insights和GTmetrix，评估主题的加载速度和性能。
4. 删除不必要的主题文件和代码，只保留必需的功能和样式。
二、优化插件插件是WordPress的灵魂，但使用过多的插件可能导致网站速度下降。
以下是一些优化插件的方法：1. 审查并删除未使用的插件，只保留必要的插件。
2. 选择轻量级、功能强大的插件，避免使用臃肿的插件。
3. 使用缓存插件来缓存网页内容，减少对数据库的查询次数。
4. 压缩和合并CSS和JavaScript文件，以减少HTTP请求和文件大小。
三、优化图片图片是网站加载时间较长的主要原因之一。
以下是一些优化图片的方法：1. 在上传图片之前，确保将其压缩到最小尺寸，同时保持图像质量不受损。
2. 使用适当的图像格式，如JPEG、PNG或GIF，根据具体情况选择最佳的格式。
3. 使用Lazy Load技术，只加载当前可见区域的图片，延迟加载其他图片，减少页面内容的初始加载时间。
四、使用缓存使用缓存可以减少网站每次加载时的数据库查询次数，从而提高网站的速度和响应时间。
以下是一些缓存技术的使用方法：1. 安装并配置缓存插件，如W3 Total Cache或WP Super Cache。
网页注意事项
网页注意事项在设计和开发网页的过程中，遵循一些注意事项可以帮助提高网页的质量和用户体验。
以下是一些重要的网页设计和开发注意事项：1. 响应式设计：现代网页必须能够在不同屏幕尺寸和设备上正常显示，包括手机、平板电脑和桌面电脑。
使用响应式设计能够确保网页在不同设备上都可以良好展示。
2. 简洁明了的布局：一个清晰的布局可以使用户更容易浏览网页内容，找到他们需要的信息。
尽量避免过度装饰和复杂的布局。
3. 易于导航：为了帮助用户快速浏览网页内容，应该设计一个明确的导航栏或菜单，以便用户能够轻松找到所需的页面。
4. 易于阅读的内容：文字应该使用易于阅读的字体和颜色，避免使用太小或太亮的文字。
段落和标题应该清晰分开，使用恰当的行距和间距。
5. 快速加载速度：网页加载速度是用户体验的关键因素之一。
优化图像大小和格式、压缩CSS和Javascript文件等方法可以帮助提高网页加载速度。
6. 良好的可访问性：确保网页内容可以被所有用户访问，包括有视觉或听觉障碍的用户。
使用具有良好可访问性的标签、提供文字描述等方式可以增加网页的可访问性。
7. 浏览器兼容性：网页应该在主流浏览器上正常运行，包括Chrome、Firefox、Safari和Edge。
在开发过程中进行适当的测试，以确保网页在不同浏览器上都能够正确显示。
8. 安全性：网页应该设计和开发完善的安全措施，以保护用户的个人信息和数据不受到恶意攻击。
9. 及时更新和维护：定期更新和维护网页可以确保它的功能正常，并且符合最新的设计和技术标准。
10. 良好的用户体验：用户体验是设计和开发网页时应该考虑的关键因素之一。
通过实施易用的导航、响应迅速的网页、有吸引力的设计和清晰的内容，可以提供良好的用户体验。
总结起来，设计和开发一个优秀的网页需要考虑多个因素，包括响应式设计、简洁明了的布局、易于导航、快速加载速度、良好的可访问性、浏览器兼容性、安全性、及时更新和维护以及良好的用户体验。
优化网站性能 提高网站速度访问速度的14条实践
优化网站性能提高网站速度访问速度的14条实践西风坊 2009年01月07日17:57 查看...次作者:yaosl 【大中小】文章分类：前端交互相信互联网已经越来越成为人们生活中不可或缺的一部分。
ajax，flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实现的功能。
比如Google机会已经把最基本的office应用都搬到了互联网上。
当然便利的同时毫无疑问的也使页面的速度越来越慢。
自己是做前端开发的，在性能方面，根据yahoo的调查，后台只占5%，而前端高达95%之多，其中有88%的东西是可以优化的。
以上是一张web2.0页面的生命周期图。
工程师很形象地讲它分成了“怀孕，出生，毕业，结婚”四个阶段。
如果在我们点击网页链接的时候能够意识到这个过程而不是简单的请求-响应的话，我们便可以挖掘出很多细节上可以提升性能的东西。
今天听了淘宝小马哥的一个对yahoo开发团队对web性能研究的一个讲座，感觉收获很大，想在blog上做个分享。
相信很多人都听过优化网站性能的14条规则。
更多的信息可见1. 尽可能的减少 HTTP 的请求数[content]2. 使用 CDN（Content Delivery Network）[server]3. 添加 Expires 头(或者 Cache-control ) [server]4. Gzip 组件[server]5. 将 CSS 样式放在页面的上方[css]6. 将脚本移动到底部（包括内联的）[javascript]7. 避免使用 CSS 中的 Expressions [css]8. 将 JavaScript 和 CSS 独立成外部文件[javascript] [css]9. 减少 DNS 查询[content]10. 压缩 JavaScript 和 CSS (包括内联的) [javascript] [css]11. 避免重定向[server]12. 移除重复的脚本[javascript]13. 配置实体标签（ETags）[css]14. 使 AJAX 缓存在firefox下有一个插件yslow，集成在firebug中，你可以用它很方便地来看看自己的网站在这几个方面的表现。
雅虎给出的34条优化网站访问速度加快方法
条黄金守则（（一）内容团队实践分享：：网站性能优化的34条黄金守则Yahoo!团队实践分享Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。
他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。
最佳实践的核心就是旨在提高网站性能。
Excetional Performance团队总结出了一系列可以提高网站速度的方法。
可以分为7大类34条。
包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。
其中内容部分一共十条建议：一、内容部分•尽量减少HTTP请求•减少DNS查找•避免跳转•缓存Ajxa•推迟加载•提前加载•减少DOM元素数量•用域名划分页面内容•使frame数量最少•避免404错误1、尽量减少HTTP请求次数终端用户响应的时间中，有80%用于下载各项内容。
这部分时间包括下载页面中的图像、样式表、脚本、Flash等。
通过减少页面中的元素可以减少HTTP请求的次数。
这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。
那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把合并文件所有的CSS文件都放入一个样式表中。
当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。
CSS Sprites是减少图像请求的有效方法。
把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；图片地图是把多张图片整合到一张图片中。
虽然文件的总体大小不会改变，但是可以减少图片地图HTTP请求次数。
网站设计：用户体验设计的七个原则
网站设计：用户体验设计的七个原则1. 简单明了的界面设计一个好的网站设计应该追求简洁、直观的界面设计。
通过精简内容和布局，使得用户能够快速找到他们想要的信息，并且能够轻松地进行操作。
在界面设计中避免使用过多复杂的图形和文字，保持整体风格统一、清晰明了。
2. 易于导航的网站结构一个好的网站应该有清晰明确的导航结构，帮助用户快速找到所需内容。
在设计导航菜单时，应该考虑到用户常用功能和页面之间的逻辑关系，使得导航流程简单顺畅。
同时，提供搜索功能也是一种有效的辅助导航方式。
3. 快速加载时间网站加载时间是一个重要指标，决定了用户是否愿意等待和继续访问你的网站。
因此，在网站设计中需要尽量优化页面加载速度。
这可以通过压缩文件大小、合理使用图片和视频资源以及选择合适的服务器来实现。
4. 响应式设计随着移动设备使用率日益增加，响应式设计已经变得必不可少。
这意味着你的网站应该能够适应不同屏幕尺寸和设备类型，提供用户友好的浏览体验。
通过使用媒体查询和弹性布局，可以实现网站自动适应各种终端设备。
5. 强调内容重要性一个好的网站设计需要将重要的内容置于显眼位置，让用户一目了然。
使用合适的字体、颜色和视觉效果来突出重点信息。
同时，通过良好的排版和组织方式，确保页面内容易于阅读和理解。
6. 清晰明了的表单设计如果你的网站涉及用户提交表单或进行交互，那么表单设计就变得尤为重要。
一个好的表单设计应该简洁明了、易于填写，并提供明确的错误提示和反馈机制。
避免过多繁琐的字段，只收集必要信息。
7. 用户测试和反馈最后而且也是至关重要的一点是进行用户测试和收集用户反馈。
通过与真实用户交流，我们可以了解他们在使用我们网站时所遇到的问题，并及时作出改进。
这有助于优化网站设计和改善用户体验。
以上是用户体验设计中的七个原则，在进行网站设计时应尽量满足这些原则。
只有在用户体验方面做好，才能真正吸引和留住用户，并提升网站的价值和竞争力。
yahoo前端优化34条规则
虽然减少了HTTP请求的次数，却增加了HTML文档的大小。 HTML文档的次数
一个会话中用户会浏览你网站中的多个页面，幵且这些 页面中会重复使用相同的脚本和样式表，缓存外部文件 • 从另一方面来说，如果外部文件中的 JavaScript和CSS被浏览器 就会带来更大的益处 缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大 小。
1 <link rel='stylesheet' href='a.css' />
会引起样式文件花费更长的时
间来下载，这会阻碍页面的渲 染，让人感到页面比较慢。
1<style> 2 @import url('a.css'); 3</style>
22、避免使用滤镜
• 这里指的是IE自带的几种页面劢态滤镜 • 仅限于IE使用，在Maxthon、Firefox上是没有效果 • CSS3+HTML5实现滤镜效果
• 如果需要多次访问某个DOM节点，请使用局部变量存储它的作用。
function collectionNodesLocal() { var coll = document.getElementsByTagName('div'), len = coll.length, arr = [], el = null; for (var count = 0; count < len; count++) { el = coll[count]; cls = el.className; cnt = el.innerHTML; arr.push([cls,cnt]) } return arr; };
• CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到
Web程序优化的最佳实践：JavaScript和CSS篇
Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。
他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。
最佳实践的核心就是旨在提高网站性能。
Excetional Performance 团队总结出了一系列可以提高网站速度的方法。
可以分为 7 大类 34 条。
包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。
本文为CSS和Javascript部分：除此之外，JavaScript 和 CSS 也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：CSS：1. 把样式表置于顶部2. 避免使用CSS表达式（Expression）3. 使用外部JavaScript和CSS4. 削减JavaScript和CSS5. 用<link>代替@import6. 避免使用滤镜JavaScript7. 把脚本置于页面底部8. 使用外部JavaScript和CSS削减JavaScript和CSS 和剔除重复脚本（参考3、4）9. 减少DOM访问10. 开发智能事件处理程序1、把样式表置于顶部在研究Yahoo!的性能表现时，我们发现把样式表放到文档的<head />内部似乎会加快页面的下载速度。
这是因为把样式表放到<head />内会使页面有步骤的加载显示。
注重性能的前端服务器往往希望页面有秩序地加载。
同时，我们也希望浏览器把已经接收到内容尽可能显示出来。
这对于拥有较多内容的页面和网速较慢的用户来说特别重要。
向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。
在我们的研究中HTML页面就是进程指针。
当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。
这从整体上改善了用户体验。
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。
搜索引擎优化中的12个黄金规则
1、网页优化的重要的部分就是title部分，这个地方应该是你每次优化的重点标题与关键字的符合度越高越好。
网站建设前一定要认真的分析百度的相关关键字策略，对网站进行详细的关键字筛选。
长尾关键词更有利于提高网站流量。
2、网页的头部和底部是很重要的对于搜索引擎来说，尽量的将关键字加到里面。
不要去在乎所谓的关键词密度，只要你的密度不超过50%，只要你提供的内容是符合的，只要你的内容对于你的用户来说是重要的，不可缺少的，适当的加入些关键词在页面里，只是更好的提醒搜索引擎。
3、外链是非常重要的外链决定了网站在索索引擎中的排名，但是并不是说外链多，排名一定就高，毕竟决定网站排名的因素还有很多，外链只不过是其中的一个重要部分。
记住永远不要进行群发，群发的结果是有一天你发现你的网站突然在索索引擎中消失了。
4、内容是网站优化的灵魂只有有好的内容才会吸引搜索引擎的到来，而且要保持天天更新你的网站，以便蜘蛛来访时候有东西可吃。
最好的方法是定时更新网站，每天保持下去。
内容最好是原创的，因为搜索引擎是非常的喜欢原创的。
网上的千篇一律的东西它是不会去也不喜欢去看的。
5、其实，最终的一个部分应该是服务器和域名的选择首先，必须选择一个好的域名，最好选择.com的，.cn的个人感觉权重没有.com好，确保域名容易记住，而且没有被搜索引擎惩罚过。
还要选择一个好的服务器，如果你的网站所在的服务器经常的出现问题，导致网站频繁出现不能浏览的问题。
那么你的网站就会受到很大的影响。
排名会很难提升的。
所以服务器的选择是非常重要的一个部分。
6、只把网站的首页进行SEO是远远不够的，网站优化最好是全站同时进行每个内容页都必须有您想优化的关键字，尤其是相关相关关键字，内容页尽量不要采集，尤其是文章开头的100个字最好不要与其它站的页面相同。
1、宝贵的meta元标签尽量给你的网页写上特定的标签，标签里要包含你所做的关键字词。
对于不同的网页内容，你需要自己琢磨出合适的标签以提高搜索引擎的机器人对你网站的覆盖范围，并通过此分辨出你网站的有效主题。
再谈Yahoo关于性能优化的N条军规
4、避免空的src和href留意具有这两个属性的标签如link，script，img，iframe等；5、使用gzip压缩内容Gzip压缩所有可能的文件类型以来减少文件体积6、把CSS放到顶部实现页面有秩序地加载，这对于拥有较多内容的页面和网速较慢的用户来说更为重要，同时，HT ML规范清楚指出样式表要放包含在页面的<head />区域内；7、把JS放到底部HT T P/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个，而问题在于脚本阻止了页面的平行下载，即便是主机名不相同8、避免使用CSS表达式页面显示和缩放，滚动、乃至移动鼠标时，CSS表达式的计算频率是我们要关注的。
可以考虑一次性的表达式或者使用事件句柄来代替CSS表达式。
9、将CSS和JS放到外部文件中我们需要权衡内置代码带来的HT T P请求减少与通过使用外部文件进行缓存带来的好处的折中点。
10、减少DNS查找次数我们需要权衡减少 DNS查找次数和保持较高程度并行下载两者之间的关系。
11、精简CSS和JS目的就是减少下载的文件体积，可考虑压缩工具JSMin和YUI Compressor。
12、避免跳转为了确保“后退”按钮可以正确地使用，使用标准的 3XXHT T P状态代码；同域中注意避免反斜杠 “/”的跳转；跨域使用 Alias或者 mod_rewirte建立 CNAME（保存一个域名和另外一个域名之间关系的DNS记录）13、剔除重复的JS和CSS重复调用脚本，除了增加额外的HT T P请求外，多次运算也会浪费时间。
在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
14、配置ETagsEntity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内容”，包括图片、脚本、样式表等），是比last-modified date更更加灵活的机制，单位时间内文件被修过多次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。
用户体验三要素
用户体验三要素用户体验三要素别让我等曾有很多研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。
也许这样讲，各位还不会有太多感触，接下来，我列举一组数据：Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。
怎么样?现在感受如何?是不是该马上去做测试工作呢。
这时候你也许会问：什么原因会导致网站打开慢?有什么办法解决呢?别急，我一一道来。
以下内容有些偏技术层面，各位需要耐心阅读。
1、减少HTTP请求数用户在打开一个网页的时候，后台程序响应用户所需的时间并不多，用户等待的时间主要花费在下载网页元素上了，即HTML、CSS、Javascript、Flash、图片等，统计显示，每增加一个元素，网页载入的时间就增加25-40毫秒(取决于用户的带宽情况)。
所以，想要提高网页打开速度，就要减少HTTP请求数，方法有3种：1)减少不必要的HTTP请求，例如用CSS圆角代替圆角图片，减少图片的使用。
2)合并文件，对于文本文件，可以直接合并内容。
例如将多个JS(Javascript的简称)文件合并成一个，将多个CSS文件合并成一个。
3)优化缓存，对于没有变化的网页元素(如页头、页尾等)，用户再次访问的时候没有必要重新下载，直接从浏览器缓存里读取就可以了。
2、使用CDN(Content Delivery Network，内容分发网络)CDN由一系列分散到各个不同地理位置上的Web服务器组成，它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。
当你的网站图片很多事，就一样要使用CDN了，比如现在的电商网站，几乎都在使用CDN。
3、压缩网页元素网页中的每个元素越小，下载所需的时间就越少，这个很好理解。
现在比较成熟和流程的压缩网页的方式，是通过Gzip，我自己的实操经验来看，一般可以将网页文本内容减少70%以上。
前端性能优化：雅虎14条优化规则
前端性能优化：雅虎14条优化规则1.减少HTTP请求数 常⽤的⽅法，合并css，js（将⼀个页⾯中的css和js⽂件分别合并）以及 Image maps和css sprites等。
2.使⽤CDN（内容分发⽹络） 通过在现有的Internet中增加⼀层新的⽹络架构，将⽹站的内容发布到最接近⽤户的 cache服务器内，通过DNS负载均衡的技术，判断⽤户来源就近访问cache服务器取得所需的内容。
3.添加Expire/Cache-Control 头 Expire其实就是通过header报⽂来指定特定类型的⽂件在浏览器中的缓存时间。
⼤多数的图⽚，flash在发布后都是不需要经常修改的，做了缓存以后这样浏览器以后就不需要再从服务器下载这些⽂件⽽是直接从缓存中读取，这样再次访问页⾯的速度会⼤⼤加快。
4.启⽤Gzip压缩 Gzip的思想就是把⽂件先在服务器端进⾏压缩，然后再传输，这样可以显著减少⽂件传输的⼤⼩。
传输完毕后浏览器会重新对压缩过的内容进⾏解压缩，并执⾏。
5.将css放在页⾯最上⾯ 因为 IE，Firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。
IE把样式表放在页⾯的底部的问题在于它禁⽌了⽹页内容的顺序显⽰。
浏览器阻⽌显⽰以免重画页⾯元素，那⽤户只能看到空⽩页了。
Firefox不会阻⽌显⽰，但这意味着当样式表下载后，有些页⾯元素可能需要重画，这导致闪烁问题。
所以我们应该尽快让css加载完毕。
6.将script放在页⾯最下⾯ 因为script脚本的执⾏会阻塞页⾯的下载并且会阻塞并⾏下载数量，放在页⾯最下⾯可以有效减少页⾯可视元素的加载时间。
7.避免在CSS中使⽤Expressions 避免在CSS中使⽤表达式。
8.把javascript和css都放到外部⽂件中 不仅从性能优化上会这么做，⽤代码易于维护的⾓度看也应该这么做。
9.减少DNS查询 在域名和ip地址之间的转换⼯作称为域名解析，也称DNS查询。
雅虎网站页面性能优化34条
1、尽量减少HTTP请求次数终端用户响应的时间中，有80%用于下载各项内容。
这部分时间包括下载页面中的图像、样式表、脚本、Flash等。
通过减少页面中的元素可以减少HTTP请求的次数。
这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。
那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。
当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。
CSS Sprites是减少图像请求的有效方法。
把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；图片地图是把多张图片整合到一张图片中。
虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。
图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。
确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；内联图像是使用data:URL scheme的方法把图像数据加载页面中。
这可能会增加页面的大小。
把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。
但是内联图像现在还没有得到主流浏览器的支持。
减少页面的HTTP请求次数是你首先要做的一步。
这是改进首次访问用户等待时间的最重要的方法。
如同Tenni Theurer的他的博客Browser Cahe Usage - Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。
让那些初次访问你网站的人获得更加快速的体验吧！2、减少DNS查找次数域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系一样。
Yahoo 14条 雅虎十四条 优化原则
Yahoo 14条雅虎十四条优化原则【转】腾讯前端设计的Leader推荐我背熟的。
请大家都能好好学习，不要像我一样一扫而过，好好的记下来！不仅仅是晓得一些CSS xhtml就好了，深刻认识到很多的东西需要学习的。
很早就用Firebug，但是却没听说过Yslow，这叫不喜欢追求。
希望大家关注前端设计的，多追求。
有兴趣的同学可以装个Firebug 下的Yslow ，测试下自己的网站。
Web 应用性能优化黄金法则：先优化前端程序(front-end) 的性能，因为这是80% 或以上的最终用户响应时间的花费所在。
法则1. 减少HTTP 请求次数80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash 等，的下载上。
减少页面元素将会减少HTTP 请求次数。
这是快速显示页面的关键所在。
一种减少页面元素个数的方法是简化页面设计。
但是否存在其他方式，能做到既有丰富内容，又能获得快速响应时间呢？以下是这样一些技术：Image maps 组合多个图片到一张图片中。
总文件大小变化不大，但减少了HTTP 请求次数从而加快了页面显示速度。
该方式只适合图片连续的情况；同时坐标的定义是烦人又容易出错的工作。
CSS Sprites 是更好的方法。
它可以组合页面中的图片到单个文件中，并使用CSS 的background-image 和background-position 属性来现实所需的部分图片。
Inline images 使用data: URL scheme 来在页面中内嵌图片。
这将增大HTML 文件的大小。
组合inline images 到你的（缓存）样式表是既能较少HTTP 请求，又能避免加大HTML 文件大小的方法。
Combined files 通过组合多个脚本文件到单一文件来减少HTTP 请求次数。
样式表也可采用类似方法处理。
这个方法虽然简单，但没有得到大规模的使用。
网站易用性规则34条
完美的内容是用来使用的，不管您的内容多么精彩，如果它们很难访问，用户照样会离开，易用性不仅仅牵扯到技术，更多的是良好的Web 创作习惯以及易用性。
以下就介绍34条实用的网站建设规则，希望能对建站朋友们有用。
1、只使用成熟，简单，兼容的技术Web 技术一直在发展，因为 Http 协议最初只是为了表现简单的超文本，当人们赋予Web 越来越多的使命的时候，Web 的局限性就表现出来了，为了解决这些问题，人们在 Web 上面附加了很多新技术以增强 Web 的表现能力，Cookie, Javscript, DHTML, ActiveX, Applet, CSS 一直到现在炙手可热的 AJAX 技术，然而这些新技术很快带来了兼容性问题，因为 Web 内容要靠浏览器解释，不同的浏览器加不同的安全配置，导致这些新技术并不能被如期地渲染出来。
2、Cookie, Javascript, CSS如果您希望您的企业网站能在绝大多数环境下被无障碍的访问，请谨慎使用除此之外的技术，这里我们需要特别说一下 AJAX 和 Flash，它们也被很多人认可，而且 AJAX 事实上是基于 Javascript 的，然而，AJAX 同时要使用在某些浏览器安全配置下容易被禁用的XMLHTTPRequest 对象，事实上，我的 IE 浏览器的安全配置就禁用 XMLHTTPRequest ，所以，除非加入到可信任站点，否则我连 Google Map 都无法顺畅访问。
Flash 是一种伟大技术，在线广告几乎是它最完美的使命，作为易用性规则，我们不排斥以 Flash 技术提供广告，但 Flash 绝对不可以用在站点导航等站点基础结构中。
3、不使用任何网页特效虽然网页特效并不一定涉及不兼容技术，但网页特效对绝大多数人来说是非常厌烦的，企业网站绝对不应该使用那些仅仅为了好玩的网页特效，除非您还生活在90年代(现在已经是2009年)，或者您只有14岁。
《编程技巧：提高网页性能的五个方法》
编程技巧：提高网页性能的五个方法引言随着互联网的发展，网页性能成为了用户体验和搜索引擎排名的关键因素。
优化网页性能可以提高用户满意度、减少页面加载时间和资源消耗。
本文将介绍五个提高网页性能的编程技巧，帮助开发者优化他们的网站。
1. 压缩文件在将CSS和JavaScript文件部署到生产环境之前，可以使用压缩工具来减小文件大小。
压缩文件不仅可以加快下载速度，还可以降低网络流量和服务器负载。
常用的压缩工具有UglifyJS和CSSNano。
例：原始文件大小：100KB压缩后文件大小：50KB2. 图片优化图片通常占据网页中大量的数据量。
优化图片可以显著提高页面加载速度。
以下是一些优化图片的方法：•使用适当格式：选择合适的格式（如JPEG、PNG或WebP）以平衡图像质量和文件大小。
•压缩图片：使用压缩工具（如TinyPNG）来减少图片文件大小。
•图片懒加载：只有当用户滚动到可见区域时才加载图片。
原始图片大小：500KB优化后图片大小：100KB3. 利用缓存机制缓存是一种提高网页性能的重要机制。
通过在浏览器中缓存静态资源，可以减少对服务器的请求并加快页面加载速度。
•设置合理的缓存头：通过设置Expires或Cache-Control头来控制资源缓存时间。
•版本控制：在文件名上添加版本号或哈希值，以确保当文件更新时浏览器能够重新请求最新版本。
例：设置Expires头使资源在未来30天内可从浏览器缓存加载。
4. 延迟加载将 Javascript 和 CSS 代码分为不同的模块，并延迟加载那些非关键性和非紧急的模块，可以有效减少初始页面加载时间。
以下是一些常见的延迟加载技术：•异步加载JavaScript：使用async或defer属性，在下载 JS 文件时不阻塞 HTML 解析。
例：<script src="script.js" async></script>•预先加载关键和可视区域所需的 CSS 和 JavaScript。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
转载自/article.asp?id=216英文地址：/performance/rules.html在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外，JavaScript和CSS也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：CSS：1.把样式表置于顶部2.避免使用CSS表达式（Expression）3.使用外部JavaScript和CSS4.削减JavaScript和CSS5.用<link>代替@import6.避免使用滤镜JavaScript1.把脚本置于页面底部2.使用外部JavaScript和CSS3.削减JavaScript和CSS4.剔除重复脚本5.减少DOM访问6.开发智能事件处理程序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树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。