前端知識小總結1

時間 2019-11-22

標籤前端知識總結简体版

原文原文鏈接

前端工程師：最貼近用戶的程序員，完成產品基本功能，並進一步優化，實現界面交互，提高用戶體驗，藉助nodejs還可實現服務器端的一些事情。前端性能優化可使產品從90分優化到100分。前端工程師參與項目，快速有效地完成效果圖，與團隊成員合做，與UI、產品經理等都須要溝通協做，作好頁面結構、頁面重構及用戶體驗，處理hack，兼容寫出高效簡潔的代碼，針對服務器端優化，隨時補充新技術，擁抱最新技術更新。css

1 對web標準的理解html

Web標準是一系列標準的組合，包含結構、表現、行爲的標準，具體有：web標準要求書寫標籤必須閉合、標籤小寫、合理嵌套標籤，提升搜索概率；建議使用外聯js和css，實現結構、表現和行爲的分離，提升頁面渲染速度及頁面加載速度；樣式與標籤的分離、更合理地語義化，使內容能被更多用戶訪問，下降後期維護成本；不須要變更頁面內容便可打印版本而不須要複製內容，提升網站易用性。前端

2 link和@import區別html5

link：屬於XHTML標籤；加載頁面時同時被加載；無兼容性問題；能夠控制dom操做node

@import：屬於CSS；頁面加載完畢再加載；ie5以上可識別；不能控制dom操做css3

3 html5新特性git

canvas、video、audio、article、footer、header、nav、section、date、webworker、websocket、程序員

4 標籤語義化web

頁面內容結構化，比較直觀，便於對瀏覽器、搜索引擎解析，容易閱讀。ajax

根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）

在沒有css的狀況下也能表現很好的結構（內容結構和代碼結構）；有利於用戶體驗；有利於seo和搜索引擎創建良好的溝通；方便其餘設備解析，以有意義的方式渲染頁面；便於團隊開發和維護，增長可讀性。

5 html5離線存儲

將一些源代碼文件保存在本地，這樣後續的頁面從新加載將使用本地資源文件，在離線的狀況下也能夠訪問web應用，同時經過必定的方法能夠更新、刪除離線存儲等操做

6 cookie、sessionStorage、localstorage區別

Cookie：爲持久保存客戶端數據提供了方便，且分擔了服務器存儲負擔，但也有不足，如存儲空間小，每一個域名下最多有20條cookie，每一個cookie長度不超過4kB，不然會被截掉；安全性差，若是cookie被人攔截，將致使全部的session信息泄露，在瀏覽器和服務器之間來回傳遞。Cookie做用是與服務器進行交互，做爲http規範的一部分存在。

sessionStorage：會話級別的存儲，數據在瀏覽器關閉以後消失，localStorage：持久化的本地存儲，長期存儲數據，瀏覽器關閉後數據不丟失；兩者存儲空間更大，有更多可用接口，有各自獨立的存儲空間。Web Storage（包括sessionStorage和localStorage）僅僅是爲了在本地存儲數據而生。

7 display屬性值

None:此元素不會顯示

Inline：內聯元素，先後沒有換行符

Inline-block：行內塊元素

Block：塊級元素，先後有換行符

8 position屬性值

Static：元素在正常流中

Relative：相對定位，相對於其正常位置進行定位。還在文檔流中。

Absolute：絕對定位，相對於static定位之外的第一個父元素進行定位。Left、top、right、bottom。脫離文檔流，不佔據空間。

Fixed：固定定位，相對於瀏覽器窗口進行定位。Left、top、right、bottom。脫離文檔流。

9 css3新特性

Border-radius、box-shadow、text-shadow、gradient、transform：rotate（） scale（） translate（） skew（）

10 css初始化

不一樣瀏覽器對不一樣標籤的默認屬性值是有差距的，若是不對css初始化將致使不一樣瀏覽器上的顯示效果不一致，所以考慮到瀏覽器的兼容性問題，須要css初始化。

11 tcp、udp區別

Tcp：面向鏈接、傳輸可靠、速度慢、開銷大、用於傳輸大量數據

Udp：面向非鏈接、傳輸不可靠、速度快、用於傳輸少許數據

12 css樣式優先級

內聯樣式》》 ID選擇器》》類、僞類和屬性選擇器》》類型選擇器和僞元素選擇器》》通配符選擇器（*）、子選擇器（>）、相鄰同胞選擇器（+）

13 浮動及清除浮動

浮動：脫離文檔流，不佔據文檔空間。浮動元素碰到包含它的邊框或者浮動元素的邊框則停留。

浮動引發的問題：父元素的高度沒法被撐開，影響與父元素同級的元素；與浮動元素同級的非浮動元素會緊跟其後；若非第一個元素浮動，該元素以前的元素也須要浮動，不然會影響頁面顯示的結構。

