浏览器加载、渲染过程总结

浏览器渲染过程：

浏览器接收到HTML页面，自上而下开始解析
遇到link标签，发送请求获取css文件，阻塞网页的解析
解析<div>各种标签，构建DOM tree
遇到图像，发送请求获取img资源，不会阻塞网页的解析（所以会出现，文档解析完毕，图片仍在加载的情况）
遇到js，除非是异步，否则会阻塞网页的解析，若是js代码立即执行，若是js文件立即加载，加载完再执行
js执行可能改变DOM tree或CSS Rule tree
按理来说，是该解析完网页，DOM tree构建完成，CSS Rule tree 构建完成，合并形成render tree，再开始绘制页面
但是，为了用户体验，渲染引擎会把已经形成的render tree提早呈现在屏幕上（所以js文件放在页面底部是有道理的）

两个时刻：DOMContentLoaded 和 load

图中可看出，蓝色红色竖线分别代表DOMContentLoaded（3.43s）和load（4.08s）

DOMContentLoaded
- 是HTML文档加载和解析完成
- 相当于$(document).ready(function(){...})的触发
load
- 是HTML文档及相关资源加载完毕
- 相当于window.onload的触发
DOMContentLoaded 和 load之间便是剩余的图片加载时间
DOMContentLoaded 在 load之前

        window.addEventListener("load", function () {     // 判断网页加载console.log('load完毕')})document.addEventListener("DOMContentLoaded", function () {     // 判断文档加载console.log('DOMContentLoaded完毕')})var script = document.createElement("script");     // 判断js文件加载script.addEventListener("load", function () {console.log('script加载完毕')})script.src = "test.js";document.body.appendChild(script);var img = document.getElementsByTagName("img")[0];     // 判断图片加载img.addEventListener("load", function () {console.log('img完毕')})

某个界面的加载测试结果：

DOMContentLoaded完毕

img完毕

script完毕

load完毕

异步加载js文件的方式：

正常加载执行js的流程为：js文件的加载和执行都会阻塞浏览器解析HTML，均是同步的

defer：异步加载js文件，文档解析结束再执行js文件

async：异步加载js文件，同步执行js文件，执行js会阻塞浏览器解析文档

手动添加js文件：

        var script = document.createElement("script");script.addEventListener("load", function () {console.log('script完毕')})script.src = "http://code.jquery.com/jquery-latest.js";document.body.appendChild(script);

转载于:https://www.cnblogs.com/hjqbit/p/7267852.html

浏览器加载、渲染过程总结相关推荐

浏览器加载渲染网页过程解析-总结
js的加载会阻塞此js文件下面的图片的加载,但不会阻塞其他js,css的加载 js的加载会阻塞浏览器的渲染,需要等待js加载执行完毕后才可以继续渲染 js的加载虽然是异步进行的,但是执行仍然会保持从上 ...
浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结...
页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代 ...
游览器加载渲染网页过程分析
游览器的工作机制,一句话概括起来就是,web游览器与web服务器之间通过http协议进行通信的过程,所以,c/s之间的协议就是http协议,游览器接受完毕开始渲染大致过程如下: http://blog ...
浏览器加载、解析、渲染的过程
最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序.所以就花了时间去了解浏览器的工作 ...
浏览器加载和渲染html的顺序
1.浏览器加载和渲染html的顺序浏览器加载和渲染html的顺序 IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成 ...
加载如下html 写出输出顺序,浏览器加载和渲染html的顺序-结论篇
我只转载觉得可以使用的. 1.浏览器加载和渲染html的顺序 1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完 ...
浏览器输入baidu.com加载的过程是什么，听完我的回答和尚摇了摇头，就这？
下半年第一天,今天是七一建党节哦前言回答这个问题的时候是去年三月份,我入职不到三个月还没转正. 和尚是一个互联网大厂朋友的外号,初中那货剃了光头,后来便有了和尚这个亲切的外号. 去年那时候我两 ...
浏览器加载解析渲染机制的全面解析
(注1:如果有问题欢迎留言探讨,一起学习!本文首发于我的简书,转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录.) 1. 简介在前面一篇文章中,讲到了用户从输入url到看到页面的 ...
转:浏览器加载页面的过程与页面性能优化
本文是转帖,原文:http://www.baiduux.com/blog/2011/02/15/browser-loading/ 发布日期:2011年2月15日作者:nwind 类别:HTML/CS ...
浏览器加载js的阻塞与非阻塞
这几天因项目需求,要实现一系列的js文件加载的问题,于是,就按照常规思路写了一通,悲催的是测试后发现问题重重: 为什么会有这么多问题,仔细想来还是对浏览器加载js的原理理解不透,于是我翻阅了大量的资料 ...

浏览器加载、渲染过程总结

浏览器加载、渲染过程总结相关推荐

最新文章

热门文章