前端性能优化（包含js、css性能优化--笔记）

1、前端优化

  js和css优化相同、重复的部分放到此处。
  1、script标签放在body标签尾部，css link标签引用放在head标签内，减少白屏时间。
  2、合理使用http缓存，js、css文件资源合并，使用精灵图，图片使用base64编码，懒加载等，减少http请求数。js、css文件压缩，gzip压缩，去除空格回车等多余字符。

2、CSS性能优化

  1、减少首屏加载css的时间，将首屏加载的关键css内联到html中，Github上有一个项目Critical CSS4，可以将属于首屏的关键样式提取出来。
  2、在减少首屏css加载完后，异步加载css，css会阻塞渲染，在css文件请求、下载、解析完成之前，浏览器将不会渲染任何处理的内容，
  3、去除无用的css样式。
  4、有选择的使用选择器，尽量少使用标签、通配符、属性选择器，也不要用id选择器去修饰标签选择器，没有意义。
  5、适当减少消耗想能较高的css属性，如box-shadow、透明度等。
  6、优化重排和重绘，避免不必要的重排和重绘。
  7、不要使用@import引用外部样式，
  8、减少css嵌套
  9、建立公共样式表，提取相同样式出来作为公共类使用。如清楚浮动。
  10、少用css表达式，虽然让你代码看起来比较酷炫，但是性能消耗大。
  减少不必要的样式重置css reset。

// 什么是样式重置？修改html大部分标签在游览器中的默认样式。
h1, h2, h3, h4, h4, h5 {
	margin:0;
	padding:0;
}

3、js性能优化

  1、阻塞式脚本资源加载，合并资源减少http请求数。
  2、非阻塞式脚本资源加载：延迟脚本和动态脚本均不阻塞，即下载过程不阻塞其他进程。
    （1）延迟脚本，defer和async，async下载完成立即执行，defer，页面加载完成再执行。
    （2）动态脚本，动态添加script标签，返回的代码通常会立刻执行。
  3、减少全局变量的使用，访问全局变量比访问局部变量要慢。
  4、减少DOM操作，涉及大量的DOM元素增加删除，使用文档随便document.createDocumentFragment一次性生成。
  5、使用prefetch进行DNS预解析。
  6、垃圾回收，不适用的对象重置为null，否则可能因为互相引用对象而造成内存使用率不断提高。
  7、事件委托，不必为每一次子元素都添加事件，添加到父容器上，通过冒泡标签判断触发事件。

（有待更新。。。）