web前端页面性能优化小结

一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。

结构中主要包括了head和body两个部分，我们经常说的是结构语义化主要是body中的标签。

body中的话，包括的标签就很多了，，比如div,span,h,ul,ol,dl,p等等这类的标签的使用。应该非常合理，还有就是注意h标签的断层，及h1标签的使用，这些都是非常重要的。

同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。注意结构与表现、行为的分离。

PS：标签语义化的好处：

1.有利于搜索引擎；

2.结构清晰的HTML在团队合作中的作用，

3.有利于盲人屏幕阅读器。

二、css，js文件数量及大小的优化

关于css、js的优化的话，一般情况下建议css和js采用外联式。如果你的页面内容比较多，设计师把整个效果做得比较花的话，恐怕css就非常多了，那么这种情况下，一定要把css规划好，尽量的采用缩写，这样可以减少css文件的大小，那么对css做相应的规划也可以减少css的个数，减少http请求数，js同理。

PS：减少重复性代码，代码重复利用，在这里显得特别重要

三、背景图片数量及大小的优化

我们需要对图片做优化处理。内容图片我们是没有办法了，因为他是属于内容部分的，一般情况是由于编辑处理，当然，我在还是有一个小小的建议，如果我们的网站中需要有内容图片，希望编辑能够将他们最优化以后，在进行上传

由于背景图片数量比较多，会给服务器带来影响，增加了http请求数，可以在我们的css定义背景的时候，可以通过坐标来实现对背景进行定位的，既然如此，那么我们可以将这些背景合并起来，这样即可减少http请求数，同时，在背景整合的时候，也需要考虑图片质量，同时也需要考虑图片的大小，

PS：这里建议使用PNG8格式的图片结合css sprite，同样的图片，PNG8格式会相对来比GIF小

四、内容图片的大小的优化

背景图片保证不超过3个以上，css文件不超过2个，js文件不超过3个。而且良好的遵守web标准的一些规定，css放到head中，js文件放到之前或者之后。

对你的页面进行裸体检查。其实就是来检验你的结构语义化是否有效果。

裸体检查：就是将你的css和js都去掉，查看你的html，看这些内容你是否能够看懂。

检测你的h标签是否断层。

（PS：就是按照h1,h2,h3,h4....，不要中间漏掉h2）

建议body中增加text-align:center。

当然还有很多，比如什么id，class的命名呀，这些东西，我觉得应该是你的团队中应该做的事情。

（PS：这里得去好好看看clsaa选择器的权重和优先级）

作为大型网站来说，首页使用内联式样式表，这样可以减少http请求数的同时，也可以防止裸奔。当然其他页面需要使用外联样式表，这样才可以方便维护。因为作为大型网站来说，他的首页访问量是非常的大的，所以

把样式表置于顶部

把脚本置于页面底部

避免使用 CSS 表达式（Expression）

使用外部 JavaScript 和 CSS

削减 JavaScript 和 CSS

用 代替 @import

避免使用滤镜

剔除重复脚本

减少DOM访问

开发智能事件处理程序

最好的方案就是按照 HTML 规范在文档 内加载你的样式表。

Coockie:

减小Cookie体积

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

图片：

优化图像

优化CSS Spirite

不要在HTML中缩放图像

favicon.ico要小而且可缓存