（因字數限制分爲上下文，最後的思惟導圖整理在下篇）javascript

系列以下：以爲有用要點贊！✨css

二本得到實習阿里 offer 經歷-準備篇 | 創做者訓練營第二期

二本得到實習阿里 offer 經歷-面經篇 | 創做者訓練營第二期

二本得到阿里實習 offer 經歷-寶藏篇（上）

二本得到阿里實習 offer 經歷-寶藏篇（下）

前言

滴滴滴！本身整了一年半載的知識點回顧，又歷經了 3 個月的春招實習面試，嗚嗚嗚嗚嗚（一直嗚嗚嗚），幸運的是本身也最終得到到阿里的 offer。在期間受到了不少小友的幫助，鞏固了自身的前端基礎知識。平時本身也有記錄和整理對應的知識，以此機會，總結這段時間來 "挖掘" 這一些讓我成功「上岸」的寶藏吧。「筆者真實經歷的面試題都含括在內了喔！」html

備註：每一個寶藏的開頭都有筆者粗略的思惟導圖噢，能夠看着思惟導圖作自身的查漏補缺（小弟我就是這麼作的！）前端

在整理完對應的思惟導圖後，因近期一直在準備軟考還有其餘各類事情，這一篇本身拖了很久很久才寫耶。我我的建議是這篇文章能夠對本身面試的要點作查漏補缺，而不是詳細的知識點字典噢！對某個要點本身過遍腦子，以爲必要能夠本身整理自身特定的讀書筆記！那就開始開始開始！html5

HTML

導入

link 和 @import區別

- 從屬關係區別。 
  - @import 是 CSS 提供的語法規則，只有導入樣式表的做用；
  - link 是 HTML 提供的標籤，不只能夠加載 CSS 文件，還能夠定義 RSS、rel 鏈接屬性、引入網站圖標等。
- 加載順序區別。加載頁面時
  - link 標籤引入的 CSS 被同時加載；
  - @import 引入的 CSS 將在頁面加載完畢後被加載。
- 兼容性區別。
  - @import 是 CSS2.1 纔有的語法，故只可在 IE5+ 才能識別；
  - link 標籤做爲 HTML 元素，不存在兼容 性問題。
- DOM 可控性區別。
  - 能夠經過 JS 操做 DOM ，插入 link 標籤來改變樣式；
  - 因爲 DOM 方法是基於文檔的，沒法使用 @import 的方式插入樣式。
複製代碼

SEO

- 合理的 title、description、keywords
  - 搜索對着三項的權重逐個減少。
  - title 值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面 title 要有所不一樣
  - description 把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面 description 有所不一樣
  - keywords 列舉出重要關鍵詞便可。
- 語義化的 HTML 代碼，符合 W3C 規範：語義化代碼讓搜索引擎容易理解網頁。
- 重要內容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容確定被抓取。
- 重要內容不要用 js 輸出：爬蟲不會執行 js 獲取內容
- 少用 iframe：搜索引擎不會抓取 iframe 中的內容
- 非裝飾性圖片必須加 alt
- 提升網站速度：網站速度是搜索引擎排序的一個重要指標
複製代碼

常見 meta

<meta> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。
<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。

<!DOCTYPE html>  H5標準聲明，使用 HTML5 doctype，不區分大小寫
<head lang=」en」> 標準的 lang 屬性寫法
<meta charset=’utf-8′>    聲明文檔使用的字符編碼
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge,chrome=1″/>   優先使用 IE 最新版本和 Chrome
<meta name=」description」 content=」不超過150個字符」/>       頁面描述
<meta name=」keywords」 content=」」/>      頁面關鍵詞者
<meta name=」author」 content=」name, email@gmail.com」/>    網頁做
<meta name=」robots」 content=」index,follow」/>      搜索引擎抓取
<meta name=」viewport」 content=」initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no」> 爲移動設備添加 viewport
<meta name=」apple-mobile-web-app-title」 content=」標題」> iOS 設備 begin
<meta name=」apple-mobile-web-app-capable」 content=」yes」/>  添加到主屏後的標題（iOS 6 新增）
是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄
<meta name=」apple-itunes-app」 content=」app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL」>
添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）
<meta name=」apple-mobile-web-app-status-bar-style」 content=」black」/>
<meta name=」format-detection」 content=」telphone=no, email=no」/>  設置蘋果工具欄顏色
<meta name=」renderer」 content=」webkit」>  啓用360瀏覽器的極速模式(webkit)
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge」>     避免IE使用兼容模式
<meta http-equiv=」Cache-Control」 content=」no-siteapp」 />    不讓百度轉碼
<meta name=」HandheldFriendly」 content=」true」>     針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓
<meta name=」MobileOptimized」 content=」320″>   微軟的老式瀏覽器
<meta name=」screen-orientation」 content=」portrait」>   uc強制豎屏
<meta name=」x5-orientation」 content=」portrait」>    QQ強制豎屏
<meta name=」full-screen」 content=」yes」>              UC強制全屏
<meta name=」x5-fullscreen」 content=」true」>       QQ強制全屏
<meta name=」browsermode」 content=」application」>   UC應用模式
<meta name=」x5-page-mode」 content=」app」>    QQ應用模式
<meta name=」msapplication-tap-highlight」 content=」no」>    windows phone 點擊無高光
設置頁面不緩存
<meta http-equiv=」pragma」 content=」no-cache」>
<meta http-equiv=」cache-control」 content=」no-cache」>
<meta http-equiv=」expires」 content=」0″>
複製代碼

attribute 和 property 的區別

- attribute 是 dom 元素在文檔中做爲 html 標籤擁有的屬性；
- property 就是 dom 元素在 js 中做爲對象擁有的屬性。
  - 對於 html 的標準屬性來講，attribute 和 property 是同步的，是會自動更新的，可是對於自定義的屬性來講，他們是不一樣步的。
複製代碼

構建頁面

構建頁面分爲：漸進加強，優雅降級。
複製代碼

優化

前端性能優化主要是爲了提升頁面的加載速度，優化用戶的訪問體驗。

- 頁面的內容方面
（1）經過文件合併、css 雪碧圖、使用 base64 等方式來減小 HTTP 請求數，避免過多的請求形成等待的狀況。
（2）經過 DNS 緩存等機制來減小 DNS 的查詢次數。
（3）經過設置緩存策略，對經常使用不變的資源進行緩存。
（4）使用延遲加載的方式，來減小頁面首屏加載時須要請求的資源。延遲加載的資源當用戶須要訪問時，再去請求加載。
（5）經過用戶行爲，對某些資源使用預加載的方式，來提升用戶須要訪問資源時的響應速度。

- 服務器方面
（1）使用 CDN 服務，來提升用戶對於資源請求時的響應速度。
（2）服務器端啓用 Gzip、Deflate 等方式對於傳輸的資源進行壓縮，減少文件的體積。
（3）儘量減少 cookie 的大小，而且經過將靜態資源分配到其餘域名下，來避免對靜態資源請求時攜帶沒必要要的 cookie

