URL到页面加载；css3动画与js动画；水平垂直居中

Posted 2021-12-12 别Null.了

目录

输入URL到页面加载全过程 

域名解析

建立TCP连接（3次握手）

浏览器发出HTTP请求

服务器响应HTTP请求

浏览器渲染页面

关闭连接（4次挥手）

css3动画和js动画

CSS动画

js动画

水平居中 垂直居中 水平垂直居中实现方法

水平居中

垂直居中

水平垂直居中

---

输入URL到页面加载全过程 

域名解析

通过DNS将域名解析成IP地址（域名到IP地址的转换）

本地的DNS服务器向域名的解析服务器发送请求，会收到域名与IP地址的对应关系 。本地DNS服务器将IP地址返回给用户电脑，同时将此对应关系保存在缓存中，使得用户在下次查询时若对应关系相同则可以直接返回结果，加快网络访问。

建立TCP连接（3次握手）

客户端向服务器端发送请求信息；服务器返回给客户端一个确认信息的指示；客户端确认信息后再次返回给服务器端，完成三次握手。完成三次握手，客户端与服务器开始传送数据。

浏览器发出HTTP请求

完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。

服务器响应HTTP请求

服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应体三个部分。

状态码：例如1001等，主要显示请求的状态。

响应体：为服务器返回给浏览器的信息，主要由html，css，js，图片文件组成。

浏览器渲染页面

浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：

1. 解析HTML，构建DOM树
2. 解析CSS和javascript（浏览器把页面文本转换成了一棵节点带CSS会响应自定义事件的DOM树
3. 合并DOM树和CSS等，生成render树
4. 布局render树（layout/reflow），绘制render树（paint）
5. 浏览器会将树的各层的信息发送给GUI，GUI会将各层合成显示在屏幕上。

关闭连接（4次挥手）

通过四次挥手关闭TCP连接

css3动画和js动画

CSS动画

优点：

1. 浏览器可以对动画进行优化。会把所有DOM操作集中起来，只进行一次重绘重排，刷新频率和浏览器刷新频率相同。
2. 隐藏不可见元素，使得不可见元素不进行重绘或回流，节约CPU。
3. 部分效果可以通过强制使用硬件加速（通过GPU来提高动画性能）。

缺点：

1. 不能控制运行过程，无法附加事件绑定回调函数。在动画运行时只能暂停，不能半路返回，也不能改变时间尺度。
2. CSS中较为复杂的动画会使得代码冗长。

js动画

优点：

1. js动画中控制能力很强, 可以在动画播放过程中进行开始、暂停、回放、终止、取消等。
2. js动画效果比CSS动画丰富，有些CSS实现不了的动画效果而js可以实现。
3. 代码兼容性较强。

缺点： 

1. js动画是在浏览器的主线程中运行，其JS代码中还包括JavaScript脚本、样式计算、布局等，可能会进行干扰导致线程阻塞。
2. 代码的复杂度较高。
3. js动画往往需要频繁操作DOM的css属性来实现视觉上的动画效果，使得浏览器要不停地进行重绘和重排，消耗性能。

结论： 所以如果动画只是简单的状态切换，不需要中间过程控制，可以使用css动画。而对于一些复杂控制的动画，使用js动画则比较可靠。

水平居中 垂直居中 水平垂直居中实现方法

水平居中

1、行内元素

父元素是块级元素：则直接给父元素设置 text-align: center ；

若不是，则先将其父元素设置为块级元素（通过 display: block 设置），再给父元素设置 text-align: center；

2、块级元素

给定宽度：给需要居中的元素设置 margin: 0 auto ；(作用：使盒子自己居中)；

不定宽度：（默认子元素宽度和父元素宽度一样），设置子元素为：display:inline-block 或 display:inline；即将其转换成行内块级/行内元素，给父元素设置 text-align:center；

使用定位属性，首先设置父元素为相对定位，再设置子元素为绝对定位，margin-left: -(元素宽度的一半)px或者设置 transform:translate(-50%)；

使用flexbox布局实现：给待处理的块级元素的父元素添加属性 display:flex   justify-content:center

垂直居中

1、行内元素

单行只需要设置单行行内元素的行高等于盒子的高；多行就给父元素设置 display:table-cell 和 vertical-align: middle

2、块级元素

使用定位，先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的 top:50%; 即让子元素的左上角垂直居中。设置绝对子元素的 margin-top: -(元素高度的一半)px；或者设置 transform:translateY(-50%)；

使用flexbox布局，只需给待处理块级元素的父元素添加属性：display:flex ；align-items:center

水平垂直居中

1、已知高度和宽度的元素

设置父元素为相对定位，子元素为绝对定位：top:0；right:0；bottom:0；left:0；margin:auto；

设置父元素为相对定位，子元素为绝对定位，left:50%；top:50%；margin-left:-(元素宽度的一半)px；margin-top:-(元素高度的一半)px；

2、未知高度和宽度的元素

使用定位元素，设置父元素为相对定位，子元素为绝对定位，left:50%；top:50%；  transform:translateX(-50%)  translateY(-50%)；

使用flex布局实现，设置父元素为flex定位，justify-content:center；align-items:center；