清除浮動：使用空標籤，在全部浮動元素標籤後面添加一個空標籤，定義css爲clear：both；使用overflow，給包含浮動元素的父元素定義css爲overflow：auto；zoom：1；使用after僞對象，#layout：after{display:block;clear:both;content:」」;visibility:hidden;height:0;}

14 瀏覽器內核

Trident內核：IE、360、搜狗瀏覽器

Gecko內核：firefox、netscape6

Presto內核：Opera7

Webkit內核：Chrome

15 盒子模型

網頁中的一個元素被描述成盒子模型，由元素內容、元素內邊距、元素邊框、元素外邊界四部分組成。盒子模型分兩種：IE盒子模型（border-box）、W3C盒子模型（content-box）。Css3中的box-sizing能夠控制盒子的模型的解析模式，默認爲content-box。其中，conten-box盒子模型，padding和border不被包含在定義的width和height以內，元素實際寬度爲width+padding+border；而border-box盒子模型padding和border包含在定義的width以內，元素的實際寬度即爲width。

16 行內元素、塊元素、空元素

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote

空元素:br、meta、hr、link、input、img

17 src、href區別

Src：指向外部連接的位置，指向的內容將會嵌入到文檔中當前標籤所在位置。在請求src資源時會將其指向的資源下載並應用到文檔內，如js腳本，當瀏覽器解析到該元素時會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢。

Href：指向網絡資源所在位置，創建和當前元素或當前文檔之間的連接，用於超連接。

18 css hack

針對不一樣瀏覽器寫的不一樣的css，目的是爲了瀏覽器的兼容

19 px、em

共同點：都是長度單位

不一樣點：px是固定的，指定多少就是多少；em不是固定的，且em會繼承父級元素的字體大小。

Ps：瀏覽器的默認字體高爲16px，未經調整的瀏覽器都符合1em=16px

20 優雅降級、漸進加強

優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容

漸進加強：針對低版本瀏覽器進行構建頁面，保證基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

21 i、em、b、strong標籤，img的alt和title

標籤將呈現斜體的文本；把文本定義爲斜體強調的內容。

標籤訂義粗體的文本；把文本定義爲粗體語氣更強的強調的內容。

表示強調，strong表示更強烈的強調；em用於局部強調，strong則全局強調；em是有順序的、閱讀到某處纔會注意到，而strong強調是一種隨意無序的、某個文字或界面忽然凸顯；

Alt：在不能顯示圖片的時候，alt用來指定替換文字；title爲設置該屬性的元素提供建議性的信息。

22 大量圖片加載緩慢的處理方法

圖片懶加載，滾到相應位置才加載圖片；圖片預加載，將當前展現圖片的前一張和後一張優先下載；使用css sprite；圖片過大可使用特殊的編碼方式，加載時先加載一張壓縮的特別厲害的縮略圖。

23 css中margin、padding

Margin：外邊界，元素以外，屬於元素跟元素之間的距離，相鄰元素的margin能夠融合；

Padding：內邊距，元素以內，相鄰元素的padding不能夠融合。

24 label

Label標籤訂義表單控制間的關係，當用戶選擇該標籤時，瀏覽器會自動聚焦到和標籤相關的表單控件上。

25 css選擇器

ID選擇器（#myid）、類選擇器（.myclassname）、標籤選擇器（div、h1）、相鄰選擇器（h1-p）、子選擇器（ul>li）、後代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=」external」]）、僞類選擇器（a:hover，li：nth-child）、

26 浮動、絕對定位、固定定位將致使脫離文檔流。

27 css層疊

Css樣式之間可能會有交叉的部分，這就會涉及到樣式的優先級問題，樣式的權重問題，內聯樣式》》內部樣式》》外部樣式》》瀏覽器用戶自定義樣式》》瀏覽器默認樣式

ID選擇器》》class選擇器》》元素選擇器

28 display：none； visibility：hidden；

display：none；隱藏對應的元素，在文檔佈局中再也不分配空間，它各邊的元素會靠攏，就當它不存在；引起迴流和重繪。其內的標籤元素所有隱藏。

visibility：hidden；隱藏對應的元素，可是在文檔佈局中仍然保留原有的空間；無迴流和重繪。其元素若添加visibility：visible；則會顯示出來。

29 position的fixed和absolute

共同點：改變行內元素的呈現方式，display設置爲block；讓元素脫離文檔流，再也不佔據空間；默認會覆蓋到非定位元素上。

不一樣點：absolute的根元素是能夠設置的，而fixed的根元素固定爲瀏覽器窗口，當滾到頁面時，fixed元素與瀏覽器窗口之間的距離是不變的。

