目录
输入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，图片文件组成。
浏览器渲染页面浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：
解析HTML，构建DOM树解析CSS和JavaScript（浏览器把页面文本转换成了一棵节点带CSS会响应自定义事件的DOM树合并DOM树和CSS等，生成render树布局render树（layout/reflow），绘制render树（paint）浏览器会将树的各层的信息发送给GUI，GUI会将各层合成显示在屏幕上。 关闭连接（4次挥手）通过四次挥手关闭TCP连接
css3动画和js动画 CSS动画优点：
浏览器可以对动画进行优化。会把所有DOM操作集中起来，只进行一次重绘重排，刷新频率和浏览器刷新频率相同。隐藏不可见元素，使得不可见元素不进行重绘或回流，节约CPU。部分效果可以通过强制使用硬件加速（通过GPU来提高动画性能）。缺点：
不能控制运行过程，无法附加事件绑定回调函数。在动画运行时只能暂停，不能半路返回，也不能改变时间尺度。CSS中较为复杂的动画会使得代码冗长。 js动画优点：
js动画中控制能力很强,?可以在动画播放过程中进行开始、暂停、回放、终止、取消等。js动画效果比CSS动画丰富，有些CSS实现不了的动画效果而js可以实现。代码兼容性较强。缺点：?
js动画是在浏览器的主线程中运行，其JS代码中还包括JavaScript脚本、样式计算、布局等，可能会进行干扰导致线程阻塞。代码的复杂度较高。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；
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
