HTML优化

精简HTML代码

• 减少HTML的嵌套
• 减少DOM节点数
• 减少无语义代码 （比如：<div class="clear"></div> // 清除浮动）
• 删除http或者https,如果URL的协议头和当前页面的协议头一致的，或者此URL在多个协议头都是可用的，则可以考虑删除协议头
• 删除多余的空格，换行符，缩进和不必要的注释
• 省略冗余标签和属性
• 使用相对路径的URL

文件放在适合的位置

• CSS样式文件链接尽量放在页面头部

  CSS加载不会阻塞DOM tree解析，但是会阻塞DOM Tree渲染，也会阻塞后面JS执行。任何body元素之前，可以确保在文档部分中解析了所有CSS样式（内联和外联），从而减少了浏览器必须重排文档的次数。如果放置在页面底部，就要等到最后一个CSS文件下载完毕，此时会出现‘白屏’，影响用户体验。

• JS引用放在HTML底部

  防止JS的加载，解析，执行对阻塞页面后续元素的正常渲染。

增强用户体验

• 设置 favicon.ico

  网站如果不设置favicon.ico，控制台会报错，另外页面加载过程中也没有图片loading过程，同时也不利于记忆网站品牌，建议统一添加。

• 增加首屏必要的CSS和JS

  页面如果需要等待所依赖的JS和CSS加载完成才显示，则在渲染过程中页面会一直显示空白，影响用户体验，建议增加首屏必要的CSS和JS,比如页面框架背景图片或者loading图标，内联在HTML页面中。这样做，首屏能快速显示出来，相对减少用户对页面加载等待过程。

CSS优化

提升CSS渲染性能

• 谨慎使用expensive属性

  如：nth-child伪类；position:fixed 定位

• 尽量减少样式层级数

  如： div ul li span i {color: red;}

• 尽量避免使用占用过多CPU和内存的属性

  如：text-indnt:-9999px

• 尽量避免使用耗电量大的属性

  如:CSS3 3D transforms, CSS3 transitions, Opacity

合适的使用CSS选择器

• 尽量避免使用CSS表达式

  background-color: expression((new Date()).getHours()%2?"#fff":"#000");

• 尽量避免使用通配选择器

  body > a{font-weight: blod;}

• 尽量避免使用类正则的属性选择器

  *=, |=, ^=, $=

提升CSS文件加载性能

• 使用外链的CSS
• 尽量避免使用@import

精简CSS代码

• 使用缩写语句
• 删除不必要的零
• 删除不必要的单位，如px
• 删除过多分号
• 删除空格和注释
• 尽量减少样式表的大小

合理使用Web Fonts

• 将字体部署在CDN上
• 将字体以base64形式保存在CSS中并通过localStorage进行缓存
• Google字体库因为某些不可抗拒原因，应该使用国内托管服务

CSS动画优化

• 尽量避免同时动画
• 延迟动画初始化
• 结合SVG