如何优化页面

发布时间:2018年05月01日评论数：抢沙发阅读数： 6350

1.在书写HTML代码的时候，遵循标签语义化的要求，根据标签的语义性进行选择，如布局使用div、标题使用h系列标签、段落使用p标签等。

2.HTML代码要合理嵌套，一般情况下，行元素当中不能包含块元素，除了段落、标题类型的块元素当中，既能够包含块元素，也能够包含行元素，而段落或标题类的块元素只能够包含文字或行元素。table元素只能够直接包含thead、tbody、tfoot、caption等元素；ul/ol元素只能直接包含li元素；dl元素当中只能直接包含dt和dd元素；form表单当中只能直接包含filedset和legend，不能直接包含input元素。

3.使用外部引入CSS文件和JS文件，实现结构、样式和行为的相分离，降低模块间的耦合度。

4.CSS规则命名中，一律采用小写加中划线的方式，不使用下划线或大写字母，命名采用更简明有语义的英文单词进行组合，进行合理的缩写

5.CSS代码的书写顺序遵循CSS样式的渲染顺序：显示属性-自身属性-文本属性-其他

6.在上线之前进行CSS文件压缩

7.在CSS代码当中，尽量的规避掉不同浏览器的兼容问题，如果实在避免不了，也需要进行合理解决，同时尽可能的少使用hack。

8.尽量不在代码中出现没有意义的空标签，对于可以采用空标签清除浮动的代码，可以用其他方法解决，如after伪元素。

9.使用背景图合并技术，将多张背景图合并到一张图片上，从而降低页面与服务器之间的请求次数。

10.权衡嵌套层级以及扩展性等多个方面后，在适当位置使用三层嵌套技术。

11.合理的填写html文件中的title、meta等内容，合理书写a标签的title、img标签的title和alt，提升网站的SEO

12.CSS Sprite网页图片应用处理技术

13.合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可

14.语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

15.重要内容HTML代码放在最前：搜索引擎抓取HTMl顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

16.重要内容不要用js输出：爬虫不会执行js获取内容

17.少用iframe：搜索引擎不会抓取iframe中的内容

18.非装饰性图片必须加alt

19.提高网站速度：网站速度是搜索引擎排序的一个重要指标

content方面

1. 减少HTTP请求：合并文件、CSS精灵、inline Image

2. 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询

3. 避免重定向：多余的中间访问

4. 使Ajax可缓存

5. 非必须组件延迟加载