30 doctype文檔類型

HTML4.01規定三種：strict、Transitional、Frameset

XHTML1.0規定三種：Strict、Transitional、Frameset

31 h5文檔頭只須要寫<!Doctype>緣由

H5不基於SGML（標準通用標記語言），所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（即讓瀏覽器按照他們應該的方式來運行）；而HTML4.01基於SGML，所以須要DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

32 css能夠經過哪些屬性定義使得一個dom元素不顯示在瀏覽器可視範圍內

Display：none；visibility：hidden；

設置寬高爲0，設置透明度爲0，設置z-index位置爲-1000

33 被點擊訪問過的hover樣式再也不出現的問題及解決方法

被點擊訪問過的超連接樣式再也不具備hover和active。能夠更改css屬性的排列順序：（L-V-H-A）

34 居中

Margin：0 auto；

Position：absolute；left：50%；transfrom：translateX（-50%）；

Position：absolute；left：50%；width：200px；margin-left：-100px；

Position：absolute；top：0；right：0；bottom：0；left：0；margin：auto；

Position：relative；left：50%；width：300px；margin-left：-150px；background-color：pink；

35 cookie、session

Cookie數據存放在客戶的服務器上，session數據放在服務器上；cookie沒有session安全；session會在必定時間內保存在服務器上，當訪問增多時可能致使服務器性能降低，應當使用cookie；單個cookie保存的數據不能超過4k。

36 性能優化問題

代碼層面：避免使用css表達式，避免使用高級選擇器、通配符選擇器

緩存利用：緩存ajax，使用CDN，使用外部js和css以便緩存，添加expires頭，服務端配置Etag，減小dns查找

請求數量：合併樣式和腳本，使用css精靈，圖片懶加載。靜態資源延遲加載

請求帶寬：壓縮文件，開啓GZIP

面向內容的優化：減小http請求；減小DNS查找；避免重定向；使用ajax緩存；延遲載入組件；預先載入組件；減小DOM元素數量；切分組件到多個域；最小化iframe數量。

面向servlet：縮小cookie；針對web組件使用域無關性。

減小http請求優勢：減小DNS請求所耗費的時間、減小服務器壓力、減小http請求頭

減小http請求方法：圖片映射；css精靈；合併樣式和腳本；靜態文件資源緩存

37 棧、隊列

棧：插入和刪除都在一端進行;棧先進後出；

隊列：插入刪除在兩端進行；隊列先進先出；

38 棧、堆

棧區：由編譯器自動分配釋放，存放函數的參數值，局部變量的值；一種先進後出的數據結構；

堆區：通常由程序員分配釋放，若程序員不釋放，程序結束時可能由OS回收；堆能夠當作一棵樹；

39 閉包

使用閉包目的：爲了設計私有變量和方法。

優勢：能夠避免全局變量的污染。

缺點：閉包會常佔內存，增大內存使用量，使用不當很容易形成內存泄露。

特性：函數嵌套函數；函數內部能夠引用外部的參數和變量；參數和變量不會被垃圾回收機制回收。

40 JavaScript中每個構造函數都有一個prototype屬性，指向另外一個對象，這個對象的全部屬性和方法，都會被構造函數的實例繼承。這意味着，咱們能夠把那些不變的屬性和方法直接定義在prototype對象上。

41 HTTPS、http

http是超文本傳輸協議，用來在網絡上傳輸超文本的傳送協議，信息是明文傳輸；而HTTPS是具備安全性的ssl加密傳輸協議，安全超文本傳輸協議，對數據進行壓縮和解壓操做並返回網絡上傳回的結果。

http端口號是80，而HTTPS端口號是443.

http是面向無鏈接的，無狀態的，不安全的；而HTTPS由ssl+http協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。

http是由http://開頭，而HTTPS則以https://開頭。

OSI模型中，http工做在應用層，HTTPS工做在傳輸層。

http無需證書；而HTTPS須要CA機構頒發的ssl證書。

42 GET、POST

GET通常用於信息獲取，使用URL傳遞參數，，對所發送信息的數量有限制，通常在2000個字符；而POST通常用於修改服務器上的資源，對所發送的信息沒有限制。

Get須要使用Request.QueryString獲取變量的值，而POST方式經過Request.Form獲取變量的值。即get經過地址欄來傳值，而POST經過提交表單來傳值。

Ps：如下狀況請使用POST》沒法使用緩存文件；向服務器發送大量數據；發送包含未知字符的用戶輸入時候（POST比get更穩定可靠）

43 事件

能夠被JavaScript偵測到的行爲稱爲事件。

事件處理機制：IE是時間冒泡；Firefox是事件捕獲和事件冒泡。

