网页时如何加载并加载并渲染出来的

本文已同步到：个人博客地址

前言

网页加载过程是一个及其复杂且繁琐的问题，其过程细节数不胜数，不同的专攻的开发人员也会对此问题有侧重点不同的回答，这里主要学习前端在网页加载过程的主要步骤

网页加载到渲染

加载资源有哪些

1. html,js,css代码
2. 媒体文件

加载过程

1,DNS解析: 域名->IP地址

DNS的全英文名是Domain Name System，称之为域名系统，它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用TCP和UDP端口53

换句话来说DNS解析的目的就是将你的域名指向到你的IP地址上去，这样做有几大原因：

• ip地址太长不好记
• ip地址在不同区域内是不一样的，比如百度等大型互联网公司，在不同的地域内会解析不同的域名这样会使用户访问地址相对较近的ip，访问素对会更快

2,浏览器根据IP地址像服务器发送http请求

这一句话其实是含有很多信息的，包括一些底层原理的知识，浏览器发送请求的根本原因还是操作系统发送的，只不过被浏览器调用了，http请求的过程还包含人们常说的三次握手和四次挥手

3,服务器处理http请求，并返回给浏览器

这里不讨论服务器是如何处理http请求的，服务器返回的一些东西主要是代码或者一些静态资源

4,浏览器开始渲染

渲染过程1

• 根据返回的html代码生成DOM Tree
• 根据css代码生成CSSOM（一个css对象模型）
• 将DOM Tree 和CSSOM整合生成Render Tree

所谓render Tree 其实很容易理解，不过是DOM Tree 上添加了一些DOM属性

渲染过程2

• 根据render tree渲染页面
• 遇到<script标签则暂停渲染，优先加载并执行js代码
• 最后完成渲染

window.onload和DOMContentLoaded对比

如果我们监听load要等到页面全部资源加载完才会执行，包括图片，视频等，但是DOMContentLoaded只要等到DOM渲染完成后即可，此时图片和视频还没有被加载。
所以选择winddow.onload其实是一个不怎么靠谱的选择，js代码一般只需要DOM节点渲染完之后对DOM节点进行操作，用window.onload可能会重复渲染，影响性能