浅谈页面加载和性能优化

• 从输入url到得到html的详细过程
• window.onload 和document.DOMContentLoaded的区别

页面加载

加载资源的形式

输入url加载html
加载html中的静态资源

加载一个资源的过程

浏览器根据DNS服务器得到域名的IP地址
向这个IP的机器发送http请求
服务器收到,处理并返回http请求
浏览器得到返回内容

浏览器渲染页面的过程

根据HTML结构生成DOM Tree
根据CSS生成CSSOM
将DOM和CSSOM整合形成RenderTree
根据RenderTree开始渲染和展示
遇到

缓存

//通过链接名称控制缓存

内容改变,名称改变

懒加载

![](preview.png)

减少DOM查询及操作

这个就不写了...

事件节流

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渲染完即可执行,此时图片视频还可能没有加载完
})