前端必知必会知识点汇总Part 1

时间 2019-11-07

标签前端必会知识汇总繁體版

原文原文链接

1.0.1+0.2===0.3吗，为何？

js采用IEEE 754的双精度64位浮点数标准，存在精度缺失。解决：设置一个偏差范围值，一般称为”机器精度“，js中这个值一般是2^-52 ，ES6中Number.EPSILON这个值正等于2^-52 。只要判断(0.1+0.2)-0.3小于Number.EPSILON，在这个偏差的范围内就能够断定0.1+0.2===0.3为truejavascript

2.Number()的存储空间是多大，若是后台发送了一个超过最大字节的数字怎们办？

js的number类型有个最大值（安全值）。即2的53次方，为9007199254740992。若是超过这个值，那么js会出现不精确的问题。这个值为16位。css

解决大数运算：html

将大数的每一位存进数组，而后对两个数组的每个位单独运算，获得运算结果。
使用插件
字符串转换

3.垂直居中实现方式

经过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%) ，没必要提早知道居中元素的尺寸java

html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
           }
.content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
            margin-top: -150px; / transform: translateY(-50%);
          }
复制代码

flexcss3

body {
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;        
        }
复制代码

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#child {
    width: 300px;
    height: 100px;
    background: #08BC67;
    line-height: 100px;
}
复制代码

绝对定位和负外边距。兼容性不错，可是有一个小缺点：必须提早知道被居中块级元素的尺寸web

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 150px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    margin: -50px 0 0 0;// 居中高度的二分之一
    line-height: 100px;
}
复制代码

绝对定位结合margin: auto。实现方式的两个核心是：把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值数据库

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 200px;
    height: 100px;
    background: #A1CCFE;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 100px;
}
复制代码

使用 line-height 对单行文本进行垂直居中segmentfault

#box{
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}
#box img {
    vertical-align: middle;
}
复制代码

使用 display 和 vertical-align 对容器里的文字进行垂直居中数组

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: table;
}
#child {
    display: table-cell;
    vertical-align: middle;
}
复制代码

vertical-align属性只对拥有valign特性的html元素起做用，例如表格元素中的等等，而像浏览器

这样的元素是不行的。

valign属性规定单元格中内容的垂直排列方式，语法：，value的可能取值有四种：

top：对内容进行上对齐

middle：对内容进行居中对齐

bottom：对内容进行下对齐

baseline：基线对齐

4.什么是BFC，造成原理是什么？

