web开发性能优化---界面篇

1、尽量采用div+css布局

DIV+CSS相比较与表格布局的优势:

a.代码精简

使用DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道。代码精简所带来的直接好处有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到蜘蛛喜欢,这样对收录数量有一定好处。

b.减少因嵌套多而影响蜘蛛爬行的问题

使用一般的Table表格架构,为了达到一定的视觉效果,不得不套用多个表格。如果嵌套的表格中是核心内容,spider爬行时跳过了这一段没有抓取到页面的核心,这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。而DIV+CSS布局基本上不会存在这样的问题,从技术角度来说,XHTML在控制样式时也不需要过多的嵌套。

c.方便修改与维护

由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。

d. 使页面载入得更快

由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套,那样将整个页面圈在一个大表格里,使得加载速度很慢。

2、img标签合理使用

a、限制图片大小 20-100k即可,尽量不影响展现的时候去最小化

b、title、alt属性写完整

c、不要为了在HTML 中设置长宽而使用比实际需要大的图片。如果你需要:

<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />

那么你的图片(mycat.jpg )就应该是100×100 像素而不是把一个500×500 像素的图片缩小使用。

3、少用js特效展示,避免瞎用js特效,影响加载

主要还是Js调用,直接页面中使用JavaScript语句,还是很占网页体积的,不要全部把js堆积在页面;比如当你增加一个事件句柄时在500 和5000 个DOM 元素中循环效果肯定是不一样的。

4、js、css动态压缩

web系统中免不了要使用大量的javascript和css文件,如开源的javascript框架prototype、jquery、extjs-core等等,这些js框架,少都有几百K,我曾经做过不少项目,都用了

大量的js。特别是extjs,功能实在是强大,却也是体积最大的一个js框架。使用中稍不留神很容易导致你的系统反映缓慢。为了提高js、css文件的下载速度,从而提高页面的响应速度,减小文件的大小才是终极之道。

我之前写到的文章:js、css动态压缩页面代码 可以根据此方法进行代码动态压缩。

5、避免使用死链接

6、为文件头指定Expires 或Cache-Control 

这条守则包括两方面的内容:

对于静态内容:设置文件头过期时间Expires 的值为“Never expire” (永不过期)

对于动态内容:使用恰当的Cache-Control 文件头来帮助浏览器进行有条件的请求

7、生成静态页面

8、二级站点域名,图片域名

9、图片延时加载

我之前写到的文章:jquery.lazyload.js实现图片懒加载 可以根据此方法进行图片局部延时加载。

10、可缓存的AJAX

11、根据域名划分页面内容 

把页面内容划分成若干部分可以使你最大限度地实现平行下载。由于DNS 查找带来的影响你首先要确保你使用的域名数量在2 个到4 个之间。例如,你可以把用到的HTML 内容和动态内容放在www.example.org上,而把页面各种组件(图片、脚本、CSS) 分别存放在statics1.example.org 和statics.example.org 上。

12、使iframe 的数量最小 

<iframe> 优点:解决加载缓慢的第三方内容如图标和广告等的加载问题 ;Security sandbox ;并行加载脚本 。

<iframe> 的缺点:即时内容为空,加载也需要时间;会阻止页面加载 ;没有语意 。

13、把样式表置于顶部 

在研究Yahoo! 的性能表现时,我们发现把样式表放到文档的<head /> 内部似乎会加快页面的下载速度。这是因为把样式表放到<head /> 内会使页面有步骤的加载显示。

14、使用外部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 ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。

15、避免使用滤镜 

IE 独有属性AlphaImageLoader 用于修正7.0 以下版本中显示PNG 图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。

完全避免使用AlphaImageLoader 的最好方法就是使用PNG8 格式来代替,这种格式能在IE 中很好地工作。如果你确实需要使用AlphaImageLoader ,请使用下划线_filter 又使之对IE7 以上版本的用户无效。

16、把脚本置于页面底部 

脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议,浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上,你可以在每个并行下载中同时下载2 个以上的文件。但是当下载脚本 时,浏览器就不会同时下载其它文件了,即便是主机名不相同。