阻止冒泡：ev.stopPropagation(); 舊IE方法：ev.cancelBubble=true;||ev.stopPropagation();

44 重構

在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。即在不改變UI的前提下對網站進行優化，在擴展的同時保持一致的UI。

重構方法：表格佈局改成div+css；網站前端兼容於現代瀏覽器；對於移動平臺的優化；針對SEO優化（搜索引擎優化）；減小代碼間的耦合；讓代碼保持彈性；規範編碼；設計可擴展的API；壓縮js、css、image等前端資源；使用cdn加速資源加載；http服務器的文件緩存；

45 http狀態碼

100 繼續；200 ok； 201 請求成功且服務器建立了新的資源；202 服務器已接受請求但還沒有處理；301 請求的網頁永久移動到新的位置；302 臨時重定向；303 臨時重定向且老是使用get請求新的URI； 304 自從上次請求後，請求的網頁未修改過；400 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求；401 請求未受權； 403 禁止訪問； 404 找不到與URI匹配的資源； 500 最多見的服務器端錯誤； 503 服務器端暫時沒法處理請求；

46 刪除一個cookie

首先，將時間設爲當前時間往前一點：

Var date=new Date();

Date.setDate(date.getDate()-1);

setDate()方法用於設置一個月的一天

而後，expires的設置：

Document.cookie=’user=’+encodeURIComponent(‘name’)+’;expires=’+new Date(0)

47 document.write()

document.write()方法能夠用在兩個方面：頁面載入過程當中用實時腳本建立頁面內容，以及用延時腳本建立本窗口或新窗口的內容。

document.write()只能重繪整個頁面，而innerHTML能夠重繪頁面的一部分。

48 git fetch、git pull

git fetch：從遠程獲取最新版本到本地，不會自動merge

git pull：從遠程獲取最新版本並merge到本地

49 事件代理

又名事件委託，是JavaScript中經常使用綁定事件的技巧，即把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是dom元素的事件冒泡。使用事件代理能夠提升性能。

50 attribute、property

Attribute：dom元素在文檔中做爲html標籤擁有的屬性

Property：dom元素在js中做爲對象擁有的屬性

51 網絡七層模型（從下到上）

物理層：經過媒介傳輸比特，肯定機械及電氣規範；（比特Bit）

數據鏈路層：將比特組裝成幀和點到點的傳遞；（幀Frame）

網絡層：負責數據包從源到宿的傳遞和網際互聯；（包Packet）

傳輸層：提供端到端的可靠報文傳遞和錯誤恢復；（段Segment）

會話層：創建、管理和終止會話；（會話協議數據單元SPDU）

表示層：對數據進行翻譯、加密和壓縮；（表示協議數據單元PPDU）

應用層：容許訪問OSI環境的手段；（應用協議數據單元APDU）

52 dom操做

建立新節點：

createDocumentFragment（）//建立一個dom片斷

createElement（）//建立一個具體的元素

createTextNode（）//建立一個文本節點

添加、移除、替換、插入

appendChild（）、removeChild（）、replaceChild（）、insertBefore（）

查找

getElementById（）、getElementsByTagName（）、getElementsByName（）

53 null、undefined

Null表示無的對象，轉化爲數值時爲0；undefined是一個表示無的原始值，轉化爲數值時爲NaN。當聲明的變量還未被初始化時，變量的默認值爲undefined。Null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。Undefined表示缺乏值，表示此處應該有一個值，只是尚未定義。（變量被聲明瞭，但還沒賦值；調用函數時應該提供的參數沒有提供，該參數屬於undefined；對象沒有賦值的屬性，則屬性的值爲undefined；函數沒有返回值時，默認返回undefined。）null表示沒有對象，即在此處不應有值。（做爲函數的參數表示該函數的參數不是對象；做爲對象原型鏈的終點。）

54 new操做符具體作了什麼

首先，建立一個空對象，而且this變量引用該對象，同時還繼承了該函數的原型；而後屬性和方法被加入到this引用的對象中；接着，新建立的對象由this所引用，且最後隱式地返回this。

55 內存泄露

內存泄漏：指任何對象在你再也不擁有或須要它以後仍然存在。垃圾回收器會按期掃描對象，並計算引用了每一個對象的其餘對象的數量，若是一個對象的引用數量爲0，或該對象的惟一引用是循環的，則該對象的內存便可回收。

setTimeout的第一個參數使用字符串而非函數時會引起內存泄露；閉包、控制檯日誌、循環均可能引發內存泄露。

56 JavaScript對象的建立方式

工廠模式：

構造函數模式：

原型模式：

混合構造函數和原型模式：

動態原型模式：

寄生構造函數模式：