网站性能优化分类总结

HTML部分

1.语义化HTML:可以使代码简洁清晰,支持不同设备,便于团队开发,对搜索引擎和用户更加友好;

2.减少DOM节点:加速页面渲染;

3.给图片加上正确的宽高值:减少页面重绘,同时防止图片缩放;

4.避免src属性和link的href属性为空:当值为空时浏览器很可能会把当前页面当成其属性值加载;

5.正确的闭合标签;

CSS部分

1.避免使CSS表达式:expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;

2.避免使用 CSS Filter(CSS滤镜);

3.使用CSS缩写,减少代码量;

4.通过CSS Sprites把同类图片合成一张,减少图片请求;

5.减少查询层级:如.header .logo要好过.header .top .logo;

6.减少查询范围:如.header>li要好过.header li;

7.避免元素标签与class或id并存:如a.top、button#submit;

8.删除重复的CSS,删除空白、换行、注释。

9.用link而不用@import方式导入样式;

JavaScript部分

1.尽量少用全局变量;

2.使用事件代理绑定事件,如将事件绑定在body上进行代理;

3.避免频繁操作DOM节点;

4.不使用eval;

5.减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;

6.删除重复的JS;

服务器部分

1.尽量合并CSS、JS文件,或将其直接写在页面上,减少HTTP请求;

2.使用gzip压缩内容,压缩CSS、JS文件可缩短文件传输时间;

3.避免404错误:避免给404指定一个停摆页面,否则所有404错误都将会加载一次页面;

4.在减少DNS查询次数与并发下载之间做好平衡。一般要求减少DNS查询次数,如同一个页面的请求资源尽量少的使用不同的主机名,这可以减少网站并行下载的数量,但很多网站为了加速下载资源其实是特意用了多个主机名。

5.使用CDN加速,使用户从离自己最近的服务器下载文件;

6.减少Cookie的大小,

7.静态资源使用无cookie的域,客户端请求它们时,可减少Cookie 的反复传输对主域名的影响;

8.为文件头指定Expires,使内容具有缓存性;

9.将css放在顶部,js放在底部,防止js加载对后面资源的阻塞。

10.缩小favicon.ico并缓存;

时间: 2024-10-11 01:03:41

网站性能优化分类总结的相关文章

Yahoo! 35条网站性能优化建议

Yahoo! 35条网站性能优化建议 分类: 网站性能优化2014-03-08 17:18 212人阅读 评论(0) 收藏 举报 网站性能优化 Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是旨在提高网站性能.原版猛戳:Best Practices for Speeding Up Your Web Site, Excetional Perfo

如何进行网站性能优化

如何进行网站性能优化 雅虎Best Practices for Speeding Up Your Web Site: content方面 减少HTTP请求:合并文件.CSS精灵.inline Image 减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件.方法:DNS缓存.将资源分布到恰当数量的主机名,平衡并行下载和DNS查询 避免重定向:多余的中间访问 使Ajax可缓存 非必须组件延迟加载 未来所需组件预加载 减少DOM元素数量 将资源放到不同的域下:浏览器同时从一个域下载

网站性能优化:动态缩略图技术实现思路

在网站开发过程中,大家都是如何解决多尺寸图片缩略图问题的呢?犹为典型的是电商网站,据了解,淘宝的图片缩略图是直接存储多张缩略图的方式,以满足各种情况下使用,因为它有牛逼的开源+自主开发的海量图片存储架构作支撑.但是,我们在做网站时,并不可能直接搬牛逼的架构过来,就可以达到预期的效果,况且各种成本投入也是有限的.所以一般性能优化的原则大都是这样:先考虑软件的优化,再考虑硬件的升级,当然土豪客户则除外. 很多网站可能没有对图片进行缩略图处理,上传时图片可能几百KB,在页面也是直接加载几百KB的图片大

网站性能优化你需知道的东西

本文提到的网站性能指网站的响应速度,这也符合绝大部分人对于网站性能的理解:访问快速的网站性能好,反之,访问速度越慢,则网站性能越差.本文总结的优化方法是宏观的工程层面的方法,并不包含微观的语言语法层面的方法,例如,JS.CSS的语法优化,这一部分同样影响网站的性能,但语言语法层面的优化更多的是取决于开发人员的编程水平. 什么样的网站响应速度快呢?其实很容易想到,网站加载资源的速度越快,网站响应速度越快:网站需要加载的资源越少,网站响应速度越快.这就分别对应网站性能优化的两大方向:资源缓存.资源合

网站性能优化

之前在做电商网站的时候,曾经因为网站图片太多,加载过慢而不得不提高服务器性能,但阿里云服务器提升性能较贵,便去找了找关于网站性能优化的知识,没想到的确省了一些钱,性能有所好转.最近公司的项目又再次涉及到性能优化问题,总结了下之前经历的项目经验,得出以下几点优化思路: 1.从请求入手,找到最慢的一个 就好像木桶原理一样,找到最短的一块进行弥补.性能优化也一样,找到最慢的那部分请求进行优化.一般可以分为图片.css\js文件.后台请求等几方面. 通过对请求进行分析找到最慢的一个进行优化 2.图片优化

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特

mysql分解连接的总结(来自于高性能MySQL以及自己网站性能优化)

许多高性能的站点都用了"分解连接"技术,也就是把单个多表连接查询改成多个但表查询,然后在程序中合并数据,比如: select a.*,b.* from A a join B b on a.id = b.id 可以替换为: select a.* from A; select b.* from B; 然后再把数据通过程序合并. 可能有些人认为这太浪费了,把一个查询语句变成两条查询语句或者更多的查询语句了,如果哪位猿类这样想了,那你就应该继续往下看了. 将连接查询重构为多表查询,总体有以下性

【转】Yahoo!团队:网站性能优化的35条黄金守则

Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是旨在提高网站性能. 原版猛戳:https://developer.yahoo.com/performance/rules.html,本文转自:http://blog.csdn.net/xianghongai/article/details/9241549 Excetional Performan

Yahoo团队经验:网站性能优化的34条黄金法则

Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少 HTTP请求的次数.这是提高网页速度的关键步骤.减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这