互联网是基础设施。
网络是在基础设施之上的服务。
当你在浏览器里输入一个网址时(在我们的例子里就是走向商店的路上时):
- 浏览器在域名系统(DNS)服务器上找出存放网页的服务器的实际地址(找出商店的位置)。
- 浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端(你走到商店并下订单)。这条消息,包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
- 服务器同意客户端的请求后,会返回一个“200 OK”信息,意味着“你可以查看这个网页,给你~”,然后开始将网页的文件以数据包的形式传输到浏览器(商店给你商品,你将商品带回家)。
- 浏览器将数据包聚集成完整的网页然后将网页呈现给你(商品到了你的门口 —— 新东西,好棒!)。
http是一个简单的请求-响应协议,它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。
**浏览器及其运行机制:**www.cnblogs.com/caiyy/p/104…
浏览器的回流与重绘 (Reflow & Repaint)
浏览器使用流式布局模型 (Flow Based Layout)。
有了 RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。
回流
当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容变化(文字数量或图片大小等等)
- 元素字体大小变化
- 添加或者删除可见的 DOM 元素
- 激活 CSS 伪类(例如::hover)
- 查询某些属性或调用某些方法
重绘
当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color、background-color、visibility 等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。
如何避免回流
CSS
- 避免使用 table 布局。
- 尽可能在 DOM 树的最末端改变 class。
- 避免设置多层内联样式。
- 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。
- 避免使用 CSS 表达式(例如:calc())。
Javascript
- 避免频繁操作样式,最好一次性重写 style 属性,或者将样式列表定义为 class 并一次性更改 class 属性。
- 避免频繁操作 DOM,创建一个 documentFragment,在它上面应用所有 DOM 操作,最后再把它添加到文档中。
- 也可以先为元素设置 display: none,操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
- 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。
** 域名系统 :**DNS(Domain Name System)是因特网使用的命名系统,用来把便于人们使用的机器名字转换成为IP地址。域名系统其实就是名字系统。为什么不叫“名字”而叫“域名”呢?这是因为在这种因特网的命名系统中使用了许多的“域(domain)”,因此就出现了“域名”这个名词。“域名系统”明确地指明这种系统是应用在因特网中。
**域名**(英语:**Domain Name**),又称**网域**,是由一串用点分隔的名字组成的[Internet](https://baike.baidu.com/item/Internet)上某一台[计算机](https://baike.baidu.com/item/%E8%AE%A1%E7%AE%97%E6%9C%BA/140338)或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)。 [1]
由于[IP地址](https://baike.baidu.com/item/IP%E5%9C%B0%E5%9D%80/150859)具有不方便记忆并且不能显示地址组织的名称和性质等缺点,人们设计出了域名,并通过网域名称系统([DNS](https://baike.baidu.com/item/DNS),Domain Name System)来将域名和[IP地址](https://baike.baidu.com/item/IP%E5%9C%B0%E5%9D%80)相互[映射](https://baike.baidu.com/item/%E6%98%A0%E5%B0%84/20402621),使人更方便地访问[互联网](https://baike.baidu.com/item/%E4%BA%92%E8%81%94%E7%BD%91/199186),而不用去记住能够被机器直接读取的[IP地址](https://baike.baidu.com/item/IP%E5%9C%B0%E5%9D%80)数串。
什么是 HTML?
HTML 是用来描述网页的一种语言。
HTML5 中新的语义元素
许多网站包含了指示导航、页眉以及页脚的 HTML 代码,例如这些: