浏览器如何加载html,理解浏览器是如何加载及渲染网页的

先上图，我们再慢慢解释，这图就是浏览器加载网页的一个过程

当我们在浏览器输入一个地址(比如:http://toadw.cn),那么点击回车后，浏览器是如何加载网页的呢？

加载过程

一开始浏览器是不知道你输入的http://toadw.cn这个东西是什么的，也不知道要去哪里给你找这个网页，他需要向DNS服务发出解析请求

大致的步骤如下：

浏览器发送toadw.cn寻址请求给DNS服务

DNS返回数据告诉浏览器toadw.cn的服务器地址是255.255.255.255

本地电脑缓存DNS数据，并发送请求给255.255.255.255这个服务器，然后浏览器和服务器根据HTTP协议进行通讯

网页渲染

浏览器拿到HTML代码之后，它是如何显示给大家看的呢？其实所谓的渲染就是讲HTML代码根据CSS定义的规则显示在浏览器窗口中的这个过程

首先浏览器先把这个HTML文档先转化为DOM树，然后根据这个DOM树，进行渲染，转化为可视的东西

在渲染的时候，浏览器从上到下依次渲染DOM树，当发现有外链资源或脚本、、

如果遇到图片浏览器不会等图片加载完再去加载，而是继续加载，这样就会出现个问题，当图片加载完时，在页面插入图片会影响页面的结果，浏览器就又要重新排布，这样浏览器又要花费时间跟经历去排布，所有如果图片是固定的尺寸，我们在写CSS的时候就应该给他加上宽高，浏览器就会预留一个位置给图片，这样就避免了重新排布

回流(重排reflow)

上文中将到的重新排布就是回流，网页加载慢，有一部分原因就是回流，因为浏览器要耗更多的时间去重新排布渲染，但回流也是不可避免的，因为网页中的一些效果，如鼠标滑过、点击效果等引起了页面上某些元素的占位面积、定位方式、边距包括浏览器的伸缩等的变化都会发生回流。但也有些事可以避免的，例如上文中说的给图片定死宽高。

重绘(repaint)

有个和 reflow 看上去差不多的术语：repaint，中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint。repaint 的速度明显快于reflow

$(img).css('width',200px)//重排

$(body).css('backgroud','#fff')//重绘

window.onload()与$(document).ready()的区别

理解了浏览器是如何渲染页面之后我们再来比较这两者就很好理解了

执行的时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

可编写个数不停

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

简化缩写

window.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){});也可写成$().ready()

$().load()和window.onload()的区别

这里又会联想到 $().load()和window.onload()有没有区别？

查看jq文档load()事件的定义是

当指定的元素(及子元素)已加载时，会发生 load() 事件。且$(window).load 方法是 $(window).on('load',handler) 的shortcut

所以$(window).load()和window.onload()是没区别的，唯一的小区别就是$(window).load()可以写很多个。

最后来个小练习

如何用原生的JS实现$(doucment).ready()?