当您在浏览器中输入网址时会发生什么？

0、先问个问题

若客户提出一个质量属性要求，要实现一个Web查询，性能200毫秒以内，请问这个要求高还是低？

对一个web系统来说，200毫秒是一个比较高的性能。

凭啥这么说，你要是做过架构的话，就明白这个道理。

作为架构师，必须了解完整过程，每一个细节。

你应该能把整个系统分解成若干个环节，并且各环节的细节你都能了解。这个环节是硬的还是软的？会不会影响这个部分的性能开销？

看下图，能看到你从发起请求，一直到页面呈现完了之后的4个主要环节。

要细分的话，其实当中还有更多的环节。

网络大概走多少毫秒，差不多50ms，环节取决于网络环境，要是跨国的话，从中国到美国，可能要上百。

这个是系统架构改变不了的。

那就是200已经去掉了50，或者100，剩下100多可以用。

收到数据之后，需要浏览器渲染出来，又需要多长时间呢？

这个时间不确认，看渲染结果复不复杂，有没ajax再次请求这类情况。

可能简单的，10几毫秒，复杂的更长。

右边从Web服务器到应用服务器、从应用服务器到数据库DB之间，还有性能开销。

数据库检索出来是一个值，这个值到了你的开发语言里面，经过底层框架，需要做数据类型转换，变成程序里的一个对象。

一个架构师，就要学会区分，哪些是架构能左右的，能够改善的，哪些是我不能解决的，最后在你能解决的部分里想办法。

你都了解了之后，你就能专业地跟客户说，这个200毫秒我做不到。

或者说在什么条件下，我能做到。

一个事情，只有你都了解的情况下，才能给出一个可行方案。

01、当您在浏览器中输入 URL 时会发生什么？

让我们一步步看一下整个过程：

用户在浏览器中输入 URL 并按下Enter键时，我们需要做的第一件事是将 URL 转换为 IP 地址。映射通常存储在缓存中，因此浏览器会在多层缓存中查找 IP 地址：浏览器缓存、操作系统缓存、本地缓存和 ISP 缓存。如果浏览器在缓存中找不到该映射，则会请求 DNS（域名系统）解析器进行解析。
如果在任何缓存中都找不到 IP 地址，则浏览器将前往 DNS 服务器进行递归 DNS 查找，直到找到 IP 地址。
现在我们有了服务器的IP地址，浏览器向服务器发送HTTP请求。为了安全访问服务器资源，我们应该始终使用 HTTPS。它首先通过 TCP 3 次握手与服务器建立 TCP 连接。然后它将公钥发送给客户端。客户端使用公钥加密会话密钥并发送给服务器。服务器使用私钥来解密会话密钥。客户端和服务器现在可以使用会话密钥交换加密数据。
服务器处理请求并发回响应。

对于成功的响应，状态代码为 200。
响应中有 3 部分：HTML、CSS 、 Javascript。
浏览器渲染的顺序：
1. 浏览器解析HTML并生成DOM树。
2. 解析 CSS 并生成 CSSOM 树。
3. 结合 DOM 树和 CSSOM 树来构建渲染树。
4. 节点布局
5. 最后页面渲染，浏览器将内容呈现并显示给用户。

02、用一张图解释 8 种流行的网络协议

HTTP（超文本传输协议）HTTP 是一种用于获取 HTML 文档等资源的协议。它是 Web 上任何数据交换的基础，是一种客户端-服务器协议。
HTTP/3HTTP/3 是 HTTP 的下一个主要修订版。它运行在 QUIC 上，这是一种专为移动互联网使用而设计的新传输协议。它依赖于 UDP 而不是 TCP，从而实现更快的网页响应。VR 应用程序需要更多带宽来渲染虚拟场景的复杂细节，并且可能会从迁移到由 QUIC 提供支持的 HTTP/3 中受益。
HTTPS（安全超文本传输协议）HTTPS 扩展了 HTTP 并使用加密来实现安全通信。
WebSocketWebSocket 是一种通过 TCP 提供全双工通信的协议。客户端建立WebSocket来接收来自后端服务的实时更新。与总是“拉取”数据的 REST 不同，WebSocket 允许“推送”数据。在线游戏、股票交易和消息传递应用程序等应用程序利用 WebSocket 进行实时通信。
TCP（传输控制协议）TCP 旨在通过互联网发送数据包，并确保通过网络成功传送数据和消息。许多应用层协议构建在 TCP 之上。
UDP（用户数据报协议）UDP 直接将数据包发送到目标计算机，无需先建立连接。UDP 通常用于时间敏感的通信，其中偶尔丢弃数据包比等待更好。语音和视频流量通常使用此协议发送。
SMTP（简单邮件传输协议）SMTP 是一种用于将电子邮件从一个用户传输到另一个用户的标准协议。
FTP（文件传输协议）FTP 用于在客户端和服务器之间传输计算机文件。它具有单独的控制通道和数据通道连接。

