HTML优化
- 在书写HTML代码时，遵循标签语义化的要求，根据标签的语义性进行选择，如布局使用div、标题使用h系列标签、段落使用p标签等。
- HTML代码要合理嵌套，一般情况下，行元素当中不能包含块元素，除了段落、标题类型的块元素当中，既能够包含块元素，也能够包含行元素，而段落或标题类的块元素只能够包含文字或行元素。table元素只能够直接包含thead、tbody、tfoot、caption等元素；ul/ol元素只能直接包含li元素；dl元素当中只能直接包含dt和dd元素；form表单当中只能直接包含filedset和legend，不能直接包含input元素。
- 使用外部引入CSS文件和JS文件，实现结构、样式和行为的相分离，降低模块间的耦合度。
- CSS规则命名中，一律采用小写加中划线的方式，不使用下划线或大写字母，命名采用更简明有语义的英文单词进行组合，进行合理的缩写。
- CSS代码的书写顺序遵循CSS样式的渲染顺序：显示属性-自身属性-文本属性-其他。
- 在上线之前进行CSS文件压缩。
- 在CSS代码当中，尽量规避掉不同浏览器的兼容问题，如果实在避免不了，也需要进行合理解决，同时尽可能的少使用hack。
- 尽量不在代码中出现没有意义的空标签，对于可以采用空标签清除浮动的代码，可以用其他方法解决，如after伪元素。
- 使用背景图合并技术，将多张背景图合并到一张图片上，从而降低页面与服务器之间的请求次数。
- 权衡嵌套层级以及扩展性等多个方面后，在适当位置使用三层嵌套技术。
- 合理的填写html文件中的title、meta等内容，合理书写a标签的title、img标签的title和alt，提升网站的SEO。
- CSS Sprite网页图片应用处理技术。
- 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可。
- 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页。
- 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
- 重要内容不要用js输出：爬虫不会执行js获取内容。
- 少用iframe：搜索引擎不会抓取iframe中的内容。
- 非装饰性图片必须加alt。
- 提高网站速度：网站速度是搜索引擎排序的一个重要指标。
Content方面
- 减少HTTP请求：合并文件、CSS精灵、inline Image。
- 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询。
- 避免重定向：多余的中间访问。
- 使Ajax可缓存。
- 非必须组件延迟加载。
- 未来所需组件预加载。
- 减少DOM元素数量。
- 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量。
- 减少iframe数量。
- 不要404。
Server方面
- 使用CDN。
- 添加Expires或者Cache-Control响应头。
- 对组件使用Gzip压缩。
- 配置ETag。
- Flush Buffer Early。
- Ajax使用GET进行请求。
- 避免空src的img标签。
Cookie方面
- 减小cookie大小。
- 引入资源的域名不要包含cookie。
CSS方面
- 将样式表放到页面顶部。
- 不使用CSS表达式。
- 使用不使用@import。
- 不使用IE的Filter。
Javascript方面
- 将脚本放到页面底部。
- 将javascript和css从外部引入。
- 压缩javascript和css。
- 删除不需要的脚本。
- 减少DOM访问。
- 合理设计事件监听器。
图片方面
- 优化图片：根据实际颜色需要选择色深、压缩。
- 优化css精灵。
- 不要在HTML中拉伸图片。
- 保证favicon.ico小并且可缓存。
移动端方面
- 保证组件小于25k。
- Pack Components into a Multipart Document.
评论区