在某些情况下把脚本移到页面底部可能不太容易。比如说,如果脚本中使用了document.write 来插入页面内容,它就不能被往下移动了。这里可能还会有作用域的问题。很多情况下,都会遇到这方面的问题。

一个经常用到的替代方法就是使用延迟脚本。DEFER 属性表明脚本中没有包含document.write ,它告诉浏览器继续显示。不幸的 是,Firefox 并不支持DEFER 属性。在Internet Explorer 中,脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟,那么它就可以移到页面的底部。这会让你的页面加载的快一点。

17、减小Cookie 体积

18、对于页面内容使用无coockie 域名

当浏览器在请求中同时请求一张静态的图片和发送coockie 时,服务器对于这些coockie 不会做任何地使用。因此他们只是因为某些负面因素而创建的网络传输。所有你应该确定对于静态内容的请求是无coockie 的请求。创建一个子域名并用他来存放所有静态内容。

如果你的域名是www.example.org,你可以在static.example.org 上存在静态内容。但是,如果你不是在www.example.org上 而是在顶级域名example.org 设置了coockie ,那么所有对于static.example.org 的请求都包含coockie 。在这种情况下,你可以再重新购买一个新的域名来存在静态内容,并且要保持这个域名是无coockie 的。Yahoo! 使用的是ymig.com ,YouTube 使用的是ytimg.com ,Amazon 使用的是images-anazon.com
等等。

使用无coockie 域名存在静态内容的另外一个好处就是一些代理(服务器)可能会拒绝对coockie 的内容请求进行缓存。一个相关的建议就是,如果你想确定应该使用example.org 还是www.example.org作 为你的一主页,你要考虑到coockie 带来的影响。忽略掉www 会使你除了把coockie 设置到*.example.org (* 是泛域名解析,代表了 所有子域名译者dudo 注)外没有其它选择,因此出于性能方面的考虑最好是使用带有www 的子域名并且在它上面设置coockie 。

19、favicon.ico 要小而且可缓存 

favicon.ico 是位于服务器根目录下的一个图片文件。它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要返回一个404 Not Found 的响应

。由于是在同一台服务器上,它每被请求一次coockie 就会被发送一次。这个图片文件还会影响下载顺序,例如在IE 中当你在 onload 中请求额外的文件时,favicon 会在这些额

外内容被加载前下载。

20、保持单个内容小于25K 

这条限制主要是因为iPhone 不能缓存大于25K 的文件。注意这里指的是解压缩后的大小。由于单纯gizp 压缩可能达不要求,因此精简文件就显得十分重要。

本文为个人经验和实际工作经历总结整理,写得不到之处请给出宝贵意见,谢谢。

时间: 2024-10-23 15:49:56

web开发性能优化---界面篇的相关文章

web开发性能优化---代码优化篇

1.合理使用缓存使用 提高性能最好最快的办法当然是通过缓存来改善,对于任何一个web开发者都应该善用缓存.Asp.net下的缓存机制十分强大,用好缓存机制可以让我们极大的改善web应用的性能. 1.页面缓存 2.部分页面缓存 3.使用DataSource缓存 4.Cache对象 2.避免数据库频繁连接 1.能采用SQL或直接存储过程一次执行的尽量不要用代码多次执行 2.及时关闭数据库连接 3.适当采取配置文件文件存频繁使用文件 1.对不经常更改并且数据量小的可采用xml或者配置文件设置 4.资源

web开发性能优化---分布式篇

1.分布式架构-独立站点开发 采用多web站点进行开发,为后期应对大数据量压力做准备,主要分为以下几部分: 1.web前端站点 2.图片.文件资源站点 3.管理端站点 4.数据接口站点 前期访问量和数据量较小可采取单台或小数目台数服务器部署,后期大数据量采取多web站点多数据服务器方式进行部署. 2.分布式部署-CDN分发式网络 CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户

web开发性能优化---SEO优化篇

一.清理垃圾代码 清理垃圾代码是指删除页面中的冗余代码.能够删除80%的冗余代码. 垃圾代码主要指那些删除了也不会对页面有不论什么影响的非必要代码. 最常见的垃圾代码.空格 空格字符是网页中最常见的垃圾代码. 但并非指标签,而是有代码编辑环境下敲击空格所产生的符号,每一个空格相当一个字符,那么也就是说.一个页面.空格就占页面体积的15%.100K的页面,有15K是空格字符. 空格字符最常出现 在代码的開始和结束处.还有就是空行中. 这些都是easy产生垃圾代码的地方.消除这种垃圾代码的方法就是选