TML究竟算不算是一门编程语言，这是争执已久的话题。其实，从本质来讲，HTML确实算不上是一门编程语言。

HTML全称，HyperText Markup Language。字面理解，HTML就是一种超文本语言，何谓超文本，就是其用途和意义已经超越了纯文本。因为，HTML重新定义了文本的格式，而且HTML不仅仅只有文本还包括音视频。

相比其他语言，HTML的字面意义更容易理解，就是为了方便人类和机器阅读。例如，我们常见的头标签，输入标签，换行符等等，都是HTML中常见和常用的。此类标签不仅让人类能够轻松理解，而且对于电脑这种机器来说，也是很容理解的。

HTML语言不具备很强的逻辑性。基于此，很多程序员都不承认HTML是一门编程语言。不像其他语言，例如Java，C++，Python等流行语言，这些语言都带有很强的逻辑和流程控制功能。

不仅仅是HTML无逻辑性和流程控制的问题，同时HTML还是缺乏灵活性的，因为HTML都是按照W3C的标准限定死的语言，主要用于规范HTML文档的书写格式。不像其他语言，用户可以自定义的地方有很多，千变万化。

HTML不被承认是一门编程语言，最重要的一点是因为，HTML不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。这一点最重要，其他语言都可以轻松做到。

在编程语言方面的话，小编还是更为推崇c/c++的！虽然Java、Python热度不断上涨，但是作为编程界元老的C++依然具有其无可比拟的优势，小编是一个有着7年工作经验的架构师，对于c++，自己有做资料的整合，一个完整学习C语言c++的路线，学习资料和工具。可以进我的群7418,18652领取，免费送给大家。希望你也能凭自己的努力，成为下一个优秀的程序员！

当然，我们也不能否认HTML的重要性，作为web领域的重要元老，在当前时候，前端工程师还是有相当大的发展前途的！

在程序员的眼中，HTML是算不上一门编程语言的。虽然如此，但是HTML在WEB领域的重要作用远远超越其他任何编程语言，浏览器打开i一个网页第一步就要解析一个HTML的DOM树，越简单越重要。

元芳，你怎么看呢？

么是JS延迟加载？

JS延迟加载，也就是等页面加载完成之后再加载JavaScript文件

为什么让JS实现延迟加载？

js的延迟加载有助于提高页面的加载速度。

Js延迟加载的方式有哪些？一般有以下几种方式：

·defer属性

·async属性

·动态创建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延迟方法

·让JS最后加载

1、defer属性

HTML 4.01为<script>标签定义了defer属性。标签定义了defer属性元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行标签定义了defer属性。

用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行在<script>元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>

说明：虽然<script>元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行defer属性只适用于外部脚本文件。支持HTML5的实现会忽略嵌入脚本设置的defer属性

2、async属性

HTML5 为<script>标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。

目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--这里放内容-->
</body>
</html>

async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。

缺点：不能控制加载的顺序

3、动态创建DOM方式

//这些代码应被放置在</ body>标签前(接近HTML文件底部)
<script type="text/javascript">
	function downloadJSAtOnload() {
		varelement=document .createElement("script");
		element.src="defer.js";
		document.body.appendChild(element);
	}
	if (window. addEventListener)
		window.addEventListener("load" ,downloadJSAtOnload, false);
	else if (window.attachEvent)
		window.attachEvent("onload", downloadJSAtOnload) ;
	else
		window. onload=downloadJSAtOnload;
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回调函数，成功获取文件后执行的函数
	console.log(“脚本加载完成")
});

5、使用setTimeout延迟方法的加载时间延迟加载js代码，给网页加载留出更多时间

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延迟1秒
	})
</script>

6、让JS最后加载

把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码。所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。

上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

//这些代码应被放置在</body>标签前(接近HTML文件底部)

<script type="text/javascript">
	function downloadJSAtonload() {
		var element=document.createElement("script");
		element.src="defer.js";
		document.body.appendChild(element);
	}
	if (window.addEventListener)
		window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent )
		window.attachEvent("onload", downloadJSAtonload);
	else window.onload=downloadJSAtOnload;
</script>

这段代码意思等到整个文档加载完后，再加载外部文件“defer.js”。

使用此段代码的步骤：

6.1）复制上面代码

6.2）粘贴代码到HTML的标签前 (靠近HTML文件底部)

6.3）修改“defer.js”为你的外部JS文件名

6.4）确保文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与HTML文件在同一文件夹下。

注意：

这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件。

在线咨询

上一篇：物联网的学习路线
下一篇：6.CSS字体属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商