您的位置：首页 > 其它

web页面性能优化

2012-03-20 00:27 211 查看

导读：最近由于项目的需求，在web页面的优化上，可劲的学习了一把，整理作如下笔记，坚持在今后的工作中不断实践。

需要说明的是，这些优化建议，要根据实际生产环境做相应的调整，不可不用，但，过度使用，也是有危害的。web页面的优化，断不可脱离服务端而独立去探讨，所以，笔记也分两个大类进行，客户端（浏览器端）和服务器端（数据存储和获取）。

1 客户端

1.1 html

关于html，除了合理的缩进（减少不必要空格），从上之下，

· 首先是关于DCTYPE（文档类型声明）的声明。

为何要说这个呢？DOCTYPE 定义在HTML标签出现之前，它告诉浏览器这个页面包含的是HTML，XHTML，还是两者混合出现，这样浏览器才能正确的解析之后出现的标记。根据当前W3C的标准，以及大部分人使用的习惯，并在实际查看了包括google、yahoo、ibm、mozilla、sina、163、sohu、facebook等大型网站后，得出占有绝对比例的两种文档类型声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

归结原因，第一种，在传统互联网网站使用比较多，第二种，大多都是互联网的前卫，在他们的网站上，会使用很多属于html5和css3的功能，或者完成更友好的用户体验。

可以进一步读一下这篇文章。

· head 中 meta标签。

浏览器在对一个web页面进行解析的时候，是需要对当前dom加入编码控制的，一个显示的声明，会更加的安全。那这个和页面性能有毛关系呢？当然有，如果未声明，浏览器就会根据本身的设置，如果默认的情况下，会Auto Detect，页面正常显示，如果没有，这时候就会出现乱码，这算不算页面优化呢？！具体的写法，在以上第一种文档类型下，需要这么写：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

而第二种情况下，非常简洁：

<meta charset="utf-8">

更爽哪一种？No，不是个人喜好，要根据项目实际需求。

接着往下是link或script，但是关于他们优化有太多要做，所以，单独在后面列出。继续往下。

· 页面布局问题，table和div。

关于这二者，追求某一个的极度使用，都是有失平衡的。不信，那你打开google，yahoo的网站看看吧。该用什么就用什么。这个该，怎么界定，个人认为，有两点，一是常见的写法，就不赘述（比如div去实现导航，还不如用ul li呢）；二是你觉得怎么实现更便捷呢？比如一个信息表。就好像地址的写法，为何不用addr呢。那这和优化有神马联系啊？有的，往下看。

· h1～6。

我知道，也敢肯定，很多人不愿意使用他们。而是使用p来添加各种样式。干嘛，不可以啊，可以，但是，别忽略了浏览器在使用css对页面进行渲染，是要花大成本的。就像中国人吃饭，拿筷子多省力气啊，偏偏刀啊叉啊的，找别扭。如果你的p仅仅是用来显示默认文本，请使用h6吧。如果是标题，使用h1吧。上面那个问题，有答案了。想起一句话，存在即是必然。

· img。

不就是图片吗？不管是那种文档类型的声明，最好都把alt属性加上，这不单单是对于浏览器的优化，还是对搜索引擎的优化。如果想兼容mozilla，再加上title吧。

· 闭合。

独立标签（input *看过许多人写的html，这个标签的闭合操作，往往被忘记）和闭合标签。别忘了，浏览器在解析的过程中，直到没有一个警告和错误，那该多美好啊。

我当前了解到的，就这些了。检测页面是否符合标准，那就去W3C吧。

1.2 link（css）

· 不要内嵌css。

· 选择器尽量使用id和元素本身，少限定选择，去除不必要限定选择（b＃a)。（渲染优化，id作为hashmap存储，效率高。）这个可以做一个测试，写一个简单的页面，只有一个p标签，使用id和class分别进行渲染，css写在style中，p标签写上10w行。查看页面加载完成时间。

<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->

· 合并相应样式（font、marging、border等）。（文档大小优化，而且，最好按mozilla推荐来写，这个和性能关系不大，是和维护有关）

· 不使用@important。可以看看这篇文章：don‘t use @important（渲染优化，IE，为何不单独写一个css呢，使用）

· 类名简单，根据组合原理，2～4个字节就是完全满足了。没有意义？如果命名安排清晰，那就是可行。（文档大小优化）

· 压缩、压缩、各种压缩。推荐几个工具吧：CSS Optimiser CSS Compressor Clean CSS 。

（今儿先笔记到此。。。）

1.3 script（js、php）

2 服务器端

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航