web开发性能优化---扩展性能篇

1.实现代码分离 一个成熟的软件开发团队一般都不会完全手写代码,这里讲的代码分离只要是开发中用到的小技巧,通过底层框架+手工代码方式结合实现快速开发和快速扩展: Code文件夹内文件不允许修改,文件夹主要存放系统自动生成代码:同一DAL层下运行两个类名相同,采用partial合并类,但是两个类不允许有同名同参数方法: 利用partial关键字合并两个同名类小技巧,code存放代码底层工具自动生成代码类,根目录存放手工添加自定义方法类. 在后期扩展的时候由于前期代码是分开放置,所以数据库新增字段调

web开发性能优化---用户体验篇

怎样从技术角度怎样增强用户体验.都是非常多平台都在做的事情,依据个人实际经验碰到几种体验做下总结. 1.降低页面刷新白屏 适当使用ajax技术.改善刷新白屏现象. 2.信息提醒,邮件.站内信.短信在购物流程.售后流程适当添加信息温馨提醒环节: 3.定期回訪及互动记录好会员每次来电来訪.购买情况分析等数据做到定期客户关怀:添加生日免单.会员日等互动环节.增强互动性: 3.智能分析推荐分析会员购买偏好,智能推荐相关相关产品:依据会员喜欢定期推送促销信息: 4.多平台联合登录能够通过QQ.开心网.支付

web开发性能优化---项目架构篇

项目技术架构层级规划和介绍 简称四横两纵 四横即四大层次.分别为: 1.用户渠道层:用户渠道层是直接面向终于用户.通过站点的形式向用户提供产品展示.企业市场宣传.对产品的订购.互动分享.客户关怀以及用户中心入口等功能.并提供后期扩展移动终端接入: 2.应用业务层:该层面向的是系统管理人员. 为系统管理人员提供系统的总体管理,包含产品管理.企业管理.栏目管理.交易管理.信息管理.用户管理.统计分析.客户管理和日志管理. 以及对平台支付平台.短信平台.邮件平台.仓储物流.CDN分发.呼叫中心.CRM

web开发性能优化---UI接口章

1.尽可能的远div+css设计 DIV+CSS与表相比格优势布局: a.精简代码 采用DIV+CSS设计,页面代码精简.这是为了XHTML了解都知道. 代码精简所带来的直接优点有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面.这样对收录质量有一定优点;二是因为能高效的爬行,就会受到蜘蛛喜欢,这样对收录数量有一定优点. b.降低因嵌套多而影响蜘蛛爬行的问题 使用一般的Table表格架构,为了达到一定的视觉效果,不得不套用多个表格.假设嵌套的表格中是核心内容,spider爬行时跳过了这一

web开发性能优化---安全篇

1.权限管理 从模块.表单.数据审核.功能button全面数据安全验证及管理. 2.ip验证 数据接口訪问进行IP校验 3.登录.操作日志.程序安全日志  系统所实用户登录.操作所有日志记录. 程序安全日志操作可查看我之前写过[LogHelper 日志记录帮助类]. 4.SQL注入校验过滤 a.表单控件js前端校验.特殊字符过滤 b.採用Global.asax的Application_BeginRequest事件过滤敏感字符. c.request请求过滤 特殊字符过滤可查看我之前写过[採用Glo

Web项目开发性能优化解决方案

web开发性能优化---安全篇 1.ip验证 2.操作日志.安全日志.登录日志 3.SQL注入校验 4.权限管理 5.验证规范(前端.后端.数据库约束) 2014-10-29 08:04 2773 web开发性能优化---扩展性能篇 1.实现代码分离 一个成熟的软件开发团队一般都不会完全手写代码,这里讲的代码分离只要是开发中用到的小技巧,通过底层框架+手工代码方式结合实现快速开发和快速扩展: 2.模块化开发 模块化结构开发,尽量减... 2014-10-29 08:03 2399 web开发性能