从输入url到渲染页面的整个过程_从输入url到渲染出页面的整个过程?渲染过程中遇到js,怎么执行?onload是在dom渲染-优快云博客

本文详细解析了网页从加载资源到最终渲染的全过程，包括DNS解析、HTTP请求响应、DOM和CSSOM生成、RenderTree构建及JS执行时机，阐述了css和js位置选择的重要性。

加载资源的形式

html代码.
媒体文件，如图片、视频等.
javascript、css.

1.加载资源的过程

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

2.渲染页面的过程

根据HTML生成DOM Tree
根据css代码生成CSSOM(CSS对象模型)
将DOM Tree和CSSOM整合形成Render Tree
浏览器根据 Render Tree 渲染页面
如果遇到<script>则暂停渲染，优先加载并执行JS代码，完成再继续
直至把 Render Tree渲染完成

为何把css放在head中？

在渲染DOM节点前把CSS规则加载完，防止重复渲染

为何建议把js放在body最后？

Render Tree 渲染页面时，如果遇到<script>则暂停渲染，优先加载并执行JS代码，完成再继续
放在中间阻塞dom渲染

window.onload和DOMContentLoaded的区别

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