题目
-
从输入url到渲染出整个页面的过程
-
window.onload和DOMContentLoaded的区别
// window.onload 页面的全部资源加载完，才会执行，包括图片，视频等
// DOMContentLoaded DOM渲染完即可执行，此时图片和视频可能还没有加载完，尽量用这个方法，因为图片视频加载可能比较耗时
<body>
<div class="container">
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
</div>
<img id="img1" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3330183023,1216422781&fm=26&gp=0.jpg" alt="">
<script src="./index.js"></script>
</body>
// index.js
const img1 = document.getElementById('img1')
img1.onload = function () {
console.log("img loaded")
}
window.addEventListener('load', function () {
console.log('window loaded')
})
document.addEventListener('DOMContentLoaded', function () {
console.log('dom content loaded')
})
// 打印顺序是
1. dom content loaded
2. img loaded
3. window loaded
知识点
1. 加载资源的形式(也就是加载了什么东西)
- html代码
- 媒体文件。如图片，视频等
- javascript,css
加载资源的过程
- DNS解析 (Domain Name System 域名系统)
- DNS解析一般指域名解析，域名解析就是将域名重新转换为IP地址的过程
- 访问一台互联网上的服务器，最终还必须通过IP地址来实现，但是IP地址难以记忆，所以有了域名
- 一个域名对应一个IP地址，而一个IP地址可以对应多个域名，所以多个域名可以同时被解析到一个IP地址,当然同一个网站，不同的区域可以配置不同的IP地址。
- 域名解析需要用专门的域名
解析服务器(DNS)来完成
- 有了解析到的IP地址后，浏览器根据IP地址向服务器发起HTTP请求
- 服务器接收并处理请求，然后返回给浏览器
渲染页面的过程
- 根据HTML代码，构建DOM Tree
- 根据CSS，生产CSSOM(css object model)
- 将DOM Tree和CSSOM 整合成 RenderTree
- 根据 RenderTree 渲染页面
- 渲染的过程中，如果遇到<script>则暂停渲染，优先下载并执行JS代码，完成后再继续渲染；（JS执行和渲染是共用一个线程的，因为JS有可能会改变DOM结构）
- 直至把 RenderTree 渲染完成
网友评论