-  CSS 和 JavaScript 方面
（1）把樣式表放在頁面的 head 標籤中，減小頁面的首次渲染的時間。
（2）避免使用 @import 標籤。
（3）儘可能把 js 腳本放在頁面底部或者使用 defer 或 async 屬性，避免腳本的加載和執行阻塞頁面的渲染。
（4）經過對 JavaScript 和 CSS 的文件進行壓縮，來減少文件的體積。
複製代碼

HTML5

新特性

canvascss3
存儲nginx

語義化標籤web

（1） 用正確的標籤作正確的事情。
（2） html 語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
（3） 即便在沒有樣式 CSS 狀況下也以一種文檔格式顯示，而且是容易閱讀的;
（4） 搜索引擎的爬蟲也依賴於 HTML 標記來肯定上下文和各個關鍵字的權重，利於 SEO ;
（5） 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解，無障礙。
複製代碼

媒體

移除元素

- 純表現的元素：basefont，big，center，font, s，strike，tt，u;
- 對可用性產生負面影響的元素：frame，frameset，noframes；
複製代碼

兼容問題

（1）IE8/IE7/IE6 支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器，支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

（2）固然也能夠直接使用成熟的框架，好比 html5shiv ;
複製代碼

<!--[if lt IE 9]> <script> src="https://cdn.jsdelivr.net/npm/html5shiv/dist/html5shiv.min.js"</script> <![endif]-->
複製代碼

[if lte IE 9]……[endif] 判斷 IE 的版本，限定只有 IE9 如下瀏覽器版本須要執行的語句。

元素

HTML4

需熟悉常見的行內元素及塊級元素。
- 行內元素
- 塊級元素
複製代碼

HTML5

- 七類元素
  - Metadata 
  - Flow 
  - Sectioning 
  - Heading 
  - Phrasing 
  - Embedded 
  - Interactive
複製代碼

空元素

標籤內沒有內容的 HTML 標籤被稱爲空元素。空元素是在開始標籤中關閉的。

常見的空元素有：`br` 、`hr` 、`img`、 `input`、 `link`、 `meta`
複製代碼

文檔

DOCTYPE

標準模式與兼容模式

標準模式的渲染方式和 JS 引擎的解析方式都是以該瀏覽器支持的最高標準運行。
兼容模式中，頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法工做。

文檔類型/區別

SGML 是標準通用標記語言，是一種定義電子文檔結構和描述其內容的國際標準語言，是全部電子文檔標記語言的起源。
HTML 是超文本標記語言，主要是用於規定怎麼顯示網頁。

XML 是可擴展標記語言是將來網頁語言的發展方向。

- XML 和 HTML 的最大區別就在於 XML 的標籤是能夠本身建立的，數量無限多，而 HTML 的標籤都是固定的並且數量有限。
- XHTML 也是如今基本上全部網頁都在用的標記語言，他其實和 HTML 沒什麼本質的區別，標籤都同樣，用法也都同樣，就是比 HTML 更嚴格，好比標籤必須都用小寫，標籤都必須有閉合標籤等。
複製代碼

CSS

佈局方式

兩欄佈局

兩欄佈局通常指的是頁面中一共兩欄，左邊固定，右邊自適應的佈局，一共有四種實現的方式。

- 以左邊寬度固定爲 200px 爲例
  - （1）利用浮動，將左邊元素寬度設置爲 200px，而且設置向左浮動。將右邊元素的 margin-left 設置爲 200px，寬度設置爲 auto（默認爲 auto，撐滿整個父元素）。
  - （2）第二種是利用 flex 佈局，將左邊元素的放大和縮小比例設置爲 0，基礎大小設置爲 200px。將右邊的元素的放大比例設置爲 1，縮小比例設置爲 1，基礎大小設置爲 auto。
  - （3）第三種是利用絕對定位佈局的方式，將父級元素設置相對定位。左邊元素設置爲 absolute 定位，而且寬度設置爲 200px。將右邊元素的 margin-left 的值設置爲 200px。
  - （4）第四種仍是利用絕對定位的方式，將父級元素設置爲相對定位。左邊元素寬度設置爲 200px，右邊元素設置爲絕對定位，左邊定位爲 200px，其他方向定位爲 0。
複製代碼

三欄佈局

三欄佈局通常指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的佈局，一共有五種實現方式。

- 這裏以左邊寬度固定爲 100px，右邊寬度固定爲 200px 爲例。
  - （1）利用絕對定位的方式，左右兩欄設置爲絕對定位，中間設置對應方向大小的 margin 的值。
  - （2）利用 flex 佈局的方式，左右兩欄的放大和縮小比例都設置爲 0，基礎大小設置爲固定的大小，中間一欄設置爲 auto。
  - （3）利用浮動的方式，左右兩欄設置固定大小，並設置對應方向的浮動。中間一欄設置左右兩個方向的 margin 值，注意這種方式，中間一欄必須放到最後。
  - （4）聖盃佈局，利用浮動和負邊距來實現。父級元素設置左右的 padding，三列均設置向左浮動，中間一列放在最前面，寬度設置爲父級元素的寬度，所以後面兩列都被擠到了下一行，經過設置 margin 負值將其移動到上一行，再利用相對定位，定位到兩邊。聖盃佈局中間列的寬度不能小於兩邊任意列的寬度，而雙飛翼佈局則不存在這個問題。
  - （5）雙飛翼佈局，雙飛翼佈局相對於聖盃佈局來講，左右位置的保留是經過中間列的 margin 值來實現的，而不是經過父元素的 padding 來實現的。本質上來講，也是經過浮動和外邊距負值來實現的。
複製代碼

靜態佈局

就靜態頁面的佈局
複製代碼

流式佈局

頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變。
複製代碼

自適應佈局

自適應佈局的特色是分別爲不一樣的屏幕分辨率定義佈局，即建立多個靜態佈局，每一個靜態佈局對應一個屏幕分辨率範圍。改變屏幕分辨率能夠切換不一樣的靜態局部（頁面元素位置發生改變），但在每一個靜態佈局中，頁面元素不隨窗口大小的調整發生變化。能夠把自適應佈局看做是靜態佈局的一個系列。
複製代碼

響應式佈局

隨着 CSS3 出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在全部終端上（各類尺寸的 PC、手機、手錶、冰箱的 Web 瀏覽器等等）都能顯示出使人滿意的效果，對 CSS 編寫者而言，在實現上不拘泥於具體手法，分別爲不一樣的屏幕分辨率定義佈局，即頁面元素寬度隨着窗口調整而自動適配。
複製代碼

彈性佈局

flex！！！！！本身去看教程，哥！
複製代碼

CSS3 新特性

僞類 | 僞元素

