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