慕课网《前端JavaScript面试技巧》学习笔记（10）-页面加载与性能优化

1.从输入url到得到HTML的详细过程
2.window.onload和DOMContentLoaded的区别
3.性能优化的几个示例

知识点#####

• 加载资源的形式

  • 输入url（或跳转页面）加载HTML http://xxxxx.com
  • 加载HTML中的静态资源 只有内容改变时才更改名称
  • 使用CDN
  • 使用SSR后端渲染（Vue、React）
  • 懒加载

     ![](min.jpg)
     
  

  • 缓存DOM查询var x=document.getElementBy... 这样可以避免多次执行DOM查询
  • 合并DOM插入

  var listNode=document.getElementById('list')
  //插入10个li标签
  var frag=document.createDocumentFragment();
  var x,li
  for(x=0;x<10;x++){
    li=document.createElement('li')
    li.innerHTML='List item'+x
    frag.appendChild(li)
  }
  listNode.appendChild(frag)
  

  • 事件节流
    在快速操作时不执行事件，在停顿时执行，以减少计算次数

  var textarea=document.getElementById('text')
  var timeoutId
  textarea.addEventListener('keyup',function(){
    if(timeoutId){
      clearTimeout(timeoutId)
    }
    timeoutId=setTimeout(function () {
      //触发change事件
    }, 100);
  })
  

  • 尽早操作

  window.addEventListener('load',function(){
  //页面的全部资源加载完成才会执行，包括图片视频等
  })
  document.addEventListener('DOMContentLoaded',function(){
  //DOM渲染完即可执行，此时图片视频等可能还没加载完
  })