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

页面加载

加载资源的形式

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

加载一个资源的过程

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

浏览器渲染页面的过程

根据HTML结构生成DOM Tree
根据CSS生成CSSOM
将DOM和CSSOM整合形成RenderTree
根据RenderTree开始渲染和展示
遇到<script>时,会执行并阻塞渲染

window.onload & window.DOMContentLoaded

jquery,zepto等都是用的DOMContentLoaded这种方式

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

性能优化

• 多使用内存,缓存或者其他方法
• 减少CPU计算,减少网络

从哪里入手

加载页面和静态资源
页面渲染

加载资源优化

• 静态资源的合并压缩,减少请求数.
• 静态资源的缓存.
• 使用CDN让资源加载更快
• 使用SSR后端渲染,数据直接输出到HTML中

渲染优化

• CSS放前面,JS放后面
• 懒加载(图片懒加载,下拉加载更多)
• 减少DOM查询,对DOM查询做缓存
• 减少DOM操作,多个操作尽量合并在一起执行,
• 事件节流
• 尽早执行操作

Demo

合并

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>

<script type="text/javascript" src="abc.js"></script>

缓存

//通过链接名称控制缓存
<script type="text/javascript" src="abc_2.js"></script>
内容改变,名称改变
<script type="text/javascript" src="abc_2.js"></script>

懒加载

![](preview.png)
<script type="text/javascript">
    var img1 = document.getElementById('img1')
    img1.src = img1.getAttribute('data-realsrc')
</script>

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