- css3 中使用單冒號來表示僞類，用雙冒號來表示僞元素。
- 僞類通常匹配的是元素的一些特殊狀態，如 hover、link 等僞元素通常匹配的特殊的位置，好比 after、before 等。
複製代碼

opacity

透明度
複製代碼

媒體查詢

- 外聯式語法
- 內嵌式語法
複製代碼

動畫

transform
transition
animation

陰影

漸變

優化

加載性能

（1）css 壓縮：將寫好的 css 進行打包壓縮，能夠減小不少的體積。    
（2）css 單同樣式：當須要下邊距和左邊距的時候，不少時候選擇: margin: top 0 bottom 0;但 margin-bottom: bottom; margin-left:left; 執行的效率更高。    
（3）減小使用 @import ,而建議使用 link，由於後者在頁面加載時一塊兒加載，前者是等待頁面加載完成以後再進行加載。    
（4）雪碧圖
複製代碼

選擇器性能

（1）關鍵選擇器（key selector）。選擇器的最後面的部分爲關鍵選擇器（即用來匹配目標元素的部分）。CSS 選擇符是從右到左進行匹配的。當使用後代選擇器的時候，瀏覽器會遍歷全部子元素來肯定是不是指定的元素等等；    
（2）若是規則擁有 ID 選擇器做爲其關鍵選擇器，則不要爲規則增長標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）。    
（3）避免使用通配規則，如 *{} 計算次數驚人！只對須要用到的元素進行選擇。    
（4）儘可能少的去對標籤進行選擇，而是用 class。    
（5）儘可能少的去使用後代選擇器，下降選擇器的權重值。後代選擇器的開銷是最高的，儘可能將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯每個標籤元素。    
（6）瞭解哪些屬性是能夠經過繼承而來的，而後避免對這些屬性重複指定規則。
複製代碼

渲染性能

（1）慎重使用高性能屬性：浮動、定位。    
（2）儘可能減小頁面重排、重繪。    
（3）去除空規則：｛｝。空規則的產生緣由通常來講是爲了預留樣式。去除這些空規則無疑能減小 css 文檔體積。
（4）屬性值爲 0 時，不加單位。    
（5）屬性值爲浮動小數 0.，能夠省略小數點以前的0。    
（6）標準化各類瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在後。    
（7）不使用 @import 前綴，它會影響css的加載速度。    
（8）選擇器優化嵌套，儘可能避免層級過深。    
（9）css 雪碧圖，同一頁面相近部分的小圖標，方便使用，減小頁面的請求次數，可是同時圖片自己會變大，使用時，優劣考慮清楚，再使用。    
（10）正確使用 display 的屬性，因爲 display 的做用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。    
（11）不濫用 web 字體。對於中文網站來講 WebFonts 可能很陌生，國外卻很流行。web fonts 一般體積龐大，並且一些瀏覽器在下載 web fonts 時會阻塞頁面渲染損傷性能。
複製代碼

維護性能

（1）將具備相同屬性的樣式抽離出來，整合並經過 class 在頁面中進行使用，提升 css 的可維護性。    
（2）樣式與內容分離：將 css 代碼定義到外部 css 中。
複製代碼

兼容

各主流內核前綴：
mozilla 內核 ( firefox,flock 等) -moz
webkit 內核( safari,chrome 等) -webkit
opera 內核( opera 瀏覽器) -o
trident 內核( ie 瀏覽器) -ms

概念

CSS 加載渲染

- 不阻塞 DOM解析
- 阻塞 DOM 渲染
- 阻塞 JS
複製代碼

繼承

每個屬性在定義中都給出了這個屬性是否具備繼承性，一個具備繼承性的屬性會在沒有指定值的時候，會使用父元素的同屬性的值來做爲本身的值。    
通常具備繼承性的屬性有，字體相關的屬性，font-size 和 font-weight 等。文本相關的屬性，color 和 text-align等。表格的一些佈局屬性、列表屬性如 list-style 等。還有光標屬性 cursor、元素可見性 visibility。        
不是繼承屬性的時候，咱們也能夠經過將它的值設置爲 inherit 來使它從父元素那獲取同名的屬性值來繼承。
複製代碼

BFC

BFC 指的是塊級格式化上下文，一個元素造成了 BFC 以後，那麼它內部元素產生的佈局不會影響到外部元素，外部元素的佈局也不會影響到 BFC 中的內部元素。一個 BFC 就像是一個隔離區域，和其餘區域互不影響。
通常來講根元素是一個 BFC 區域，浮動和絕對定位的元素也會造成 BFC，display 屬性的值爲 inline-block、flex 這些屬性時也會建立 BFC。還有就是元素的 overflow 的值不爲 visible 時都會建立 BFC。

IFC

IFC 指的是行級格式化上下文，它有這樣的一些佈局規則：

（1）行級上下文內部的盒子會在水平方向，一個接一個地放置。    
（2）當一行不夠的時候會自動切換到下一行。    
（3）行級上下文的高度由內部最高的內聯盒子的高度決定。
複製代碼

替換/非替換元素

選擇符

（1）id 選擇器（#myid）
（2）類選擇器（.myclassname）
（3）標籤選擇器（div,h1,p）
（4）後代選擇器（h1 p）
（5）相鄰後代選擇器（子）選擇器（ul>li）
（6）兄弟選擇器（li~a）
（7）相鄰兄弟選擇器（li+a）
（8）屬性選擇器（a[rel="external"]）
（9）僞類選擇器（a:hover,li:nth-child）
（10）僞元素選擇器（::before、::after）
（11）通配符選擇器（*）
複製代碼

優先級

優化

迴流/重繪

1. 避免頻繁使用 style，而是採用修改 class 的方式。
2. 將動畫效果應用到 position 屬性爲 absolute 或 fixed 的元素上。
3. 也能夠先爲元素設置 display: none，操做結束後再把它顯示出來。由於在 display 屬性爲 none 的元素上進行的 DOM 操做不會引起迴流和重繪
4. 使用 createDocumentFragment 進行批量的 DOM 操做。
5. 對於 resize、scroll 等進行防抖/節流處理。
6. 避免頻繁讀取會引起迴流/重繪的屬性，若是確實須要屢次使用，就用一個變量緩存起來。
7. 利用 CSS3 的transform、opacity、filter 這些屬性能夠實現合成的效果，也就是 GPU 加速。
複製代碼

多端優化

屬性

display 值
盒模型
- 如何轉換
em/rem

position 值的定點

absolute：生成絕對定位的元素，相對於值不爲 static 的第一個父元素的 padding box 進行定位，也能夠理解爲離本身這一級元素最近的一級 position 設置爲 absolute 或者 relative 的父元素的 padding box 的左上角爲原點的。
fixed（老IE不支持）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。
relative：生成相對定位的元素，相對於其元素自己所在正常位置進行定位。
static：默認值。沒有定位，元素出如今正常的流中（忽略 top,bottom,left,right,z-index 聲明）。
inherit：規定從父元素繼承 position 屬性的值。
複製代碼

