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