BFC(block formatting context）块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
在进行盒子元素布局的时候，具备BFC特性的元素能够看作是隔离了的独立容器，在这个环境中按照必定规则进行布局不会影响到其它环境中的布局。好比浮动元素会造成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也就是说，若是一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子创建了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫作 Flow Root）。通俗一点来说，能够把BFC理解为一个封闭的大箱子，箱子内部的元素不管如何翻江倒海都不会影响到外部。
BFC造成条件：
1. body 根元素
2. 浮动元素，float 除 none 之外的值
3. 绝对定位元素，position（absolute，fixed）
4. display 为如下其中之一的值 inline-blocks，table-cells，table-captions
5. overflow 除了 visible 之外的值（hidden，auto，scroll）
规则是做用于BFC内部的元素，而条件则是做用于BFC容器的，这点要理解
BFC约束规则：
1. 内部的Box会在垂直方向上一个接一个的放置
2. 属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。（margin取较大的那一边）
3. 每一个元素的左外边距与包含块的左边界相接触（从左向右），即便浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素能够超出他的包含块边界）
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC在布局中的应用

阻止外边距折叠

在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。能够用overflow：hidden产生bfc来解决。

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>
复制代码

若是想要避免外边距的重叠，能够将其放在不一样的 BFC 容器中。

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>
复制代码

.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
复制代码

包含浮动元素

度塌陷问题，在一般状况下父元素的高度会被子元素撑开，而在这里由于其子元素为浮动元素因此父元素发生了高度坍塌，上下边界重合，这时就能够用BFC来清除浮动了。

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: grey;float: left;"></div>
</div>
复制代码

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: grey;float: left;"></div>
</div>
复制代码

阻止元素被浮动元素覆盖

div浮动兄弟这该问题：因为左侧块级元素发生了浮动，因此和右侧未发生浮动的块级元素不在同一层内，因此会发生div遮挡问题。能够给右侧元素添加 overflow: hidden，触发BFC来解决遮挡问题。这个方法能够用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度。

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: grey">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: grey;</div>
复制代码

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: grey;overflow:hidden">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: grey;</div>
复制代码

5.BFC与IFC

Block Formatting Context（BFC | 块级格式化上下文）和 Inline Formatting Context（IFC |行内格式化上下文）。
IFC布局规则：

在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border和 padding在框之间获得保留。框在垂直方向上能够以不一样的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会造成一行，叫作行框。

上一段代码

.box{
    width:150px;
    height:150px;
    display:inline-block;
    word-wrap:break-word;
    background:green
}
复制代码

<div class='box'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div class='box'>asdfasdfasdf</div>
复制代码

能够看到第二个inline-block发生了下陷，这里的知识就涉及到了IFC。给第二个添加vertical-align:top;属性就能够解决问题。

行级盒子的宽度和高度: 高由font-size决定的，宽等于其子行级盒子的外宽度(margin+border+padding+content width)之和。 inlinebox也有本身的宽高度计算的方法，宽度取决于内部元素的宽度，最大为父元素的宽度，linebox的高度取决于linebox元素，通常由最高的元素决定linebox的高度。
行内元素的对齐方式,默认是baseline对齐，如上图所示。
inline元素的baseline位置：
1. inline元素的baseline，为内容盒content-box里面文本框的基线。
2. inline-block的外边缘就是margin-box的外边缘，
3. 若是inline-block内部有内容，则baseline为内容最下方的baseline，参照刚才给出的例子。
4. 若是Inline-block内部无内容，则baseline与margin-box的下边缘重合。
5. 若是overflow属性不为visible（默认）,则baseline与margin-box的下边缘重合。

6.回流与重绘，如何避免回流？

Dom树和Render树：
浏览器渲染过程：

浏览器渲染过程
visibility：hidden隐藏的元素仍是会包含到render tree中，由于visibility：hidden会影响布局（layout），会占有空间。根据css2的标准，render tree中的每一个节点都称为Box（Box demensions）,理解页面元素为一个具备填充，边距，边框和位置的盒子。
重绘：重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility，outline，背景色属性。浏览器会根据元素的新属性从新绘制，使元素呈现新的外观。
回流：回流是更明显的一种改变，能够理解为render tree须要从新计算。每一个页面至少须要一次回流，就是在页面加载的时候。回流必将引发重绘，但重绘不必定引发回流。
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，好比文本变化或图片被另外一个不一样尺寸的图片所替代。
- 页面一开始渲染的时候（这确定避免不了）
- 浏览器的窗口尺寸变化（由于回流是根据视口的大小来计算元素的位置和大小的）
- 激活css伪类
- 计算offsetWidth和offsetHeight等属性
获取布局信息的操做的时候，会强制队列刷新，好比当你访问如下属性或者使用如下方法：
- offsetTop、offsetLeft、offsetWidth、offsetHeight
- scrollTop、scrollLeft、scrollWidth、scrollHeight
- clientTop、clientLeft、clientWidth、clientHeight
- getComputedStyle()
- getBoundingClientRect
以上属性和方法都须要返回最新的布局信息，所以浏览器不得不清空队列，触发回流重绘来返回正确的值。所以，咱们在修改样式的时候，**最好避免使用上面列出的属性，他们都会刷新渲染队列。**若是要使用它们，最好将值缓存起来。
减小重绘和回流：
1. 合并屡次对DOM和样式的修改，而后一次处理掉。使用CSSText或者替换class
```
const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
复制代码
```
```
const el = document.getElementById('test'); 
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';
复制代码
```
```
const el = document.getElementById('test');
el.className += ' active';
复制代码
```
2. 批量修改Dom，先使元素脱离文档流，再对其进行屡次修改，最后将元素带回到文档中。
  
  该过程的第一步和第三步可能会引发回流，可是通过第一步以后，对DOM的全部修改都不会引发回流重绘，由于它已经不在渲染树了。
  - 隐藏元素，应用修改，从新显示
  - 使用文档片断(document fragment)在当前DOM以外构建一个子树，再把它拷贝回文档
  - 将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。
  - 现代浏览器会使用队列来储存屡次修改，进行优化，因此对这个优化方案，咱们其实不用优先考虑。
3. 避免触发同步布局事件
  
  当咱们访问元素的一些属性的时候，会致使浏览器强制清空队列，进行强制同步布局。在每次循环的时候，都读取了box的一个offsetWidth属性值，而后利用它来更新p标签的width属性。这就致使了每一次循环的时候，浏览器都必须先使上一次循环中的样式更新操做生效，才能响应本次循环的样式读取操做。每一次循环都会强制浏览器刷新队列。
```
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
    }
}
复制代码
```
```
const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}
复制代码
```
4. 对于复杂动画效果,使用绝对定位让其脱离文档流
5. css3硬件加速（GPU加速）
  
  常见的触发硬件加速的css属性：
  - transform
  - opacity
  - filters
  - Will-change

7.display: none ,visibility: hidden,opacity:0

display：none让元素消失，脱离文档流
visibility: hidden让元素隐藏，还在文档流中，占用空间，至关于透明化了
opacity:0透明度为0，即彻底透明，还在文档流中，占用空间。与visibility: hidden的区别是opacity可设置不一样程度的透明度
visibility:hidden比display:none性能上要好，display:none切换显示时产生回流，而visibility切换是否显示时则不会引发回流。

8.从输入一个URL到页面渲染流程

1、获取ip地址

首先会在浏览器的缓存中查找，是否缓存了URL，若是有，就直接向该URL对应的服务器发送请求；若是没有则进行下一步;
在本地的hosts文件中是否保存了该URL和其对应的IP地址，若是保存了，就直接向该URL对应的服务器发送请求；若是没有则进行下一步；
向本地DNS服务器（通常由本地网络接入服务器提供商提供，好比移动）发送DNS请求，本地DNS服务器会首先查询它的缓存记录，若是有就将该域名对应的IP地址返回给用户，若是没有则进行下一步；
首先向根域名服务器发送DNS查询请求，根域名服务器返回给可能保存了该域名的一级域名服务器地址；本地主机再根据返回的地址，向一级域名服务器发送DNS查询请求；...一直迭代，直到找到对应的域名存放的服务器，向其发送DNS查询请求，该域名服务器返回该域名对应的IP地址；

2、TCP/IP链接

三次握手？：若是两次握手，以下面的对话只有前两句，有可能出现的问题是：客户端以前发送了一个链接请求报文，因为网络缘由滞留在网络中，后来到达服务器端，服务器接收到该请求，就会创建链接，等待客户端传送数据。而此时客户端压根就不知道发生了什么，白白形成了服务器资源浪费。

至关于：
1. 客户端：我要请求数据能够吗？
2. 服务器：能够的
3. 客户端：好的

3、浏览器向web服务器发送http请求

客户机与服务器创建链接后就能够通讯了

静态资源：若是客户端请求的是静态资源，则web服务器根据URL地址到服务器的对应路径下查找文件，而后给客户端返回一个HTTP响应，包括状态行、响应头和响应正文。
动态资源：若是客户端请求的是动态资源，则web服务器会调用CGI/VM执行程序完成相应的操做，如查询数据库，而后返回查询结果数据集，并将运行的结果--HTML文件返回给web服务器。Web服务器再将HTML文件返回给用户。

4、浏览器渲染

浏览器拿到HTML文件后，根据渲染规则进行渲染：

解析HTML，构建DOM树
解析CSS，生成CSS规则树
合并DOM树和CSS规则树，生成render树
布局render树
绘制render数、树，即绘制页面像素信息
GPU将各层合成，结果呈如今浏览器窗口中。

5、四次挥手

客户端没有数据发送时就须要断开链接，以释放服务器资源。

至关于：

客户端：我没有数据要发送了，打算断开链接
服务器：你的请求我收到了，我这还有数据没有发送完成，你等下
服务器：个人数据发送完毕，能够断开链接了
客户端：ok，你断开链接吧（客户端独白：我将在2倍的最大报文段生存时间后关闭链接。若是我再次收到服务器的消息，我就知道服务器没有收到个人这句话，我就再发送一遍）。

最终服务器收到该客户端发送的消息断开链接，客户端也关闭链接。

参考连接：

BFC原理做用https://blog.csdn.net/dff1993/article/details/80394150
重绘回流https://www.cnblogs.com/qcloud1001/p/10265985.html
输入URL到渲染https://segmentfault.com/a/1190000014311983