border

（1）border-width 卻不支持百分比。
（2）border-style 的默認值是 none，有一部分人可能會誤覺得是 solid。這也是單純設置 border-width 或 border-color 沒有邊框顯示的緣由。
（3）border-style: double 的表現規則：雙線寬度永遠相等，中間間隔±1。
（4）border-color 默認顏色就是 color 色值。
（5）默認 background 背景圖片是相對於 padding box 定位的。
複製代碼

line-height

（1）對於非替換元素的純內聯元素，其可視高度徹底由 line-height 決定。對於文本這樣的純內聯元素，line-height 就是高度計算的基石，用專業說法就是指定了用來計算行框盒子高度的基礎高度。
（2）內聯元素的高度由固定高度和不固定高度組成，這個不固定的部分就是這裏的「行距」。換句話說，line-height 之因此起做用，就是經過改變「行距」來實現的。在 CSS 中，「行距」分散在當前文字的上方和下方，也就是即便是第一行文字，其上方也是有「行距」的，只不過這個「行距」的高度僅僅是完整「行距」高度的一半，所以，也被稱爲「半行距」。
（3）行距 = line-height-font-size。
（4）border 以及 line-height 等傳統 CSS 屬性並無小數像素的概念。若是標註的是文字上邊距，則向下取整；若是是文字下邊距，則向上取整。
（5）對於純文本元素，line-height 直接決定了最終的高度。可是，若是同時有替換元素，則 line-height 只能決定最小高度。
（6）對於塊級元素，line-height 對其自己是沒有任何做用的，咱們平時改變 line-height，塊級元素的高度跟着變化其實是經過改變塊級元素裏面內聯級別元素佔據的高度實現的。
（7）line-height 的默認值是 normal，還支持數值、百分比值以及長度值。爲數值類型時，其最終的計算值是和當前 font-size 相乘後的值。爲百分比值時，其最終的計算值是和當前 font-size 相乘後的值。爲長度值時原意不變。
（8）若是使用數值做爲 line-height 的屬性值，那麼全部的子元素繼承的都是這個值；可是，若是使用百分比值或者長度值做爲屬性值，那麼全部的子元素繼承的是最終的計算值。
（9）不管內聯元素 line-height 如何設置，最終父級元素的高度都是由數值大的那個 line-height 決定的。
（10）只要有「內聯盒子」在，就必定會有「行框盒子」，就是每一行內聯元素外面包裹的一層看不見的盒子。而後，重點來了，在每一個「行框盒子」前面有一個寬度爲 0 的具備該元素的字體和行高屬性的看不見的「幽靈空白節點」。
複製代碼

清除浮動

設置父級

設置 BFC

浮動
overflow
inline-block
複製代碼

after 僞類

a 標籤僞類

a 標籤有四種狀態：連接訪問前、連接訪問後、鼠標滑過、激活，分別對應四種僞類: link、:visited、:hover、:active；
複製代碼

垂直居中方法

對於寬高固定的元素
（1）咱們能夠利用 margin:0 auto 來實現元素的水平居中。
（2）利用絕對定位，設置四個方向的值都爲 0，並將 margin 設置爲 auto，因爲寬高固定，所以對應方向實現平分，能夠實現水平和垂直方向上的居中。
（3）利用絕對定位，先將元素的左上角經過 top:50% 和 left:50% 定位到頁面的中心，而後再經過 margin 負值來調整元素的中心點到頁面的中心。
（4）利用絕對定位，先將元素的左上角經過 top:50% 和 left:50% 定位到頁面的中心，而後再經過 translate 來調整元素的中心點到頁面的中心。
（5）使用 flex 佈局，經過 align-items:center 和 justify-content:center 設置容器的垂直和水平方向上爲居中對齊，而後它的子元素也能夠實現垂直和水平的居中。

對於寬高不定的元素，上面的後面兩種方法，能夠實現元素的垂直和水平的居中。
複製代碼

包含塊

包含塊（containing block）就是元素用來計算和定位的一個框。
（1）根元素（不少場景下能夠當作是`<html>`）被稱爲「初始包含塊」，其尺寸等同於瀏覽器可視窗口的大小。
（2）對於其餘元素，若是該元素的 position 是 relative 或者 static，則「包含塊」由其最近的塊容器祖先盒的 content box邊界造成。
（3）若是元素 position:fixed，則「包含塊」是「初始包含塊」。
（4）若是元素 position:absolute，則「包含塊」由最近的 position 不爲 static 的祖先元素創建
複製代碼

flex

margin 重疊問題

margin 重疊指的是在垂直方向上，兩個相鄰元素的 margin 發生重疊的狀況。

通常來講能夠分爲四種情形：

1. 第一種是相鄰兄弟元素的 marin-bottom 和 margin-top 的值發生重疊。這種狀況下咱們能夠經過設置其中一個元素爲 BFC 來解決。
2. 第二種是父元素的 margin-top 和子元素的 margin-top 發生重疊。它們發生重疊是由於它們是相鄰的，因此咱們能夠經過這一點來解決這個問題。咱們能夠爲父元素設置 border-top、padding-top 值來分隔它們，固然咱們也能夠將父元素設置爲 BFC 來解決。
3. 第三種是高度爲 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 發生重疊。它們發生重疊一個是由於它們相鄰，一個是由於父元素的高度不固定。所以咱們能夠爲父元素設置 border-bottom、padding-bottom 來分隔它們，也能夠爲父元素設置一個高度，max-height 和 min-height 也能解決這個問題。固然將父元素設置爲 BFC 是最簡單的方法。
4. 第四種狀況，是沒有內容的元素，自身的 margin-top 和 margin-bottom 發生的重疊。咱們能夠經過爲其設置 border、padding 或者高度來解決這個問題。
複製代碼

隱藏圖片會不會加載

（1）元素的背景圖片

元素自己設置 display:none，會請求圖片 
父級元素設置 display:none，不會請求圖片 
樣式沒有元素使用，不會請求
:hover 樣式下，觸發時請求
複製代碼

（2）img 標籤圖片任何狀況下都會請求圖片

省略溢出

單行

