1、尽可能的远div+css设计

DIV+CSS与表相比格优势布局：

a.精简代码

采用DIV+CSS设计，页面代码精简。这是为了XHTML了解都知道。

代码精简所带来的直接优点有两点：一是提高蜘蛛爬行效率，能在最短的时间内爬完整个页面。这样对收录质量有一定优点;二是因为能高效的爬行，就会受到蜘蛛喜欢，这样对收录数量有一定优点。

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

使用一般的Table表格架构，为了达到一定的视觉效果，不得不套用多个表格。假设嵌套的表格中是核心内容，spider爬行时跳过了这一段没有抓取到页面的核心。这个页面就成了相似页面。站点中过多的相似页面会影响排名及域名信任度。

而DIV+CSS布局基本上不会存在这种问题。从技术角度来说，XHTML在控制样式时也不须要过多的嵌套。

c.方便改动与维护

因为使用了DIV+CSS制作方法。在改动页面的时候更加easy省时。依据区域内容标记。到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框架。

使用中稍不留神非常easy导致你的系统反映缓慢。为了提高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 个以上的文件。可是当下载脚本 时。浏览器就不会同一时候下载其他文件了，即便是主机名不同样。

在某些情况下把脚本移到页面底部可能不太easy。

比方说，假设脚本中使用了document.write 来插入页面内容。它就不能被往下移动了。这里可能还会有作用域的问题。

非常多情况下。都会遇到这方面的问题。

一个经经常使用到的替代方法就是使用延迟脚本。DEFER 属性表明脚本中没有包括document.write ，它告诉浏览器继续显示。不幸的 是，Firefox 并不支持DEFER 属性。

在Internet Explorer 中。脚本可能会被延迟但效果也不会像我们所期望的那样。

假设脚本能够被延迟，那么它就能够移到页面的底部。这会让你的页面载入的快一点。





17、减小Cookie 体积





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

当浏览器在请求中同一时候请求一张静态的图片和发送coockie 时。server对于这些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 域名存在静态内容的另外一个优点就是一些代理（server）可能会拒绝对coockie 的内容请求进行缓存。一个相关的建议就是，假设你想确定应该使用example.org 还是www.example.org作 为你的一主页，你要考虑到coockie 带来的影响。

忽略掉www 会使你除了把coockie 设置到*.example.org （* 是泛域名解析，代表了 全部子域名译者dudo 注）外没有其他选择。因此出于性能方面的考虑最好是使用带有www 的子域名而且在它上面设置coockie 。





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

favicon.ico 是位于server根文件夹下的一个图片文件。它是必然存在的。由于即使你不关心它是否实用，浏览器也会对它发出请求，因此最好不要返回一个404 Not Found 的响应

。

因为是在同一台server上，它每被请求一次coockie 就会被发送一次。这个图片文件还会影响下载顺序。比如在IE 中当你在 onload 中请求额外的文件时，favicon 会在这些额

外内容被载入前下载。





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

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

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

本人新浪微博：http://weibo.com/i/1741159542

版权声明：本文博主原创文章，博客，未经同意不得转载， 注意很多其他科技博客贻芳：http://blog.csdn.net/fuyifang

web开发性能优化---UI接口章的更多相关文章

  1. web开发性能优化---UI界面篇

    1.尽量采用div+css布局 DIV+CSS相比较与表格布局的优势: a.代码精简 使用DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高 ...

  2. web页面性能优化之接口前置

    上个Q做了一波web性能优化,积累了一点点经验 记录分享一下. 先分享一个比较常用的接口前置 的优化方案吧 优化前首屏秒开大约在40%左右 首屏秒开大约提高了25% 先发一张优化成果图 前置原因 对于 ...

  3. WEB开发性能优化--核心定义介绍篇（1）

    推荐理由 随着 互联网的蓬勃发展,并且伴随着产品功能的越来越复杂,对于技术人员来说最大的挑战就是如何在保证业务快速发展的同时,也可保证不断复杂的业务对用户体验的影响,其中对用户来说最重要的体验指标是如 ...

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

    1.分布式架构-独立站点开发 模块化结构化开发,实现多资源分站点,数据分库,为后期实现分布式部署做准备,主要分为以下几部分: web站点: 1.web前端站点 2.图片.文件资源站点 3.管理端站点4 ...

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

    1.实现代码分离 一个成熟的软件开发团队一般都不会全然手写代码.这里讲的代码分离仅仅要是开发中用到的小技巧,通过底层框架+手工代码方式结合实现高速开发和高速扩展. Code目录内文件不同意改动,目录主 ...

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

    1.合理使用缓存使用 提高性能最好最快的办法当然是通过缓存来改善,对于任何一个web开发者都应该善用缓存.Asp.net下的缓存机制十分强大,用好缓存机制可以让我们极大的改善web应用的性能. 1.页 ...

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

    1.权限管理 从模块.表单.数据审核.功能按钮全面数据安全验证及管理. 2.ip验证 数据接口访问进行IP校验 3.登录.操作日志.程序安全日志  系统所有用户登录.操作全部日志记录. 程序安全日志操 ...

  8. web开发性能优化---数据库篇

    1. 查询出的数据量过大(可以采用多次查询,其他的方法降低数据量),尽量采取分页查询数据 2.锁或者死锁(这也是查询慢最常见的问题,是程序设计的缺陷) 3.返回了不必要的行和列 用OR的字句可以分解成 ...

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

    一.清理垃圾代码 清理垃圾代码是指删除页面中的冗余代码,可以删除80%的冗余代码. 垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码. 最常见的垃圾代码,空格 空格字符是网页中最常见的垃圾代 ...

随机推荐

  1. Golang 1.3 发布时间。最终找到地方下载。

    golang 1.3 已发布 但golang.org官方网站被封锁不能下载. 最终找到一个镜像站点. http://golang.so/ http://tip.golang.so/ golang中国的 ...

  2. bzoj1001/BJOI2006 灰太狼抓到的兔子

    1001: [BeiJing2006]狼抓兔子(id=1001">传送门) 图论新知识..没学过.. 平面图最小割等于对偶图的最短路 详见课件:http://wenku.baidu.c ...

  3. C#四舍五入保留两位小数

  4. 【转】Android Web Server

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://vaero.blog.51cto.com/4350852/1188602 Andr ...

  5. 走进C的世界-那些年我们常犯的错---keyword相关

    近期一段时间參加一些面试,发现非常多细节的问题自己已经变得非常模糊了.对一些曾经常常遇到的错误.如今也说不出原因了. 而且在编码过程中也相同犯这些错误. 特别写一个博客来记录这些我们常常遇到的错误.自 ...

  6. projecteuler----&gt;problem=14----Longest Collatz sequence

    title: The following iterative sequence is defined for the set of positive integers: n n/2 (n is eve ...

  7. UITabBarController详细说明(简介和设置)

    [objc] view plaincopy - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions ...

  8. Canvas翻转方法

     // 普通抽奖: // ctx.drawImage(img, px, py); // 级别"翻转"帆布 ctx.translate(canvas_width, 0); ctx. ...

  9. Vbox创建COM对象失败

    近期在使用vbox时出现下面错误:创建COM对象失败,应用程序将被中断 在CMD里面输入下面命令: C:\Users\Administrator>d: D:\>cd D:\Program ...

  10. 的无线通信网络的学习LTE的关键技术HARQ(20141217)

    今天,我们就来一起看一下LTE申请的关键技术HARQ(自己主动混合重传技术) 因为在信道传输过程中的信息,它会产生信息丢失,因此,为了维持的信息的完整性.总是有重发信息,完成所有的迄今收到的资料. 首 ...