【运行环境】加载资源的形式

前端小超人rui

已于 2024-04-10 16:06:55 修改

阅读量237

点赞数 1

CC 4.0 BY-SA版权

分类专栏：面试题文章标签：前端性能优化

于 2024-04-10 15:57:43 首次发布

本文链接：https://blog.csdn.net/qq_21087199/article/details/137600216

面试题专栏收录该内容

32 篇文章

订阅专栏

1 加载资源的形式

html代码
媒体文件，如图片，视频等
javasccript css

2 加载资源的过程

DNS解析：域名-> ip地址
浏览器根据IP地址向服务器发送http 请求
服务器处理http 请求，并返回给浏览器

3 渲染页面的过程

根据HTML 代码生成DOM Tree
根据CSS 代码生成CSSOM
将DOM Tree和CSSOM 整合形成render Tree
● 根据Render Tree渲染页面
● 遇到 script则暂停渲染，优先加载并执行JS 代码，完成再继续
● 直到Render tree 渲染完成

window.onload 和 DOMContentLoaded的区别

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