关于html页面优化问题
2016-02-19 13:46:08
今天php程序猿问我优化HTML有哪些方式， 确实被问住了。 虽然平时我也注意优化的问题，但是从来都没有自己整理过。html优化，我确实没有太注意。 但是平时我写的时候，有注意一些细节，但是不很很系统，下面我把自己的注意事项列举出来，
1.样式，结构，表现--分离css放在页头， js放在页尾
引用外联的css和javascript，样式表引用在页头，javascript的引用放在结尾。不仅让页面看上去简洁美观，而且以后维护的时候更方便
尽量避免在html结构中写styley样式。
避免css表达式（calc,toggle）
尽量避免在html结构中写styley样式。
避免css表达式（calc,toggle）
2.减少http请求次数是必须的
在css中，把所有的小图片合并在一张spitie（雪碧图）上，在引用css的时候，直接通过background-position进行使用。
3.图片-图片很关键，直接影响了页面加载的时间
如果页面上的图片很多，可以通过延迟加载的方式进行优化
批量压缩图片质量
HTML中的src尽量不要为空
避免重设图片大小
避免重设图片大小
4.html页面结构直接影响到页面的可扩展性
以前在看京东的时候觉得京东页面代码累赘，后来发现其实她这样做是为了以后为页面扩展。
5.seo优化， 在写页面的时候，吧title, alt这些都要带上，有利于提升seo排名
平时写图片的时候，记得把alt带上 alt="图片文字说明"
在head中记得把meta信息的keywords 以及 description, 当然不能忘记最重要的title
6.H标题的使用， 一个页面使用一个h1标签
7.ajax按需加载，减少页面html累赘.使用首屏加载，滚屏加载。
8.js要尽量少操作节点。
如果实在不能避免，尽量提高操作节点的优先级（id的优先级比较高。 class 次之， tag最低）
尽量使用css3动画（transform, keyframes）
尽量使用css3动画（transform, keyframes）
9.压缩html,css, javascript
10.增加loading进度条以及loading加载的方式
10.增加loading进度条以及loading加载的方式
