前端必知必會知識點彙總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倍的最大報文段生存時間後關閉鏈接。若是我再次收到服務器的消息，我就知道服務器沒有收到個人這句話，我就再發送一遍）。

最終服務器收到該客戶端發送的消息斷開鏈接，客戶端也關閉鏈接。

參考連接：