页面加载和渲染过程

页面加载和渲染过程

题目
  • 从输入url到渲染出页面的整个过程(见下:资源形式、加载过程、渲染过程)
    • 下载资源:各个资源类型、下载过程
    • 渲染页面:结合html、css、js图片等
  • window.onloadDOMContentLoad的区别
    • window.onload页面全部加载完成包括图片
    • DOMContentLoad是dom渲染完成即可,此时图片视频可能还没有加载完
document.addEventListener('load',()=>{
     
  console.log('window loaded')
})

document.addEventListener('DOMContentLoaded',()=>{
     
  console.log('dom loaded')
})
知识点
  • 加载资源的形式
  • 加载资源的过程
  • 渲染页面的过程
资源形式
  • html代码
  • 媒体文件,如图片视频等
  • js、css代码
加载过程
  • DNS解析:域名=>IP地址
  • 浏览器更具IP地址向服务器发起http请求
  • 服务器处理http请求,并返回给浏览器
渲染过程
  • 根据html生成dom树
  • 根据css生成cssom(css对象模型)
  • 将dom树和cssom整合形成render tree(渲染树:像是dom树中挂了css属性)
  • 根据render tree渲染页面
  • 遇到

你可能感兴趣的:(前端自我修养进阶,页面加载和渲染过程,前端基础,前端,js)