浏览器输入一个url的过程,以及加载完html文件和js文件的标志
简单理解:
当在浏览器地址栏输入一url时,浏览器会做以下几个步骤:
1、将url转化为ip地址,也就是DNS解析,(先找本地host文件中是否有对应的ip地址,如果有就直接用,没有的话,就按域名的二级,一级的顺序进行查找)。
2、找到请求的的服务器后,就开始建立tcp连接,此处有三次握手。
3、tcp建立连接后,开始向服务器发送请求,服务器首先响应并返回的是一个html文档。
4、此处就是浏览器解析html文档了,
解析html文档,就是按照html文档标签的顺序,从上往下进行解析,并在这个过程中构建dom树(dom tree),
如果遇到css文件,则向服务器请求加载css文件,并解析,构建css规则树(css rule tree),
解析过程中,如果遇到需要加载js文件,则会阻塞dom树和css规则树的构建,
因为js中有修改dom,以及css样式的代码(所以,一般情况下,是将js文件放在body最下方,防止构建dom树时被阻塞)(此处说一下,js文件加载完成的标志是window.onload事件)
dom树构建完成的标志是,监听DomContentLoaded事件
然后根据dom树和css rule tree一起构建 渲染树(render tree)。
然后根据render tree 进行布局(layout),然后进行绘制painting
//此处是一个完整的,解决兼容的判断js文件加载完成的标志
function loadJsAsync(url){
var body = document.getElementsByTagName('body')[0];
var jsNode = document.createElement('script'); jsNode.setAttribute('type', 'text/javascript');
jsNode.setAttribute('src', url);
body.appendChild(jsNode); if (jsNode.onload) {
jsNode.onload = function() {
// do something
}
} else {
// ie6, ie7不支持onload的情况
jsNode.onreadystatechange = function() {
if(jsNode.readyState == 'loaded' || jsNode.readyState == 'complete') {
// 异步js加载完毕
// do something执行操作
}
}
}
}
参考文章:https://www.cnblogs.com/ranyonsue/p/6734446.html, http://blog.csdn.net/xiaobing_hope/article/details/78318471
加深理解:
按照浏览器引擎的渲染机制理解。
浏览器的每一个tab页都是打开一个新的进程
而每一个进程都是由多个线程所组成。
所以每一个浏览器tab页都是有:主进程,而主进程包含浏览器渲染引擎、浏览器数据存储
浏览器渲染引擎由以下多个线程组成:定时器线程、事件处理线程、异步http请求线程、js解析,ui渲染(与js解析互斥)
所以js的加载会阻塞页面的渲染。
js判断页面当前实在手机端还是pc端
if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)){
}
此文是按本人的理解写的,如有路过的大神,看到有不合理的地方,谢谢指正!
浏览器输入一个url的过程,以及加载完html文件和js文件的标志的更多相关文章
- 2020-07-02:在浏览器输入一个url后按回车,会发生什么?
福哥答案2020-07-02: 简单回答: 域名解析. 建立TCP连接. 请求. 处理. 响应. 释放TCP连接. 页面渲染. 中级回答: 域名解析 浏览器DNS缓存. 操作系统DNS缓存. 路由器缓 ...
- 页面加载完之后在执行js代码
把代码写在 window.onload = function () { //js代码 //此处js代码是页面完全加载完之后执行 } 即可. 例: <script type="text/ ...
- 浏览器输入一个url到整个页面显示出来经历了哪些过程?
https://cloud.tencent.com/developer/article/1396399 https://www.cnblogs.com/haonanZhang/p/6362233.ht ...
- 笔试常考--浏览器输入一个URL点击回车之后发生了什么
解析URL:浏览器首先对拿到的URL进行识别,抽取出域名字段. DNS解析: 查询浏览器缓存(浏览器会缓存之前拿到的DNS 2-30分钟时间),如果没有找到, 检查系统缓存,检查hosts文件,这个文 ...
- 判断不同浏览器,加载不同的css和js文件
在低版本的IE中,条件注释还有效果,但是在ie9,10,11浏览器中,条件注释不起作用. 在网上找了个校验ie的方法. function isIE(){ if (window.ActiveXObje ...
- 当在浏览器输入一个url访问后发生了什么
首先根据DNS获取该url的ip地址,ip地址的获取可能通过本地缓存,路由缓存等得到. 然后在网络层通过路由选择查找一条可达路径,最后利用tcp/ip协议来进行数据的传输. 其中在传输层将信息添加源端 ...
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
原文链接: http://www.bubuko.com/infodetail-671521.html
- 网易笔试题:浏览器中输入一个url后回车到返回页面信息的过程
You enter a URL into the browser输入一个url地址 The browser looks up the IP address for the domain name浏览器 ...
- 经典面试题:在浏览器地址栏输入一个 URL 后回车,背后发生了什么
尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 CS-Wiki(Gitee 官 ...
随机推荐
- Windows 10 的功能更新,版本 1809 - 错误 0x80070002
一般是双硬盘导致的问题,请打开电脑拆掉系统盘以外的硬盘,一般为固态硬盘和物理硬盘同时使用的电脑会出现此错误.
- javascript中DOM基础知识介绍
1.1. 基本概念 1.1.1. DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...
- golang vue nginx
https://segmentfault.com/a/1190000012780963 https://blog.csdn.net/qq_32340877/article/details/790321 ...
- 安装wampserver遇到的问题及解决方案
丢失api-ms-win-crt-runtime-l1-1-0.dll 安装完wampserver,启动服务器的时候遇到一些问题,提示说缺失dll文件,如下图所示: 网上一搜,很多人出现过丢失api- ...
- DataTables入门
转载 https://blog.csdn.net/gfd54gd5f46/article/details/65938189
- HTML大纲
- ZBrush中Pinch捏挤笔刷介绍
随着版本的升级ZBrush®中给我们提供了越来越多的笔刷,对于这款软件来说,笔刷的使用是第一要素,也会一直伴随我们创作.虽然Zbrush中有那么多的笔刷,但是很多朋友会根据自己的习惯来使用,这个并不是 ...
- MySQL---Day2
-- 转载:http://www.cnblogs.com/yuanchenqi/articles/6357507.html CREATE TABLE employee1( id TINYINT PRI ...
- selenim
一.安装selenium Pip install selenium==2.53.1 (稳定版) 下载火狐浏览器35.0.1 http://dl.pconline.com.cn/download ...
- sklearn学习7-----决策树(tree)
1.使用示例 2.树模型参数:[很多参数都是用来限制树过于庞大,即担心其过拟合] # 1.criterion gini or entropy:用什么作为衡量标准 ( 熵值或者Gini系数 ). ...