标签:常见 网络 dns解析 play 版本号 代理 默认值 冒号 gen
什么是DNS?
DNS是一种组织成域层次结构的计算机和网络服务命名系统,他用于TCP/IP网络,它所提供的服务是用来将主机名和域名转换成IP地址的工作。DNS就是这样的一位"翻译官",它的基本工作原理可以用下图来表示。
DNS解析过程
DNS负载均衡
DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址,在应答NDS查询时,DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问引导到不同的机器上去,使得不同的客户端访问不同的服务器,从而达到负载均衡的目的。
三次握手的目的
目的是为了防止已经失效的连接请求报文段突然有传送到了服务端,因而产生错误
三次握手的过程
(°ー°〃)我们用大白话解释下三次握手
快递小哥:你好,你的快递到了,你在家没?
小明:在家呢,送过来吧。
快递小哥:好的,马上送到。
请求报文由请求行,请求头,空行,请求体四个部分组成。
GET /js/count.js HTTP/1.1
上面代码中GET代表请求方法,/js/count.js
表示URL,HTTP/1.1
代表http版本
请求头部通知服务器关于客户端请求的信息。它包含许多有关的客户端环境和请求正文的有用信息。比如:
响应报文由相响应行、响应头、响应主体三个部分组成,如下图
HTTP/1.1 200 OK
HTTP/1.1
响应头为客户端提供了额外的信息,使得客户端可以做出更好的响应。
private
,表示内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存)服务端给客户端返回的文本信息
关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、JS等资源,然后解析,构建树、渲染布局、绘制,最后呈现给客户能看到的界面的整个过程
主要包括以下几步
构建DOM树
当浏览器接收到服务器响应来的HTML文档后,会遍历文档节点,生成DOM树。需要注意的是,DOM树生成过程中可能会被CSS和JS的加载执行阻塞。
构建CSSOM规则书
浏览器解析CSS文件并生成CSS规则树,每个CSS文件都被解析成一个StyleSheet对象,每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象
渲染阻塞
当浏览器遇到一个script标记时,DOM构建将暂停,直至脚本完成执行,然后继续构建DOM。每次去执行Js脚本都会严重阻塞DOM树的构建,如果js脚本还操作的CSSOM,而正好这个CSSOM还没有下载和构建,浏览器甚至会延迟脚本执行和构建DOM,直至完成其CSSOM的下载和构建。
所以script标签的位置很重要。实际使用时,可以遵循下面两个原则:
构建渲染树
通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点,找到其适配的CSS样式规则并应用。
渲染树构建完成后,每个节点都是可见节点并且都含有其内容和对应的规则的样式。这也是渲染树与DOM树最大的区别。渲染树是用于显示,那些不可见的元素当然就不会在这棵树中出现了,除此之外,display等于none的也不会被显示在这棵树里头,但是visibility等于hidden的元素是会显示在这棵树里头的。
渲染树布局
布局阶段会从渲染树的根节点开始遍历,然后确定每个接待你对象在页面上的确切大小与位置,布局阶段的输出是一个盒子模型,他会精确的捕获每个元素在屏幕内的确切位置与大小。
渲染树绘制
在绘制阶段,遍历渲染树,调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成
回流与重绘
根据选安然树布局,计算CSS样式,即每个节点在页面中的带线啊哦和位置等几何信息。HTML默认是流式布局的,CSS和JS会打破这种布局,改变DOM的外观样式以及大小和位置。这时就会触发回流和重绘
重绘
屏幕的一部分重绘,不影响整体布局,比如某个CSS的背景色变了,但元素的几何尺寸和位置不变。
常见引起重回的属性
回流
当元素的大小位置改变,需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。
常见引起回流的属性和方法
从上面可以看出:回流必将引起重绘,而重绘不一定会引起回流。
思考下面代码会触发几次渲染?
div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
这段代码理论上会触发4次重绘和回流,因为每次都改变了元素的集合属性,实际上最后支出法了一次回流,这都得益于
当浏览器发现某一行代码是改变元素样式时,浏览器不会立即进行渲染,而是缓那么一哆嗦,看你下一行代码是不是在改样式,如果下一行还是改样式,在缓一哆嗦,如果连续发现几行代码都是在改样式,浏览器会等待这几行代码全部执行完,才会进行渲染,这就是浏览器的渲染队列机制
动画效果应用position
属性为absolute
或fixed
元素上(脱离文档流)
这种方法也会引发回流,但是会对其他元素没有影响,可以提升性能
硬件加速会自动规避回流和重绘
css中又一下几个属性能触发硬件加速
如果有一些元素不需要用到上述属性,但是需要触发硬件加速效果,可以使用一些小技巧来诱导浏览器开启硬件加速。
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/**或者**/
transform: rotateZ(360deg);
transform: translate3d(0, 0, 0);
要注意的问题
标签:常见 网络 dns解析 play 版本号 代理 默认值 冒号 gen
原文地址:https://www.cnblogs.com/mengxiangji/p/11297718.html