/*單行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
複製代碼

多行

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度爲須要顯示的行數*行高，好比這裏咱們顯示兩行，則爲3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}
複製代碼

元素隱藏

（1）使用 display:none; 隱藏元素，渲染樹不會包含該渲染對象，所以該元素不會在頁面中佔據位置，也不會響應綁定的監聽事件。
（2）使用 visibility:hidden; 隱藏元素。元素在頁面中仍佔據空間，可是不會響應綁定的監聽事件。
（3）使用 opacity:0; 將元素的透明度設置爲 0，以此來實現元素的隱藏。元素在頁面中仍然佔據空間，而且可以響應元素綁定的監聽事件。
（4）經過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏。
（5）經過 z-index 負值，來使其餘元素遮蓋住該元素，以此來實現隱藏。
（6）經過 clip/clip-path 元素裁剪的方法來實現元素的隱藏，這種方法下，元素仍在頁面中佔據位置，可是不會響應綁定的監聽事件。
（7）經過 transform:scale(0,0) 來將元素縮放爲 0，以此來實現元素的隱藏。這種方法下，元素仍在頁面中佔據位置，可是不會響應綁定的監聽事件。
複製代碼

css reset 和 normalize.css

- css reset 是最先的一種解決瀏覽器間樣式不兼容問題的方案，它的基本思想是將瀏覽器的全部樣式都重置掉，從而達到全部瀏覽器樣式保持一致的效果。可是使用這種方法，可能會帶來一些性能上的問題，而且對於一些元素的沒必要要的樣式的重置，其實反而會形成多此一舉的效果。

- 後面出現一種更好的解決瀏覽器間樣式不兼容的方法，就是 normalize.css ，它的思想是儘可能的保留瀏覽器自帶的樣式，經過在原有的樣式的基礎上進行調整，來保持各個瀏覽器間的樣式表現一致。相對與 css reset，normalize.css 的方法保留了有價值的默認值，而且修復了一些瀏覽器的 bug，並且使用 normalize.css 不會形成元素複雜的繼承鏈。
複製代碼

viewport

佈局視口

第一個視口是佈局視口，在移動端顯示網頁時，因爲移動端的屏幕尺寸比較小，若是網頁使用移動端的屏幕尺寸進行佈局的話，那麼整個頁面的佈局都會顯示錯亂。因此移動端瀏覽器提供了一個 layout viewport 佈局視口的概念，使用這個視口來對頁面進行佈局展現，通常 layout viewport 的大小爲 980px，所以頁面佈局不會有太大的變化，咱們能夠經過拖動和縮放來查看到這個頁面。
複製代碼

視覺視口

第二個視口指的是視覺視口，visual viewport 指的是移動設備上咱們可見的區域的視口大小，通常爲屏幕的分辨率的大小。visual viewport 和 layout viewport的關係，就像是咱們經過窗戶看外面的風景，視覺視口就是窗戶，而外面的風景就是佈局視口中的網頁內容。
複製代碼

理想視口

第三個視口是理想視口，因爲 layout viewport 通常比 visual viewport 要大，因此想要看到整個頁面必須經過拖動和縮放才能實現。因此又提出了 ideal viewport 的概念，ideal viewport 下用戶不用縮放和滾動條就可以查看到整個頁面，而且頁面在不一樣分辨率下顯示的內容大小相同。ideal viewport 其實就是經過修改 layout viewport 的大小，讓它等於設備的寬度，這個寬度能夠理解爲是設備獨立像素，所以根據 ideal viewport 設計的頁面，在不一樣分辨率的屏幕下，顯示應該相同。
複製代碼

JS

數據類型

七大基本數據類型

【語言基礎】-大大的紅寶書（三）

String
Boolean

Number

以 0X、0x 開頭的表示爲十六進制。
以 0、0O、0o 開頭的表示爲八進制。
以 0B、0b 開頭的表示爲二進制格式
複製代碼

isNaN 和 Number.isNaN

函數 isNaN 接收參數後，會嘗試將這個參數轉換爲數值，任何不能被轉換爲數值的的值都會返回 true，所以非數字值傳入也會返回 true ，會影響 NaN 的判斷。
函數 Number.isNaN 會首先判斷傳入參數是否爲數字，若是是數字再繼續判斷是否爲 NaN ，這種方法對於 NaN 的判斷更爲準確。
複製代碼

Null

Undefined

undefined 與 undeclared 區別
undefined 是已聲明，未賦值。
undeclared 是還未聲明。

undefined 與 null 區別
undefined 表明的含義是未定義，null 表明的含義是空對象。通常變量聲明瞭但尚未定義的時候會返回 undefined，null主要用於賦值給一些可能會返回對象的變量，做爲初始化。
當咱們對兩種類型使用 typeof 進行判斷的時候，Null 類型化會返回 「object」，這是一個歷史遺留的問題。當咱們使用雙等號對兩種類型的值進行比較時會返回 true，使用三個等號時會返回 false。
複製代碼

Symbol

表明建立後獨一無二且不可變的數據類型
複製代碼

BigInt

BigInt 是一種數字類型的數據，它能夠表示任意精度格式的整數，使用 BigInt 能夠安全地存儲和操做大整數，即便這個數已經超出了 Number 可以表示的安全整數範圍。
複製代碼

引用數據類型

判斷數據類型方式

常見三種

typeof

Object.prototype.toString.call()

[[Class]]

全部 typeof 返回值爲 "object" 的對象（如數組）都包含一個內部屬性 [[Class]]（咱們能夠把它看做一個內部的分類，而非傳統的面向對象意義上的類）。
這個屬性沒法直接訪問，通常經過Object.prototype.toString(..) 來查看。
複製代碼

instanceof

區別/優缺點

內置對象

js 中的內置對象主要指的是在程序執行前存在全局做用域裏的由 js 定義的一些全局值屬性、函數和用來實例化其餘對象的構造函數對象。

標準內置對象的分類

（1）值屬性，這些全局屬性返回一個簡單值，這些值沒有本身的屬性和方法。
    例如 Infinity、NaN、undefined、null 字面量

（2）函數屬性，全局函數能夠直接調用，不須要在調用時指定所屬對象，執行結束後會將結果直接返回給調用者。
    例如 eval()、parseFloat()、parseInt() 等

（3）基本對象，基本對象是定義或使用其餘對象的基礎。基本對象包括通常對象、函數對象和錯誤對象。
    例如 Object、Function、Boolean、Symbol、Error 等

（4）數字和日期對象，用來表示數字、日期和執行數學計算的對象。
    例如 Number、Math、Date

（5）字符串，用來表示和操做字符串的對象。
    例如 String、RegExp

（6）可索引的集合對象，這些對象表示按照索引值來排序的數據集合，包括數組和類型數組，以及類數組結構的對象。
    例如 Array

（7）使用鍵的集合對象，這些集合對象在存儲數據時會使用到鍵，支持按照插入順序來迭代元素。
    例如 Map、Set、WeakMap、WeakSet

（8）矢量集合，SIMD 矢量集合中的數據會被組織爲一個數據序列。
    例如 SIMD 等

（9）結構化數據，這些對象用來表示和操做結構化的緩衝區數據，或使用 JSON 編碼的數據。
    例如 JSON 等

（10）控制抽象對象
    例如 Promise、Generator 等

（11）反射
    例如 Reflect、Proxy

（12）國際化，爲了支持多語言處理而加入 ECMAScript 的對象。
    例如 Intl、Intl.Collator 等

（13）WebAssembly

（14）其餘
    例如 arguments
複製代碼

模塊化

發展歷史

- 第一種是 CommonJS 方案，它經過 require 來引入模塊，經過 module.exports 定義模塊的輸出接口。
    這種模塊加載方案是服務器端的解決方案，它是以同步的方式來引入模塊的，由於在服務端文件都存儲在本地磁盤，因此讀取很是快，因此以同步的方式加載沒有問題。
    但若是是在瀏覽器端，因爲模塊的加載是使用網絡請求，所以使用異步加載的方式更加合適。
- 第二種是 AMD 方案，這種方案採用異步加載的方式來加載模塊，模塊的加載不影響後面語句的執行，全部依賴這個模塊的語句都定義在一個回調函數裏，等到加載完成後再執行回調函數。require.js 實現了 AMD 規範。
- 第三種是 CMD 方案，這種方案和 AMD 方案都是爲了解決異步模塊加載的問題，sea.js 實現了 CMD 規範。它和 require.js的區別在於模塊定義時對依賴的處理不一樣和對依賴模塊的執行時機的處理不一樣。
- 第四種方案是 ES6 提出的方案，使用 import 和 export 的形式來導入導出模塊。這種方案和上面三種方案都不一樣。參考 61。
複製代碼

CommonJs和ES6模塊化區別

- 加載
- 輸出
- 導入
- this 指向
複製代碼

AMD 和 CMD 規範區別

它們之間的主要區別有兩個方面。
（1）第一個方面是在模塊定義時對依賴的處理不一樣。AMD 推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊。而 CMD 推崇就近依賴，只有在用到某個模塊的時候再去require。    
（2）第二個方面是對依賴模塊的執行時機處理不一樣。
    首先 AMD 和 CMD 對於模塊的加載方式都是異步加載。不過它們的區別在於模塊的執行時機，AMD 在依賴模塊加載完成後就直接執行依賴模塊，依賴模塊的執行順序和咱們書寫的順序不必定一致。
    而 CMD 在依賴模塊加載完成後並不執行，只是下載而已，等到全部的依賴模塊都加載好後，進入回調函數邏輯，遇到 require 語句的時候才執行對應的模塊，這樣模塊的執行順序就和咱們書寫的順序保持一致了。
複製代碼

ES6 模塊區別

CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。

ES6 模塊的運行機制與 CommonJS 不同。遇到模塊加載命令 import，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊裏面去取值。

this 的指向不一樣

CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。CommonJS 模塊就是對象，即在輸入時是先加載整個模塊，生成一個對象，而後再從這個對象上面讀取方法，這種加載稱爲「運行時加載」。而 ES6 模塊不是對象，它的對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。

模塊加載器實現

事件

事件循環

node10以後
- 與瀏覽器事件循環一致

node10以前

六大宏任務

script 腳本的執行
setTimeout 
setInterval
setImmediate
I/O 操做
UI 渲染
複製代碼

微任務

事件機制

事件代理/委託

冒泡

阻止冒泡：event.stopPropagation() 或者 ie 下的方法 event.cancelBubble = true;
複製代碼

捕獲

自定義事件

- new Event
- new customEvent
- document.createEvent('CustomEvent')+initEvent()
複製代碼

事件監聽

- addEventListener
複製代碼

事件觸發

- dispatchEvent
複製代碼

延遲加載

編程

手撕 JS

節流
防抖
Promise
ajax
this
```
- call
- apply
- bind
複製代碼
```

Array

- filter
- flat
- map
- reduve
複製代碼

Object

- new
- create
- instanceof
- assign
複製代碼

深拷貝

遞歸循環

假深拷貝

JSON 序列化

缺陷
  1. 時間對象 => 時間字符串
  2. RegExp、Error對象 => 空 {}
  3. function、undefined => 丟失
  4. NaN、Infinity、-Infinity => null
  5. 對象是由構造函數生成 => 丟棄對象的 constructor
  6. 沒法對象自引用 => 報錯
複製代碼

Object.assign()

浮點數千位數

// 方法一
function format(number) {
  return number && number.replace(/(?!^)(?=(\d{3})+\.)/g, ",");
}
// 方法二
function format1(number) {
  return Intl.NumberFormat().format(number)
}
// 方法三
function format2(number) {
  return number.toLocaleString('en')
}
複製代碼

精度問題

字符串解析編譯

- eval
- new Function
- setTimeOut
- setInterval
複製代碼

1000000個數據的解決辦法

咱們須要思考的問題：該處理是否必須同步完成？數據是否必須按順序完成？
解決辦法：

（1）將數據分頁，利用分頁的原理，每次服務器端只返回必定數目的數據，瀏覽器每次只對一部分進行加載。
（2）使用懶加載的方法，每次加載一部分數據，其他數據當須要使用時再去加載。
（3）使用數組分塊技術，基本思路是爲要處理的項目建立一個隊列，而後設置定時器每過一段時間取出一部分數據，而後再使用定時器取出下一個要處理的項目進行處理，接着再設置另外一個定時器。
複製代碼

查找一篇英文文章中出現頻率最高的單詞

四位隨機數

簡單性能

代碼

1.使用位運算代替一些簡單的四則運算。
2.避免使用過深的嵌套循環。
3.不要使用未定義的變量。
4.當須要屢次訪問數組長度時，能夠用變量保存起來，避免每次都會去進行屬性查找。
複製代碼

移動端點擊延遲

移動端點擊有 300ms 的延遲是由於移動端會有雙擊縮放的這個操做，所以瀏覽器在 click 以後要等待 300ms，看用戶有沒有下一次點擊，來判斷此次操做是否是雙擊。還可能會形成點擊穿透問題。
有三種解決辦法：

1. 經過 meta 標籤禁用網頁的縮放。
2. 經過 meta 標籤將網頁的 viewport 設置爲 ideal viewport。
3. 調用一些 js 庫，好比 FastClick
複製代碼

檢測瀏覽器版本

檢測 window.navigator.userAgent 的值，但這種方式很不可靠，由於 userAgent 能夠被改寫，而且早期的瀏覽器如 ie，會經過假裝本身的 userAgent 的值爲 Mozilla 來躲過服務器的檢測。
功能檢測，根據每一個瀏覽器獨有的特性來進行判斷，如 ie 下獨有的 ActiveXObject。

V8垃圾回收機制

【變量、做用域與內存】-大大的紅寶書（四）

- v8 的垃圾回收機制基於分代回收機制，這個機制又基於世代假說，這個假說有兩個特色，一是新生的對象容易早死，另外一個是不死的對象會活得更久。基於這個假說，v8 引擎將內存分爲了新生代和老生代。

- 新建立的對象或者只經歷過一次的垃圾回收的對象被稱爲新生代。經歷過屢次垃圾回收的對象被稱爲老生代。

- 新生代被分爲 From 和 To 兩個空間，To 通常是閒置的。當 From 空間滿了的時候會執行 Scavenge 算法進行垃圾回收。當咱們執行垃圾回收算法的時候應用邏輯將會中止，等垃圾回收結束後再繼續執行。
  這個算法分爲三步：
  （1）首先檢查 From 空間的存活對象，若是對象存活則判斷對象是否知足晉升到老生代的條件，若是知足條件則晉升到老生代。若是不知足條件則移動 To 空間。
  （2）若是對象不存活，則釋放對象的空間。
  （3）最後將 From 空間和 To 空間角色進行交換。

- 新生代對象晉升到老生代有兩個條件：
  （1）第一個是判斷是對象否已經通過一次 Scavenge 回收。若經歷過，則將對象從 From 空間複製到老生代中；若沒有經歷，則複製到 To 空間。
  （2）第二個是 To 空間的內存使用佔比是否超過限制。當對象從 From 空間複製到 To 空間時，若 To 空間使用超過 25%，則對象直接晉升到老生代中。設置 25% 的緣由主要是由於算法結束後，兩個空間結束後會交換位置，若是 To 空間的內存過小，會影響後續的內存分配。
複製代碼

引用計數法

標記清除算法

- 標記階段
- 清除階段
複製代碼

常見內存泄漏

1. 意外的全局變量
2. 被遺忘的計時器或回調函數
3. 脫離 DOM 的引用
4. 閉包（低版本 IE ）
複製代碼

node 尋址

若是 X 是內置模塊（好比 require('http')）

1. 返回該模塊。
2. 再也不繼續執行。
複製代碼

若是 X 以 "./" 或者 "/" 或者 "../" 開頭

1. 根據 X 所在的父模塊，肯定 X 的絕對路徑。
2. 將 X 當成文件，依次查找下面文件，只要其中有一個存在，就返回該文件，再也不繼續執行。X、 X.js、X.json、X.node
3. 將 X 當成目錄，依次查找下面文件，只要其中有一個存在，就返回該文件，再也不繼續執行。
複製代碼

若是 X 不帶路徑

1. 根據 X 所在的父模塊，肯定 X 可能的安裝目錄。
2. 依次在每一個目錄中，將 X 當成文件名或目錄名加載。
複製代碼

拋出 "not found"

設計模式

JavaScript 中常見設計模式整理

DOM 操做

documen.write 和 innerHTML 區別

- document.write 的內容會代替整個文檔內容，會重寫整個頁面。
- innerHTML 的內容只是替代指定元素的內容，只會重寫頁面中的部份內容
複製代碼

節點操做

建立

createDocumentFragment(node);
createElement(node);
createTextNode(text);
複製代碼

添刪改插

appendChild(node)
removeChild(node)
replaceChild(new,old)
insertBefore(new,old)
複製代碼

查找

getElementById();
getElementsByName();
getElementsByTagName();
getElementsByClassName();
querySelector();
querySelectorAll();
複製代碼

屬性操做

getAttribute(key);
setAttribute(key, value);
hasAttribute(key);
removeAttribute(key);
複製代碼

虛擬 DOM

- 優缺點
- 比較 DOM 樹差別
- 轉爲真實 DOM
複製代碼

跨域

緣由

解決

1.經過 jsonp 跨域
2.document.domain + iframe 跨域
3.location.hash + iframe
4.window.name + iframe 跨域
5.postMessage 跨域
6.跨域資源共享（CORS)
7.nginx 代理跨域
8.nodejs 中間件代理跨域
9.WebSocket 協議跨域
複製代碼

Ajax

它是 Asynchronous JavaScript and XML 的縮寫，指的是經過 JavaScript 的異步通訊，從服務器獲取 XML 文檔從中提取數據，再更新當前網頁的對應部分，而不用刷新整個網頁。
複製代碼

建立

1. 建立 XMLHttpRequest 對象，也就是建立一個異步調用對象
2. 建立一個新的 HTTP 請求，並指定該 HTTP 請求的方法、URL 及驗證信息
3. 設置響應 HTTP 請求狀態變化的函數
4. 發送 HTTP 請求
5. 獲取異步調用返回的數據
6. 使用 JavaScript 和 DOM 實現局部刷新
複製代碼

狀態碼

(0) 未初始化

此階段確認XMLHttpRequest對象是否建立。
值爲0表示對象已經存在。
複製代碼

(1)載入

已調用send()方法，正在發送請求
值爲1表示正在向服務端發送請求。 
複製代碼

(2)載入完成

send()方法執行完成，接收服務器端的響應數據。
值爲2表示已經接收徹底部響應數據。 
複製代碼

(3)交互

此階段解析接收到的服務器端響應數據。
狀態3表示正在解析數據。 
複製代碼

(4)完成

解析已經完成。
值爲4表示數據解析完畢。
複製代碼

整個XMLHttpRequest對象的生命週期應該包含以下階段：【建立－初始化請求0－發送請求1－接收數據2－解析數據3－完成4 】

正則表達式

ES6

常見方法

數組

數組和字符串的轉換方法：toString() toLocalString()、join() 其中 join() 方法能夠指定轉換爲字符串時的分隔符。
數組尾部操做的方法 pop() 和 push()，push 方法能夠傳入多個參數。
數組首部操做的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort()，sort() 方法能夠傳入一個函數來進行比較，傳入先後兩個值，若是返回值爲正數，則交換兩個參數的位置。
數組鏈接的方法 concat() ，返回的是拼接好的數組，不影響原數組。
數組截取辦法 slice()，用於截取數組中的一部分返回，不影響原數組。
數組插入方法 splice()，影響原數組查找特定項的索引的方法，indexOf() 和 lastIndexOf() 迭代方法 every()、some()、filter()、map() 和 forEach() 方法
數組歸併方法 reduce() 和 reduceRight() 方法
fill 方法用一個固定值填充一個數組中從起始索引到終止索引內的所有元素。
複製代碼

常見屬性

JS 常見概念

繼承

【繼承】-大大的紅寶書

原型

p.__proto__
p.constructor.prototype
Object.getPrototypeOf(p)
複製代碼

原型鏈

建立對象

ES6: class 類

ES6 前模擬類

工廠模式
  工廠模式的主要工做原理是用函數來封裝建立對象的細節，從而經過調用函數來達到複用的目的。可是它有一個很大的問題就是建立出來的對象沒法和某個類型聯繫起來，它只是簡單的封裝了複用代碼，而沒有創建起對象和類型間的關係。

構造函數模式

盜用構造函數
  大體基本思路爲：在子類構造函數中調用父類構造函數。畢竟函數就是特定上下文中執行代碼的簡單對象，因此可使用 apply () 和 call() 方法以新建立的對象爲上下文執行構造函數。
  盜用構造函數基本上雖然說解決了原型鏈繼承的引用類型的缺陷，但也不能單獨使用。

組合繼承
  使用原型鏈繼承原型上的屬性和方法，而經過盜用構造函數繼承實例屬性。這樣既能夠把方法定義在原型上以實現重用，又可讓每一個實例都有本身的屬性。

原型式繼承
  由於每個函數都有一個 prototype 屬性，這個屬性是一個對象，它包含了經過構造函數建立的全部實例都能共享的屬性和方法。所以咱們可使用原型對象來添加公用屬性和方法，從而實現代碼的複用。
  這種方式相對於構造函數模式來講，解決了函數對象的複用問題。可是這種模式也存在一些問題，一個是沒有辦法經過傳入參數來初始化值，另外一個是若是存在一個引用類型如 Array 這樣的值，那麼全部的實例將共享一個對象，一個實例對引用類型值的改變會影響全部的實例。

寄生式繼承
  基本思路相似於寄生構造函數和工廠模式：建立一個實現繼承的函數，以某種方式加強對象，而後返回這個對象。
  寄生式繼承一樣適合主要關注對象，而不在意類型的構造函數的場景。Object.create() 函數不是寄生式繼承所必需的，任何返回對象的函數均可以在這裏使用。

寄生式組合繼承
  寄生式組合繼承經過盜用結構函數繼承屬性，且使用混合式原型鏈繼承方法。
  基本思路：使用寄生式繼承來繼承父類原型，將返回的新對象賦值給子類原型。
複製代碼

做用域

【變量、做用域與內存】-大大的紅寶書（四）

執行上下文
變量提高
let/const/var
做用域鏈

this

- 隱式更改
  常見狀況
    嚴格模式
    非嚴格模式
  箭頭函數

- 顯式更改
  call/apply/bind
    (手撕)
    (區別)
複製代碼

閉包

概念及實現
    閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，建立的函數能夠訪問到當前函數的局部變量。

閉包有兩個經常使用的用途。
    1.閉包的第一個用途是使咱們在函數外部可以訪問到函數內部的變量。經過使用閉包，咱們能夠經過在外部調用閉包函數，從而在外部訪問到函數內部的變量，可使用這種方法來建立私有變量。
    2.函數的另外一個用途是使已經運行結束的函數上下文中的變量對象繼續留在內存中，由於閉包函數保留了這個變量對象的引用，因此這個變量對象不會被回收。

其實閉包的本質就是做用域鏈的一個特殊的應用，只要瞭解了做用域鏈的建立過程，就可以理解閉包的實現原理。

- 內存泄漏排查
  chrome開發者工具
    Performance
    memory
複製代碼

異步

異步發展史

Promise

理解
靜態方法的實現
複製代碼

async
- 與promise的區別

hasOwnProperty

全部繼承了 Object 的對象都會繼承到 hasOwnProperty 方法。這個方法能夠用來檢測一個對象是否含有特定的自身屬性，和 in 運算符不一樣，該方法會忽略掉那些從原型鏈上繼承到的屬性。
複製代碼

JSON

JSON 是一種基於文本的輕量級的數據交換格式。它能夠被任何的編程語言讀取和做爲數據格式來傳遞。

在項目開發中，咱們使用 JSON 做爲先後端數據交換的方式。在前端咱們經過將一個符合 JSON 格式的數據結構序列化爲 JSON 字符串，而後將它傳遞到後端，後端經過 JSON 格式的字符串解析後生成對應的數據結構，以此來實現先後端數據的一個傳遞。

由於 JSON 的語法是基於 js 的，所以很容易將 JSON 和 js 中的對象弄混，可是咱們應該注意的是 JSON 和 js 中的對象不是一回事，JSON 中對象格式更加嚴格，好比說在 JSON 中屬性值不能爲函數，不能出現 NaN 這樣的屬性值等，所以大多數的 js 對象是不符合 JSON 對象的格式的。

在 js 中提供了兩個函數來實現 js 數據結構和 JSON 格式的轉換處理。
  JSON.stringify 函數，經過傳入一個符合 JSON 格式的數據結構，將其轉換爲一個 JSON 字符串。若是傳入的數據結構不符合 JSON 格式，那麼在序列化的時候會對這些值進行對應的特殊處理，使其符合規範。在前端向後端發送數據時，咱們能夠調用這個函數將數據對象轉化爲 JSON 格式的字符串。
  JSON.parse() 函數，這個函數用來將 JSON 格式的字符串轉換爲一個 js 數據結構，若是傳入的字符串不是標準的 JSON 格式的字符串的話，將會拋出錯誤。當咱們從後端接收到 JSON 格式的字符串時，咱們能夠經過這個方法來將其解析爲一個 js 數據結構，以此來進行數據的訪問。
複製代碼

Object.definePropertype() 與 Proxy

延遲加載

- 放入底部
- defer
- async
- 動態建立 DOM
- setTimeout 延遲
複製代碼

類數組對象

概念

一個擁有 length 屬性和若干索引屬性的對象就能夠被稱爲類數組對象，類數組對象和數組相似，可是不能調用數組的方法。
常見的類數組對象有 arguments 和 DOM 方法的返回結果，還有一個函數也能夠被看做是類數組對象，由於它含有 length 屬性值，表明可接收的參數個數。
複製代碼

轉換

Array.prototype.slice.call(arrayLike);
Array.prototype.splice.call(arrayLike, 0);
Array.prototype.concat.apply([], arrayLike);
Array.from(arrayLike);
[...arrayLike]
複製代碼

Polyfill

Polyfill 指的是用於實現瀏覽器並不支持的原生 API 的代碼。
複製代碼

編碼

escape,encodeURL,encodeURLComponent

encodeURI 是對整個 URI 進行轉義，將 URI 中的非法字符轉換爲合法字符，因此對於一些在 URI 中有特殊意義的字符不會進行轉義。
encodeURIComponent 是對 URI 的組成部分進行轉義，因此一些特殊字符也會獲得轉義。
escape 和 encodeURI 的做用相同，不過它們對於 unicode 編碼爲 0xff 以外字符的時候會有區別，escape 是直接在字符的 unicode 編碼前加上 %u，而 encodeURI 首先會將字符轉換爲 UTF-8 的格式，再在每一個字節前加上 %。
複製代碼

Unicode 與 UTF-8

Unicode 是一種字符集合，如今可容納 100 多萬個字符。每一個字符對應一個不一樣的 Unicode 編碼，它只規定了符號的二進制代碼，卻沒有規定這個二進制代碼在計算機中如何編碼傳輸。
UTF-8 是一種對 Unicode 的編碼方式，它是一種變長的編碼方式，能夠用 1~4 個字節來表示一個字符。
複製代碼

Unicode 是一本字典，UTF-8 是怎麼樣使用這個字典。

常見問題

點這點這✨
二本得到阿里實習 offer 經歷-寶藏篇（下）