性能优化--学习笔记

// 性能优化
/**

• 多使用内存、缓存或其他方法

• 减少 cpu 计算、网络

• 加载页面 和 静态资源

• 页面渲染
  **/

  // 加载资源优化
  // 1. 静态资源的压缩合并
  // 2. 静态资源缓存
  // 通过连接名称控制缓存
  // 3. 使用CDN让资源加载更快
  // 一些公共资源 使用 boot CDN
  // 4. 使用 SSR 后端渲染，数据直接输出到 HTML 中 (jsp,php,就是属于一种后端渲染；vue，react提出的新出概念)
  
  // 渲染优化
  // 1. css 放前面， js 放后面
  // 2. 懒加载(图片懒加载、下拉加载更多（什么时候用什么时候加载）)
  
  // 3. 减少 DOM 查询，对 DOM 查询做缓存
  var i; // 为缓存实例
  for(i =0; i< document.getElementsByClassName('p').length;i++){
      //todo
  }
  
  var pList = document.getElementsByClassName('p');
  var i; // 已缓存 实例
  for(i = 0;i<pList.length;i++){
      // todo
  }
  
  // 4. 减少(合并) DOM 操作，多个操作尽量合并在一起执行
  var listNode = document.getElementById('list');
  
  // 要插入 10 个 li 标签
  var frag = document.createDocumentFragment();
  var x, li;
  for(x=0; x < 10; x++){
      li = document.createComment('li');
      li.innerHTML = 'List item ' + x;
      frag.appendChild(li); // 不会去触发dom 操作
  }
  
  listNode.appendChild(frag);
  
  // 5. 事件节流
  
  // 6. 尽早执行操作(如 DOMContentLoaded,window.onload)
  window.addEventListener('load',function(){
      // 页面的全部资源加载完才会执行，包括图片、视频等
  });
  
  document.addEventListener('DOMContentLoaded', function(){
      // DOM 渲染完即可执行，此时 图片、视频还可能没有加载完
  });