適合非大廠的70+面試題(2022-5)

語言: CN / TW / HK

theme: github highlight: a11y-dark


適合非大廠的70+面試題(2022-5)

tips:學識有限,難免錯漏,僅供參考。

1. 前端效能優化?

前端效能優化:減少消耗,提高使用者體驗。

  • 減少請求數量。 合理規劃利用請求,合理利用快取技術減少不必要的頻繁請求。及時性不高的資料可以快取起來利用, 例如一些基礎資料。應用懶載入技術,按需載入,縮短首屏或頁面首次載入發起的請求數量,縮短等待和渲染時間。

  • 縮短請求時間。 打包壓縮檔案,壓縮 js 和 css 檔案,減小檔案體積,縮短載入時間。

  • 優化資源載入方式。 script 載入。考慮非同步請求資源,合理利用 script 載入方式,script 指令碼的執行只在預設的情況下是同步和阻塞的。 script 有 defer 和 async 屬性(延遲和非同步),這可以改變指令碼的執行方式。

css 載入。合理規劃 css 的載入引入方式,減少 @import 的使用 頁面被載入時,link 會同時被載入, 而 @import 引用的 CSS 會等到頁面被載入完再載入。css 儘量放在 head 中會先載入,減少首次渲染時間。

一些使用者操作行為用到的資源,可不在初始化時載入,合理延遲或有需要才請求。

  • 減少重排(reflow)重繪(repaint)

減少不必要的 DOM 深度,例如不必要的巢狀結構。在 DOM 樹中的一個級別進行更改可能會致使該樹的所有級別(上至根節點,下至所修改節點的子級)都隨之變化。這會導致花費更多的時間來執行重排。

儘可能減少 CSS 規則的數量,並刪除未使用到的 CSS 規則。一些預設就有的 CSS 規則,就不必寫了,具有繼承性的樣式,也不必每級節點都寫。calc() 之類的計算方法應該少用。

如果您想進行復雜的渲染更改(例如動畫),請在流程外執行此操作。您可以使用 position-absolute 或 position-fixed 來實現此目的。

避免使用不必要且複雜的 CSS 選擇器(尤其是後代選擇器),因為此類選擇器需要耗用更多的 CPU 處理能力來執行選擇器匹配。總之不必要的深度,不管是 css 還是 dom 都不是好的選擇,這對人和機器都是同樣的道理,因為讀和理解起來都同樣的“費力”。

合理使用虛擬列表技術,降低消耗。

更詳細請看導致 JS 緩慢的三主因之重排重繪

  • 函式節流(throttle)或函式去抖(debounce)

使用函式節流(throttle)或函式去抖(debounce),限制某些不必要的行為的的頻繁觸發。

更詳細的函式去抖與節流

  • 其他 使用效能更好的 api,優化網路連線等

2. 簡述一下你對 HTML 語義化的理解?

合理使用標籤: - 可讀性。程式碼結構清晰,便於理解,對人和機器的可讀性都更好。 - 可維護和團隊協作。清晰語義化的結構,可維護性更高,更有利於團隊協作。 - seo。有利於搜尋引擎優化(seo)。更多關於seo 和 meta標籤

常見語義化標籤:h1-h6,header,footer,main,nav,title,article,time,progress,aside,strong,ul,ol 等。

3. html 中的 label 可以用來幹什麼?

label 有兩種使用方式,一是巢狀,二是通過 id 繫結。它可以用於關聯繫結表單元件, 瀏覽器會將使用者對 label 關聯範圍的焦點轉移到繫結的表單元件上。

4. HTML 全域性屬性(global attribute)有哪些?

  • id: 元素 id,同一文件內 id 不能重複,具有唯一性。
  • dir: 設定元素文字方向。
  • lang: 使用的語言
  • style: 行內 css 樣式
  • class: 元素的樣式類名。
  • title: 元素的提示文字,滑鼠移到元素上時顯示的一段提示文字
  • data-*: 自定義元素屬性。html5 規範提供的 data- 格式來寫 html 元素的非標準屬性。
  • hidden: 是否顯示元素。
  • tabindex: 設定元素的tab鍵次序
  • dropzone: 設定元素拖放型別(copy, move, link)。
  • draggable: 設定元素是否可拖拽。
  • accesskey: 設定快捷鍵,通過快捷鍵可啟用相應操作。更多accesskey與快捷鍵
  • translate: 設定是否翻譯元素內容(瀏覽器相容性不好)。
  • spellcheck: 是否啟動拼寫和語法檢查。
  • contextmenu: 自定義滑鼠右鍵彈出選單內容。
  • contenteditable: 設定元素內容是否可編輯。更多contenteditable

5. HTML5 引入什麼新的表單屬性?

  • url:輸入 URL。
  • number:輸入數字。
  • email:輸入郵箱地址。
  • month:輸入年份或月份。
  • date:用於輸入(選擇)日期。
  • week:輸入年份以及該年的第n周。
  • datalist:一組
  • time:輸入時間(小時和分鐘,以及可選的秒)。
  • datetime:用於輸入日期和時間(小時、分鐘、秒和秒的小數)以及時區。
  • range:輸入範圍。允許使用者指定一個數值,該數值必須不小於給定值,並且不得大於另一個給定值。

6. img 上 title 與 alt

title 是在懸浮時展示的提示文字,alt 是在影象無法正常顯示時展示的提示文字, 此外 title 是許多 html 標籤都有的屬性,而 alt 是 img 標籤的特殊屬性。 當然在低版本ie瀏覽器中,滑鼠懸浮也會顯示alt的文字。

更多資訊-img的alt和title

7. 你的職業規劃是怎樣的?

這個問題,在印象裡面似乎 hr 問得比較多。實事求是回答完事, 例如會堅持技術路線,往資深架構方向走,也希望拓闊方向,向大前端靠近。

tips:講個笑話,跟著 JavaScript 走,當它一t天下的時候,也跟著...

8. 你印象最深刻的bug或技術難題是什麼?你怎麼解決的?

結合自身經歷,概括用到的知識技術點,以及解決思路。

9. 從瀏覽器輸入url到頁面響應結束,這個過程是怎樣的?js會阻塞文件渲染嗎?

  • 解析 url 的有效性和合法性;
  • 執行快取策略,策略內快取中有則從快取取並顯示;
  • 快取中沒有則傳送請求協議,DNS 解析域名,換取對映的 ip 地址;
  • 瀏覽器和伺服器進行TCP連線,進行三次握手;
  • 握手成功正式發起請求,攜帶請求包,請求獲取資源資料包;
  • 伺服器接受處理請求包,尋找資源資料,並將資源資料返回給瀏覽器(當然可能啥也沒有,也可能出錯);
  • 瀏覽器接收請求返回的資源資料,嘗試解析資料;
  • 瀏覽器解析返回的資源資料過程: 預設按照排序先後進行解析,載入 head 中的資源等等,例如 css 資源;

載入 script 指令碼資源;script 指令碼的執行只在預設的情況下是同步和阻塞的。 script 標籤可以有 defer 和 async 屬性(延遲和非同步),這可以改變指令碼的執行方式(在支援他們的瀏覽器)

繼續解析後面的標籤,文件內容

  • 瀏覽器渲染頁面,同時執行可能的非同步請求
  • 響應結束(可能正常顯示,也可能異常)

10. 關於 head 標籤?head 中必須的標籤是?

  • title 標籤用於定義文件的標題,它是 head 標籤中唯一必需的元素。

  • head 標籤用於定義文件的頭部。 充當頭部容器,script 指令碼,link 資源,mete 標籤。

  • 可用在 head 中的標籤:, <base>, <link>, <style>, <meta>, <script>, <noscript>, <command>。</p> </li> </ul> <h3>11. disabled 和 readonly 的區別?</h3> <p>readonly:元素的只讀屬性,可以防止使用者對值進行修改。 但使用者仍然可以使用 tab 鍵切換到該欄位,還可以選中或拷貝其文字。 在表單元件 input 中使用 readonly,內容會隨著表單提交。</p> <p>disabled:禁用屬性,使元素無法使用和無法操作,無法被選中。 在表單元件 input 中使用 disabled,內容不會再隨著表單提交。</p> <p>二者都可以通過 js 修改其值,從而恢復編輯狀態和被選中能力。</p> <h3>12. 常用的 meta 標籤有哪些?</h3> <p>```html</p> <!-- 搜尋引擎,用於禁止搜尋引擎索引本頁內容 谷歌、必應、雅虎都支援的 meta robots 標籤如下,他們會禁止搜尋引擎進行相應的操作: noindex:不索引本頁面。 nofollow:不跟蹤本頁面上的連結。 nosnippet:不在搜尋結果中顯示說明文字。 noarchive:不顯示快照。 noodp:不使用開放目錄中的標題和說明。 --> <p><meta name="robots" content="noindex,nofollow"/></p> <!-- 關鍵詞,填寫網頁關鍵詞,優化SEO的重要標籤 --> <p><meta name="keywords" content="請輸入網頁關鍵字,例如:程式設計師;寫程式碼;高薪;加班嚴重"/></p> <!-- 宣告優先使用的瀏覽器,例如下面是優先使用的是edge和chrome --> <p><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/></p> <!-- 網頁概述,優化SEO的重要標籤 --> <p><meta name="description" content="請輸入網頁概述,例如:知識社群,前端技術"/> ```</p> <p><a href="https://juejin.cn/post/7097368787170623496">更多內容</a></p> <h3>13. echarts 實現的背後利用了哪個 html 標籤?</h3> <p>利用的是 canvas 標籤。</p> <canvas>是一個可以使用指令碼(通常為JavaScript)來繪製圖形的 HTML 元素。 例如,它可以用於繪製圖表、製作圖片構圖或者製作簡單的(以及不那麼簡單的)動畫。 ### 14. 手寫一個年月日時分秒的函式 這是一道筆試題。要求寫一個獲取年月日時分秒的函式,返回的格式如下:2022-01-07 08:08:08 ```js /** * 要求返回的格式如下:2022-01-07 08:08:08 * @returns {string} */ function getDateTime () { let data = new Date(), year = data.getFullYear(), month = data.getMonth() + 1, day = data.getDate(), hour = data.getHours(), min = data.getMinutes(), second = data.getSeconds() // 當月、日、時、分、秒數字小於10時,補0。 if (month < 10) { month = '0' + month } if (day < 10) { day = '0' + day } if (hour < 10) { hour = '0' + hour } if (min < 10) { min = '0' + min } if (second < 10) { second = '0' + second } return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + second } ``` ### 15. TDK 是什麼?在前端優化 SEO,應該從哪些方面著手? ①TDK:title 標題標籤、description 描述標籤、keywords 關鍵詞標籤,這三個標籤的首字母合體。 ②SEO: - 合理使用 title、description、keywords: title 標題,description 描述,keywords 關鍵詞的搜尋影響權重是逐漸減小的。 title 和 description 的內容應能代表網頁內容,不能亂用不被普遍認可的詞彙, 不同頁面 title、description、keywords應不同, keywords 的關鍵詞,重要的靠前排放。 - 語義化的 HTML 程式碼:符合 W3C 規範,語義化程式碼讓搜尋引擎容易理解網頁。 - 少用 iframe:搜尋引擎不會抓取 iframe 中的內容。 - 網速:網站網速是搜尋引擎排序的一個重要指標 ### 16. html5 的新增元素有哪些? - rt HTML Ruby 文字 (<rt>) 元素包含字元的發音,字元在 ruby 註解中出現,它用於描述東亞字元的發音。這個元素始終在 ruby 元素中使用。 - nav。 HTML nav 元素表示頁面的一部分,其目的是在當前文件或其他文件中提供導航連結。導航部分的常見示例是選單,目錄和索引。 - bdi。 HTML 雙向隔離元素 ( bdi ) 告訴瀏覽器的雙向演算法將其包含的文字與周圍的文字隔離,當網站動態插入一些文字且不知道所插入文字的方向性時,此功能特別有用。 - main。 HTML main 元素呈現了文件的 body 或應用的主體部分。主體部分由與文件直接相關,或者擴充套件於文件的中心主題、應用的主要功能部分的內容組成。 - mark。 HTML 標記文字元素 ( Mark ) 表示為引用或符號目的而標記或突出顯示的文字,這是由於標記的段落在封閉上下文中的相關性或重要性造成的。 - meter。 HTML meter 元素用來顯示已知範圍的標量值或者分數值。 - aside。 HTML aside 元素表示一個和其餘頁面內容幾乎無關的部分,被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。其通常表現為側邊欄或者標註框(call-out boxes)。 - audio。 HTML audio 元素用於在文件中嵌入音訊內容。 - video。 HTML video 元素 用於在 HTML 或者 XHTML 文件中嵌入媒體播放器,用於支援文件內的視訊播放。你也可以將 video 標籤用於音訊內容,但是 audio 元素可能在使用者體驗上更合適。 - output。 HTML output 標籤表示計算或使用者操作的結果。 - canvas。 canvas 元素可被用來通過 JavaScript(Canvas API 或 WebGL API)繪製圖形及圖形動畫。 - header。 HTML header 元素用於展示介紹性內容,通常包含一組介紹性的或是輔助導航的實用元素。它可能包含一些標題元素,但也可能包含其他元素,比如 Logo、搜尋框、作者名稱,等等。 - footer。 HTML footer 元素表示最近一個章節內容或者根節點(sectioning root )元素的頁尾。一個頁尾通常包含該章節作者、版權資料或者與文件相關的連結等資訊。 - dialog。 HTML dialog 元素表示一個對話方塊或其他互動式元件,例如一個檢查器或者視窗。 - article。 HTML article 元素表示文件、頁面、應用或網站中的獨立結構,其意在成為可獨立分配的或可複用的結構,如在釋出中,它可能是論壇帖子、雜誌或新聞文章、部落格、使用者提交的評論、互動式元件,或者其他獨立的內容專案。 - section。 HTML section 元素表示一個包含在 HTML 文件中的獨立部分,它沒有更具體的語義元素來表示,一般來說會有包含一個標題。 - datalist。 HTML datalist 元素包含了一組option元素,這些元素表示其它表單控制元件可選值。 - progress。 HTML中的 progress 元素用來顯示一項任務的完成進度。雖然規範中沒有規定該元素具體如何顯示,瀏覽器開發商可以自己決定,但通常情況下,該元素都顯示為一個進度條形式。 ### 17. 看下這道題目都輸出了啥? 這是一道筆試題。 ```js for(let i=0;i<4;i++){ i++ console.log(i) // 列印了 1 和 3 } ``` ### 18. 介紹下重排(reflow)重繪(repaint),以及如何進行優化。 - 重排或迴流(reflow): 重排是在網路瀏覽器中執行的一個流程,用於重新計算文件中各元素的位置和幾何形狀,以便重新呈現該文件的部分內容或全部內容。 會改變文件佈局,會引發元素的位置、尺寸發生改變的行為可稱為重排。重排比起重繪,在視覺效果上會更明顯, 每當操作 DOM 樹、更改影響佈局的樣式、更改元素的 className 屬性或更改瀏覽器視窗大小時,都會發生重排現象。 - 重繪(repaint): 在不改變文件佈局的情況下,文件元素髮生的例如背景顏色等外觀改變的行為可稱為重繪。 根據 Opera 的說法,重繪的成本也很高,但在處理能力較高的現代裝置中,可能感覺不明顯。 [更多資訊](https://juejin.cn/post/7094778344306114590) ### 19. 列舉工作中常用的幾個 git 命令? ``` git rm 刪除工作區檔案,並將這次刪除放入暫存區 git add 增加指定檔案到暫存區 git init 新建初始化 git 程式碼庫 git status 顯示有變更的檔案 git branch 列出所有分支 git commit -m [message] 提交暫存區到倉庫區,可選填備註資訊 message git checkout -b [branch] 新建分支,並切換到該分支 ``` ### 20. BFC 產生的條件? - 根元素(<html>)天然就會建立 BFC,iframe 會建立一個 html,所以 iframe 也會天然建立 BFC。 - 浮動元素(float 值不為 none),float 的預設值是 none。 - 絕對定位元素(position 值為 absolute 或 fixed),position 的預設值是 static。 - 行內塊元素(display 值為 inline-block) - 表格單元格(display 值為 table-cell,HTML表格單元格預設值) - 表格標題(display 值為 table-caption,HTML表格標題預設值) - 匿名錶格單元格元素(display 值為 table、table-row、 table-row-group、table-header-group、 table-footer-group(分別是 HTML table、tr、tbody、thead、tfoot 的預設值)或 inline-table) - overflow 值不為 visible、clip 的塊元素。overflow 的預設值是 visible。 - display 值為 flow-root 的元素。flow-root 可以建立一個無副作用的 BFC,就像 html 根元素那樣。但需注意 flow-root 的相容性, 它是一個較新的屬性,IE 全系列不支援,Chrome58,Firefox53,Edge79開始支援。 - contain 值為 layout、content 或 paint 的元素 - 彈性元素(display 值為 flex 或 inline-flex 元素的直接子元素),如果它們本身既不是flex、grid也不是table容器 - 網格元素(display 值為 grid 或 inline-grid 元素的直接子元素),如果它們本身既不是flex、grid也不是table容器 - 多列容器(column-count 或 column-width 值不為 auto,包括column-count 為 1) - column-span 值為 all 的元素始終會建立一個新的 BFC,即使該元素沒有包裹在一個多列容器中。 [更多資訊-關於BFC](https://juejin.cn/post/7095168377009750023) ### 21. vue 中元件之間可以怎麼樣通訊。 - prop 和 $emit() 可以通過 prop 和 $emit() 通訊。在子元件通過 prop 接受父元件傳遞下來的資訊。 父元件可以根據約定的事件名,接受子元件通過 $emit(name,data) 向上派發的事件和傳遞的資訊。 - $refs 和 ref。ref 繫結,$refs 獲取元件例項,進而獲取元件的屬性、方法等資訊。 - Vuex,可以通過 vuex 進行資料互動,狀態管理。 - Bus (中央事件匯流排) ### 22. vue 指令中 v-for 和 v-if哪個優先順序更高 當它們處於同一節點,v-if 的優先順序比 v-for 更高,這意味著 v-if 將沒有許可權訪問 v-for 裡的變數。 ```html <!-- 這將丟擲一個錯誤,因為“todo” property 沒有在例項上定義 --> <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo.name }} </li> ``` ### 23. 你對 es6 的瞭解? es6 又稱 es2015,是 js 的標準,它包含了許多新的語言特性和庫,是比較大的一次升級。 新增了: - “class“ - “箭頭函式“ - “解構賦值“ - '字串模板“ - “async/await“ - “引入 module 模組“ - “generators(生成器)“ ### 24. 假如有10萬資料要處理,前端應該怎麼處理? 這題應該是想問虛擬列表,嘿,誰還不會點虛擬列表。 10萬資料同時渲染的假如太假了,不管啥技術都得是往【時空錯位】方向考慮吧? 認真的講,分頁獲取分頁渲染,也是一個樸素的好方法。初次和麵試官見面不好認真,還是虛擬列表吧。 - 虛擬列表 什麼是虛擬列表:只對可見區域進行渲染,對非可見區域中的資料不渲染或部分渲染,以實現減少消耗,提高使用者體驗的技術。 為啥要用虛擬列表:一是效能優,二是體驗絲滑。渲染生成過多的節點,可能會造成頁面卡頓,甚至卡死瀏覽器。 而常規分頁的展示效果可能不是想要的,尤其在移動端,使用者習慣和偏好,更傾向於上下滑動。 虛擬列表的實現思路: - 可視區域固定高度,設定縱向 Y 軸滾動 - 計算可顯示的列表項數量:根據可視區域和列表項高度(rowHeight),計算出可顯示的列表項的數目 limit - 當滾動條上滑時,計算出滾動的距離 scrollTop - 計算出當前起始索引:currentIndex = Math.floor(scrollTop/rowHeight) - 計算出最後可顯示的索引:endIndex = Math.min(currentIndex+limit, total-1) - 渲染可視區域:根據開始位置 startIndex 和 結束位置 endIndex 渲染可視區域 ### 25. git 與 svn 的區別在哪裡? - git 和 svn 最大的區別在於 git 是分散式的,而 svn 是集中式的。因此我們不能再離線的情況下使用 svn。 - git 分支上的變更不會影響其他人,svn 分支上的變更會影響到其他人。 - svn 的指令相對於 git 來說要簡單一些,比 git 更容易上手。 - svn 中的分支是整個版本庫複製的一份完整目錄,而 git 的分支是指標指向某次提交,因此 git 的分支建立開銷更小。 ### 26. 說一說深拷貝?你平時是怎麼實現深拷貝的? - 淺拷貝:就是將一個物件的記憶體地址的複製給另一個物件。 - 深拷貝:先新建一個空物件,記憶體中建立一個新的地址, 然後把被複制物件的所有可列舉的屬性方法一一複製過來。 - 實現深拷貝的方法 ①JSON.parse(JSON.stringify(data)),但對於 function 有缺陷。 ②Object.assign() 實現一層深拷貝。 ③解構賦值法實現一層拷貝 ④建立新物件 for 迴圈拷貝,有需要可結合遞迴。 大都數場景,還是 JSON.parse(JSON.stringify(data)) 實用, 有的人說有效能擔憂,但講真,每個位元組所到之處都涉及效能問題吧? ### 27. http 狀態碼的 301 表示啥意思?你知道的 http 狀態碼有哪些? - ①狀態碼的職責: 狀態碼的職責是當客戶端向伺服器端傳送請求時,描述返回的請求結果。藉助狀態碼,使用者可以知道伺服器端是正常處理請求,還是出現了錯誤。 - ②具體狀態碼的表示意思: ``` 204 No Content,表示請求處理成功,但沒有資源可返回。該狀態碼代表伺服器接收的請求已成功處理,但在返回的響應報文中不含實體的主體部分。另外,也不允許返回任何實體的主體。 206 Partial Content ,該狀態碼錶示客戶端進行了範圍請求,而伺服器成功執行了這部分的GET 請求。響應報文中包含由 Content-Range 指定範圍的實體內容。 301 Moved Permanently ,永久性重定向。該狀態碼錶示請求的資源已被分配了新的 URI,以後應使用資源現在所指的 URI。 302 Found ,臨時性重定向。該狀態碼錶示請求的資源已被分配了新的 URI,希望使用者(本次)能使用新的 URI 訪問。 303 See Other ,該狀態碼錶示由於請求對應的資源存在著另一個 URI,應使用 GET 方法定向獲取請求的資源。 304 Not Modified ,該狀態碼錶示客戶端傳送附帶條件的請求時,伺服器端允許請求訪問資源,但未滿足條件的情況。304 狀態碼返回時,不包含任何響應的主體部分。304 雖然被劃分在 3XX 類別中,但是和重定向沒有關係。(資源已找到,但不符合請求所附帶的新增。好像是說已經找到錢包,但你的請求附帶了一個錢包裡應有10k金額的條件,所以不好意思,無法把錢包返回給你。) 307 Temporary Redirect ,臨時重定向。該狀態碼與 302 Found 有著相同的含義。儘管 302 標準禁止 POST 變換成 GET,但實際使用時大家並不遵守。 400 Bad Request ,該狀態碼錶示請求報文中存在語法錯誤。當錯誤發生時,需修改請求的內容後再次傳送請求。另外,瀏覽器會像 200 OK 一樣對待該狀態碼。 401 Unauthorized ,該狀態碼錶示傳送的請求需要有通過 HTTP 認證(BASIC 認證、DIGEST 認證)的認證資訊。另外若之前已進行過 1 次請求,則表示使用者認證失敗。 403 Forbidden ,該狀態碼錶明對請求資源的訪問被伺服器拒絕了。伺服器端沒有必要給出拒絕的詳細理由,但如果想作說明的話,可以在實體的主體部分對原因進行描述,這樣就能讓使用者看到了。 未獲得檔案系統的訪問授權,訪問許可權出現某些問題(從未授權的傳送源 IP 地址試圖訪問)等列舉的情況都可能是發生 403 的原因。 404 Not Found,該狀態碼錶明伺服器上無法找到請求的資源。除此之外,也可以在伺服器端拒絕請求且不想說明理由時使用。 500 Internal Server Error,該狀態碼錶明伺服器端在執行請求時發生了錯誤。也有可能是 Web 應用存在的 bug 或某些臨時的故障。 503 Service Unavailable,該狀態碼錶明伺服器暫時處於超負載或正在進行停機維護,現在無法處理請求。如果事先得知解除以上狀況需要的時間,最好寫入RetryAfter 首部欄位再返回給客戶端。 ``` [更多資訊-《圖解HTTP》速讀筆記](https://juejin.cn/post/7081443593096790052) ### 28. 你對防抖和節流有了解嗎? 函式防抖動(debounce):防止在短時間內過於頻繁的執行相同的任務。 當短時間內的頻繁是不必要的時候,就可以考慮去抖動,避免資源浪費,或造成不好體驗。 函式防抖動的原理,主要是利用一次性定時器,延遲任務的執行,在延遲這段時間內, 如果任務再次被觸發,則通過 clearTimeout 銷燬上一次產生的定時器, 因為定時器的被銷燬,之前被延遲執行的任務也會隨之被取消執行。 這樣就實現了在一定時間內,只執行一次任務。這一次的執行通常是最後一次的觸發, 因為此前的觸發因為定時器的銷燬而被取消了。 多次觸發只執行最後一次或許就是和“節流”概念的區別?它兩在作用上挺像的,在具體實現上略有不同。 函式防抖(debounce)是短時間內連續多次觸發,但只執行最後一次,即是說將多次執行變成了只執行最後一次,執行次數減少。 而節流(throttle)是將短時間的多次執行,變成每隔一段時間執行一次。 更詳細的[函式防抖(debounce)](https://juejin.cn/post/7097610289633296397) ### 29. css 的相對單位有哪些?px 和 em 有什麼不同? - ① 14種相對單位 | 序號 | 單位 | 相對於 | | ------ | ------ | -------------------------------------------- | | 1 | `em` | 元素的字號,在 font-size 中使用是相對於父元素的字型大小,在其他屬性中使用是相對於自身的字型大小,如 width | | 2 | `ex` | 字型的X字高(x-height) | | 3 | `cap` | 字型 中 大 寫 的 標 稱 高度 | | 4 | `ch` | 數字“0”的寬度,元素字型中窄字形的平均字元前進,由“0”(零,U+0030)字形表示。| | 5 | `ic` | 元素字型中全寬字形的平均字元前進,由“水”(CJK 水象形文字,U+6C34)字形表示。 | | 6 | `rem` | 根元素的字型大小。 | | 7 | `lh` | 元素的行高line-height 。 | | 8 | `rlh` | 根元素的行高。 | | 9 | `vw` | 視口寬度的 1%。 | | 10 | `vh` | 視口高度的 1%。 | | 11 | `vi` | 根元素內聯軸上視口大小的 1%。 | | 12 | `vb` | 根元素塊軸上視口大小的 1%。 | | 13 | `vmin` | 視口較小尺寸的 1%。 | | 14 | `vmax` | 視口較大尺寸的 1%。 - ② px 和 em ``` px 是 css 中的絕對單位,也是web前端最為常見的單位,它表示畫素,他的值不會受其他元素或其他值的影響, 我們可以理解為10px所表示的意義,總是相同的。 em 是相對單位,相對於元素的字號,在 font-size 中使用是相對於父元素的字型大小, 在其他屬性中使用是相對於自身的字型大小,如 width。 相對單位的值的表示的大小,受其他東西的影響,比如1em,可能相當於10px的大小, 也可能相當於100px,甚至更高,因為em的實際表示大小是根據父元素而定, 1em表示的是父元素字型大小的一倍,要注意的是雖然只是受父元素的影響, 但父元素也會受它的父元素的影響。 ``` [更多資訊-好奇|CSS長度單位竟然有21種](https://juejin.cn/post/7089600655811149854) ### 30. 用過閉包嗎?你對閉包的認識是什麼? > Mozilla 上這樣解釋閉包:一個函式和對其周圍狀態(lexical environment,詞法環境) 的引用捆綁在一起(或者說函式被引用包圍),這樣的組合就是閉包(closure)。 我對閉包的理解:閉包就是函式內部嵌套了函式。閉包使得可以模擬私有項, 可以使得內部函式可以訪問外部函式的屬性。非必要不用閉包。 [更多資訊-學閉包(closure),應該注意什麼?](https://juejin.cn/post/7098856510033231885) ### 31. js 中的原型鏈是怎樣的? javaScript 物件有一個指向一個原型物件的鏈。當試圖訪問一個物件的屬性時,它不僅僅在該物件上搜尋, 還會搜尋該物件的原型,以及該物件的原型的原型, 依次層層向上搜尋,直到找到一個名字匹配的屬性或到達原型鏈的末尾。 這種依次層層向上搜尋中,遇到的每層的原型所組成的鏈條就是原型鏈。 下面通過一個示例來理解繼承與原型鏈 ```js // 使用語法結構建立的物件 let obj = { a: 'hello', fc: function () { return this.a + 1 } } // obj 這個物件繼承了 Object.prototype 上面的所有屬性 // obj 自身沒有名為 hasOwnProperty 的屬性 // hasOwnProperty 是 Object.prototype 的屬性 // 因此 obj 繼承了 Object.prototype 的 hasOwnProperty // Object.prototype 的原型為 null // 原型鏈如下: // obj ---> Object.prototype ---> null console.log(obj) console.log(obj.__proto__) console.log(obj.__proto__.__proto__) // null,這就是原型鏈的終點 let subObj = Object.create(obj); // 建立的 subObj 本身沒有自身的屬性,但它繼承有 obj 的屬性。 console.log(subObj.fc()); // 3,fc() 繼承自 obj // 那麼此時,我們就說 subObj 是一個繼承自 obj 的物件,因為繼承,obj 的一些屬性被傳遞給了 subObj, // 例如 fc() 就繼承自 obj // subObj 的原型鏈是 // subObj ---> obj ---> Object.prototype ---> null console.log(subObj) ``` 這是一張列印上面 obj 物件的原型鏈截圖, 列印結果也符合上面關於 obj 物件原型鏈的結論:obj ---> Object.prototype ---> null ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ed822784da84daa90e2c5fd01f0aa5e~tplv-k3u1fbpfcp-watermark.image?) 下面是一張列印 subObj 的原型連截圖: 列印結果也符合上面關於 subObj 物件原型鏈的結論:subObj ---> obj ---> Object.prototype ---> null ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0216ec005e434d499b9bbb18a59f1a5a~tplv-k3u1fbpfcp-watermark.image?) [更多資訊-面不面試都要會的繼承與原型鏈:原型鏈的盡頭是null?](https://juejin.cn/post/7099460734924357645) ### 32. display:none 與 visibility:hidden 的區別是什麼? display: 隱藏元素,不會佔據該元素原來的空間。視覺上相對於該元素被移除了,不佔有空間位置。 設定 display:none後,元素的寬高等屬性會”失效“ visibility: 隱藏元素,仍然佔據該元素原來的空間。可能會呈現一部分空白區域。 設定 visibility:hidden 後,然佔據空間位置,視覺上相當於完全透明。 ### 33. 改變盒子模型的 css 屬性啥?介紹下盒子模型 ①通過 box-sizing 來改變盒子模型,它有兩個選項 border-box 和 content-box。 ②盒模型:分為內容(content)、填充(padding)、邊界(margin)、邊框(border)四個部分 ③與 css 盒模型有關的一個值得注意屬性是 box-sizing。通常 box-sizing 的預設值是 content-box, 而他還有另一個值 border-box。content-box 中,屬性 width,height 只包含內容content, 不包含 border 和 padding。border-box 中,屬性 width,height 則包含 content、border和padding。 **有關計算公式** ``` /** content-box 的寬高計算 **/ box-sizing:content-box width = width; height = height ``` ``` /** border-box 的寬高計算 **/ box-sizing:border-box width = width + padding + border; height = height + padding + border ``` [更多資訊-box-sizing是幹啥的?css盒模型與border-sizing在響應式佈局的妙用](https://juejin.cn/post/7082941403881291783) ### 34. 頁面引入樣式時,使用 @import 和 link 的區別有了解嗎? ①來源區別。@import 是 css 的語法,而 link 是 html 的標籤。 ②載入區別。在載入的時候,@import 引用的 CSS 會在頁面載入完成後才會載入 @import 引入的 CSS 樣式表, 而 link 是在頁面載入的同時被載入。 ③權重區別。可比較環境下,@import 引用的樣式,權重小於 link 引入的樣式。 ④相容區別。相容性上,link 幾乎所有瀏覽器的支援,例如 ie、Firefox、chrome、safari、opera 全版本支援。 而 @import 是 ie 5.5 開始支援。 ### 35. 什麼是外邊距摺疊(margin collapsing)?發生摺疊會怎樣? ①塊的上外邊距(margin-top)和下外邊距(margin-bottom)有時合併(摺疊)為單個邊距, 其大小為單個邊距的最大值(或如果它們相等,則僅為其中一個),這種行為稱為**外邊距摺疊**。 ②外邊距摺疊(也被翻譯為重疊或塌陷)有關的計算:摺疊後其大小為單個邊距的最大值(或如果它們相等,則僅為其中一個)。 > tips:這裡說的單個邊距的最大值,不是指數學比較上的最大,而是指單個邊距距離範圍的大小。 - 同正或同負:選絕對值最大的。 比如 -50px 和 -70px 發生摺疊,那麼摺疊後的值是 70px,因為 -70 的絕對值最大嘛,要是 -50px 和 -50px, 當然此時絕對值最大也是 50px 嘛,所以你只有一個選擇 50px。 比如 50px 和 70px 發生摺疊,那麼摺疊後的值是 70px,因為 70 的絕對值最大嘛, 要是 50px 和 50px,當然也選絕對值最大的 50px。 - 有正有負:最大的正邊距與最小的負邊距的和。 例如 70px、-50px、20px 發生摺疊,那麼邊界範圍就是 70px + (-50px)= 20px。 [更多資訊-複習|外邊距摺疊(塌陷)這事](https://juejin.cn/post/7093694318090649614) ### 36. 怎麼區分偽類偽元素?常見的偽類偽元素有哪些? - 區別: ①css3 以後,為了區分偽類和為元素,規範偽類使用單冒號,偽元素使用雙冒號表示。 (但css2 的偽元素單冒號的寫法,仍被許多現代瀏覽器相容支援) ②偽類會給頁面中已經存在的元素新增一個類(class),偽元素則是添加了一個頁面中沒有的元素(element), 但需注意這個被新增的元素不會新增到文件樹中,只是一種視覺效果。 - 常見的偽類偽元素 常見偽元素 - ::after (:after) - ::before (:before) - ::cue (:cue) - ::first-letter (:first-letter) - ::first-line (:first-line) - ::selection - ::slotted() - ::spelling-error 常見偽類 - :active - :disabled - :first - :first-child - :first-of-type - :hover - :not() - :required [更多資訊-收藏版|70+超全的偽類偽元素集合](https://juejin.cn/post/7096638947610066975) ### 37. 用過媒體查詢 @media 嗎? 來自 Mozilla 的關於 @media 的解釋: > @media CSS 規則可用於基於一個或多個媒體查詢的結果來應用樣式表的一部分。 使用它,您可以指定一個媒體查詢和一個CSS塊,當且僅當該媒體查詢與正在使用其內容 的裝置匹配時,該CSS塊才能應用於該文件。 > > 媒體查詢(Media queries)非常實用,尤其是當你想要根據裝置的大致型別(如列印裝置與帶螢幕的裝置) > 或者特定的特徵和裝置引數(例如螢幕解析度和瀏覽器視窗寬度)來修改網站或應用程式時。 我對 @media 的理解: > 因為現實中存在許多不同的裝置,不同的裝置可能解析度不同,可能螢幕可見區域也不同。 為了能讓同一份網頁在不同的裝置中,表現的更友好,適配程度更高,於是 css3 設計了 @media。 > > 使得無需修改內容便可以使樣式應用於某些特定的裝置範圍。 例如為印表機、智慧手機、閱讀器、電腦等不同裝置,編寫不同的樣式表, 通過 @media 識別適配應用對應的樣式表。 > > @media 可以針對不同的螢幕尺寸設定不同的樣式,這在設計響應式的頁面會非常有用。 > 例如,媒體查詢可以縮小小型裝置上的字型大小,在縱向模式下檢視頁面時增加段落之間的填充, > 或者增加觸控式螢幕上按鈕的大小,甚至改變佈局方式。 > > 當媒體查詢返回為真時,對應的樣式表會按照正常的規則被應用生效; > 當媒體查詢返回為假時,以 link 標籤上帶有媒體查詢的樣式表為例,對應的樣式表不會被應用,但仍會被下載。 用法示例: ```css /* 可以放在 style 的頂部,或其他位置 */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* 巢狀在一組 css 規則中 */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } ``` [更多資訊-面試|用過媒體查詢@media嗎?](https://juejin.cn/post/7097213453768589320) ### 38. 在 HTML5 中,哪個方法用於獲得使用者的當前位置? 這是一道筆試選擇題,其他選項不記得了。 navigator.geolocation.getCurrentPosition() 下面是一個使用示例: ```js getGeolocation(){ if ('geolocation' in navigator) { /* 地理位置服務可用 */ console.log('地理位置服務可用') navigator.geolocation.getCurrentPosition(function (position) { console.dir('回撥成功') console.dir(position) // 沒有輸出 console.dir(position.coords.latitude, position.coords.longitude) }, function (error) { console.error(error) }) } else { /* 地理位置服務不可用 */ console.error('地理位置服務可用') } } ``` ### 39. css 中如何引入特殊的外部字型? @font-face 的 CSS 規則 ,它允許網頁開發者為其網頁指定線上字型或載入指定的本地字型。 下面是一個示例 ```css @font-face { /* 字型名稱,可自定義,就像定義一個class名稱一樣。*/ font-family: 'hdjx'; /* 字型檔案的路徑,除了 url()載入字型,也可以通過 local() 載入本地字型 */ src: url('./HDJXYT.ttf'); /* 字重,就像在普通css中使用它一樣,可以選擇bold等值 */ font-weight: normal; /* 字重 */ /* 字型樣式 */ font-style: normal; /* 字型樣式 */ } ``` [更多資訊-探究|客戶端表現一致的關鍵:@font-face](https://juejin.cn/post/7088096855308894221) ### 40. 可以怎樣解決 https 頁面訪問 http 資源報錯? 在使用 https 的訪問頁面中,引入 http 資源會被瀏覽器報警告,不同瀏覽器警告資訊可能展現形式不同。 - 協議相對URl(protocol-relative URL)。 為了解決這個問題,我們可以省略 URL 的協議宣告,省略後瀏覽器照樣可以正常引用相應的資源, 這項解決方案稱為 protocol-relative URL。 協議相對URl,是指在編寫URL時不攜帶具體的協議型別,URL被訪問執行時,根絕一定規則自動使用相對的協議型別。 例如,當人們通過https瀏覽頁面時候,那麼不寫明具體協議型別的的圖片資源URL,就會以https協議訪問圖片資源; 使用http瀏覽頁面時,使用相對協議URL的資源就會以http請求資源。 使用相對協議URL,可能會是一個好的選擇。因為使用相對協議URL,在用http或https瀏覽頁面時, 瀏覽器都會以相同的協議請求對應的資源,這能較好地避免瀏覽器關於使用混合協議的警告。 在SSL證書是後面使用的場景中,資源URL也不用更換,意思是說儲存起來的資源地址(例如圖片地址), 可以不是絕對地址,可以不攜帶協議型別,甚至連域名都不帶也是一種具有可行的方案。 [更多資訊-https頁面無法訪問http資源?protocol-relative URL(協議相對URl)](https://juejin.cn/post/7083268210014814239) - 其他辦法 ### 41. 什麼是 FOUC? 如何避免? - 什麼是 FOUC? FOUC(文件樣式短暫失效(Flash of Unstyled Content)),主要指的是樣式閃爍的問題, 由於瀏覽器渲染機制(比如firefox),在 CSS 載入之前,先呈現了 HTML, 就會導致展示出無樣式內容,然後樣式突然呈現的現象。會出現這個問題的原因主要是 css 載入時間過長, 或者 css 被放在了文件底部。 - FOUC優化建議 ①減少使用@import匯入樣式表。 ②不在文件尾部引入樣式。 ③儘量使用link標籤在head中引入。(當然link標籤是一個只能在head中使用的標籤,因此使用link必然是在head中的) [更多資訊-FOUC是啥?FOUC和首屏白屏問題](https://juejin.cn/post/7083681659584774181) ### 42. CSS 樣式選擇器有哪些?優先順序是怎樣計算的? **11 種樣式選擇器** - 萬用字元選擇器,* 是萬用字元,表示其下的樣式對所有元素生效,但萬用字元的優先順序較低。 - id選擇器,例如 #container - 類選擇器,例如 .box - 標籤選擇器(型別選擇器),例如 div span p 等元素標籤,直接以標籤名稱作為樣式選擇器 - 後代選擇器,有層級關係的疊加樣式選擇器,是樣式選擇器的一種組合使用,例如 div p - 子選擇器,例如 ul>li 或 div>p,對 ul 直接的子元素 li 設定樣式,對 div 的直接子元素 p 設定樣式。 - 偽類選擇器,例如 a:hover,當滑鼠懸浮於 a 標籤時的樣式。 - 偽元素選擇器,例如常見的 ::before 和 ::after,單冒號寫法也被現代瀏覽器支援(那是css2的語法)。 - 相鄰兄弟選擇器,例如 img + p,樣式將對 img 圖片後面緊跟著的 p 段落生效。 - 兄弟選擇器,A~B 作用於 A 元素之後所有同層級 B 元素。 - 屬性選擇器,通過已經存在的屬性名或屬性值匹配元素,例如 a[href="https://example.org"] 或 a[title]。 **優先順序是如何計算的?** 當同一個元素有多個宣告的時候,優先順序才會有意義。因為每一個直接作用於元素的 CSS 規則總是會接管/覆蓋(take over)該元素從祖先元素繼承而來的規則。 下面列表中,選擇器型別的優先順序是遞增的: - 1.型別選擇器(標籤選擇器)(例如,h1)和偽元素(例如,::before) - 2.類選擇器 (例如,.example),屬性選擇器(例如,[type="radio"])和偽類(例如,:hover) - 3.ID 選擇器(例如,#example)。 - 巢狀組合選擇器 多種選擇器巢狀組合的優先順序,往往比單一的樣式選擇器優先順序更高。 例如 #id > div > p{} 的優先順序會比 p{} 和 div > p{} 的優先順序更高。 - 內聯樣式 給元素新增的內聯樣式 (例如,style="font-weight:bold") 幾乎總會覆蓋外部樣式表的任何樣式 , 因此可看作是具有更高的優先順序。 - !important 當在一個樣式宣告中使用一個 !important 規則時,此宣告將覆蓋任何其他宣告。 當然 !important 可以覆蓋 !important,此時需要比較權重。 - 具體的優先順序權重規則略顯複雜: 一個選擇器的優先順序可以說是由四個部分相加 (分量),可以認為是個十百千 — 四位數的四個位數: 千位: 如果宣告在 style 的屬性(內聯樣式)則該位得一分。這樣的宣告沒有選擇器,所以它得分總是1000。 百位: 選擇器中包含ID選擇器則該位得一分。 十位: 選擇器中包含類選擇器、屬性選擇器或者偽類則該位得一分。 個位:選擇器中包含元素、偽元素選擇器則該位得一分。 下面是一個示例表: | 選擇器 | 千位 | 百位 | 十位 | 個位 | 優先順序 | |-----------------------------------------|-----|------|-----|------|------| | h1 | 0 | 0 | 0 | 1 | 0001 | | h1 + p::first-letter | 0 | 0 | 0 | 3 | 0003 | | li > a[href*="en-US"] > .inline-warning | 0 | 0 | 2 | 2 | 0022 | | #identifier | 0 | 1 | 0 | 0 | 0100 | | 內聯樣式 | 1 | 0 | 0 | 0 | 1000 | > tips:可比條件下,寫在後面優先順序高於寫在前面的 > > tips:可比條件下,同為載入樣式,後面載入的優先順序更高。 [更多資訊-11種樣式選擇器與樣式優先順序計算](https://juejin.cn/post/7101090617488310308) ### 43. var、let 和 const的認識? var 關鍵字用於宣告全域性變數,存在”變數提升“現象,不會丟擲異常,預設值會被設定為 undefined。 “變數提升”的存在,使得變數像是宣告提前,宣告語句被移動到環境的頂部似得。 let 和 const 是 es6 新增的關鍵字,用於宣告區域性變數。 const 用於宣告常量,它宣告的變數只讀不可被修改。 let 宣告的區域性變數可以被修改。 在 ECMAScript 6 中,let 和 const 同樣會被提升變數到程式碼塊的頂部但是不會被賦予初始值。 在變數宣告之前引用這個變數, 將丟擲引用錯誤(ReferenceError)。 這個變數將從程式碼塊一開始的時候就處在一個“暫時性死區”,直到這個變數被宣告為止。 [更多資訊-變數提升與函式提升](https://juejin.cn/post/7100543464123105287) ### 44. 你是怎麼處理多文字溢位省略截斷的? - vue 環境的推薦指令版做法:[瀏覽器相容性強的單行多行文字溢位截斷省略方案](https://juejin.cn/post/7082136637055959054) - 常規做法一:純 css 樣式 ```html /** 單行的處理 **/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /** 多行的處理,不相容 ie **/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /** 最多顯示幾行 **/ overflow: hidden; ``` - 常規做法二:擷取一定長度的字元 擷取固定字元數的方式,例如擷取120字,超出部分使用省略號替代,不超出則不擷取。 這種方式相比方案一,相容性更好,也有兩個缺點: 一是排版效果不夠美觀,因為英文和數字的單字元佔的實際寬度要比中文小, 這會產生省略號可能在行中間甚至行首,而不是統一的在行位。 二是對html字串不友好,有時介面返回的會是包含html程式碼的字串, 擷取可能會破壞html字串的程式碼結構,例如一個標籤被擷取部分。 ### 45. css 屬性中 height 可以被繼承嗎?還有哪些屬性可以繼承?哪些不可以繼承? ①height 不會被繼承。 ②可繼承與不可繼承的樣式小結 可繼承: - ul - li - dl - dd - dt - color - font-size - font-family 不可繼承 : - width - border - margin - height - padding ③控制繼承 CSS 為控制繼承提供了四個特殊的通用屬性值。每個css屬性都接收這些值。 這意味著,就像 css 盒子模型可以通過改變 box-sizing 的值 (border-box 和 content-box)來改變。 css 屬性的繼承情況也是可以控制的,例如通過設定值 inherit、initial、unset 和 revert 來控制。 ``` inherit:設定該屬性會使子元素屬性和父元素相同。實際上,就是 "開啟繼承". initial:設定屬性值和瀏覽器預設樣式相同。如果瀏覽器預設樣式中未設定且該屬性是自然繼承的,那麼會設定為 inherit。 unset:將屬性重置為自然值,也就是如果屬性是自然繼承那麼就是 inherit,否則和 initial一樣。 revert:目前僅被很少瀏覽器支援。 ``` ④重設幾乎所有屬性值 CSS 的 shorthand 屬性 all 可以用於同時將這些繼承值中的一個應用於(幾乎)所有屬性。 它的值可以是其中任意一個(inherit, initial, unset, or revert)。 這是一種撤銷對樣式所做更改的簡便方法,以便回到之前已知的起點。 例如像下面這樣:例子中有兩個 div,第一個 div 應用了樣式選擇器 div 的樣式, 第二個通過 類選擇器 unset-all 設定 all 為 unset,重置了幾乎所有樣式。 ```html <div> <p>這是一段文字</p> </div> <div class="unset-all"> <p>這是另一段文字,它將被充值樣式</p> </div> ``` ```css div { background-color: red; border: 2px solid green; } .unset-all { all: unset; } ``` 下面是一張效果圖 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2465cfa69194748b1e383504a3eb48f~tplv-k3u1fbpfcp-watermark.image?) ### 46. 使用純 div + css 佈局有啥好處? 這是一道筆試題,也許是不好意思當面問出來? ①相容性更好,因為純 div + css 的佈局設計,會被幾乎所有瀏覽器支援,且效果表現一致性高。 ②裝置擴充套件性較好,尤其是在不同的裝置上,例如 PowerPoint,手機瀏覽器,其他終端裝置等。 ③靈活性較高... ④更有利於搜尋引擎SEO? ### 47. css 樣式的匹配順序是從左到右嗎? 不是。 瀏覽器會從最右邊的樣式選擇器開始,依次向左匹配。最右邊的選擇器相當於關鍵選擇器(key selector), 瀏覽器會根據關鍵選擇器從 dom 中篩選出對應的元素,然後再向上遍歷相關的父元素,判斷是否匹配。 所以組合巢狀選擇器時,匹配語句越短越簡單,瀏覽器消耗的時間越短, 同時也應該減少像標籤選擇器,這樣的大範圍命中的通配選擇器出現在組合巢狀選擇器鏈中, 因為那樣會讓瀏覽器做大量的篩選,從而去判斷選出匹配的元素。 ### 48. css 的 position 有哪些值?它們表示什麼? - fixed:固定定位 元素會被移出正常文件流,並不為元素預留空間,而是通過指定元素相對於螢幕視口(viewport)的位置來指定元素位置。 元素的位置在螢幕滾動時不會改變。 (一種有趣的劃分,fixed 和 absolute 所作用的元素一樣,被劃為絕對定位元素(absolutely positioned element)) - absolute:絕對定位 元素會被移出正常文件流,並不為元素預留空間,通過指定元素相對於最近的非 static 定位祖先元素的偏移, 來確定元素位置。絕對定位的元素可以設定外邊距(margins), 且不會與其他邊距合併即不會發生外邊距摺疊(margin collapsing)。 - relative:相對定位 該關鍵字下,元素先放置在未新增定位時的位置,再在不改變頁面佈局的前提下調整元素位置 (因此會在此元素未新增定位時所在位置留下空白)。 position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。 - static:粘性定位 該關鍵字指定元素使用正常的佈局行為,即元素在文件常規流中當前的佈局位置。 此時 top, right, bottom, left 和 z-index 屬性無效。 ### 49. vue-router 路由的兩種模式 - hash 模式 > 來自 Vue Router 官網 > > hash 模式是用 createWebHashHistory() 建立的,它在內部傳遞的實際 URL 之前使用了一個雜湊字元(#)。 > 由於這部分 URL 從未被髮送到伺服器,所以它不需要在伺服器層面上進行任何特殊處理。 > 不過,它在 SEO 中確實有不好的影響。如果你擔心這個問題,可以使用 HTML5 模式。 - history 模式 > 來自 Vue Router 官網 > > 當使用這種歷史模式時,URL 會看起來很 "正常",例如 https://example.com/user/id。漂亮! > > 不過,問題來了。由於我們的應用是一個單頁的客戶端應用,如果沒有適當的伺服器配置, > 使用者在瀏覽器中直接訪問 https://example.com/user/id,就會得到一個 404 錯誤。這就醜了。 > 不用擔心:要解決這個問題,你需要做的就是在你的伺服器上新增一個簡單的回退路由。 > 如果 URL 不匹配任何靜態資源,它應提供與你的應用程式中的 index.html 相同的頁面。漂亮依舊! ### 50. html、css 和 js 的註釋方式? 這是一道簡單的基礎筆試題。 js:// 單行註釋,/* 多行註釋 */ html:<!- -" 註釋內容"- -> css:/* 註釋內容 */ ,在一些 css 預處理語言環境中,// 也有註釋效果 ### 51. vue.js 的兩個核心是什麼? 資料驅動和元件化思想 - 資料驅動 資料驅動是vuejs的核心思想之一,有人稱其為vuejs最大的特點。所謂資料驅動就是指資料狀態變化時, 自主得去更新與其有依賴的檢視。資料驅動的關鍵在於驅動,這裡的驅動是自主的, 生活中有一個詞叫做自動化,我簡單的認為資料驅動思想,是自動化思想在前端程式設計自動化上的一種應用, 資料驅動是將對dom的手動操作,自動化了,它根據資料狀態的變化,自動更新操作檢視。 使用過jQuery的同學應該有體會,資料驅動帶來的“自動化”,其實省去了許多操作dom的工作,維護也更加方便。 我對資料驅動的定義,簡單總結為以下三點: ①資料驅動是指根據資料狀態變化,自主更新檢視。 ②資料驅動是自動化思想,在前端程式設計自動化上的應用。 ③資料驅動使得操作dom,從手動操作,變成了自動操作,是一種自動化表現。 - 元件化 vue元件是一種拓展HTML元素,將要展示的內容分成相對獨立的拓展HTML元素, 即分成不同元件的過程,或在設計構建檢視的編碼時,將相對獨立的可視區域, 以獨立元件的形式構建的過程,就是元件化。 元件化的優點: 每一個元件,可以對一個viewModel(簡寫vm,可以是vue例項)。檢視頁面是元件的容器, 元件化之後,我們可以任意根據需求自由巢狀組合元件,最後形成一個個完整頁面。 元件具有高內聚低耦合的特性,那麼複用性更好,維護成本更低,提高開發效率,這些優點就呼之欲出了。 [更多資訊-Vue原始碼解讀:01核心思想篇](https://juejin.cn/post/7081433027737288711) ### 52. vue 的雙向資料繫結的原理 Vue2 實現雙向資料繫結,object 型別資料是通過 Object 的 defineProperty() 實現的, array 型別資料,是通過攔截重寫陣列的 7 個可操作且會改變陣列自身的方法實現的。 Vue3 則是利用了 Proxy 代替了 Object.defineProperty 和 重寫陣列。 [更多資訊-Vue原始碼解讀:02變化偵測篇](https://juejin.cn/post/7081433858255618078) ### 53. 談談 vue 例項的生命週期,生命週期鉤子都有哪些? > tips:vue2 從官網的生命週期圖和原始碼看,可以大致將vue的生命週期分為4個階段,分別是初始化階段,模板編譯階段,掛載階段,銷燬階段。 初始化階段:為vue例項初始化屬性、事件、資料觀測等。 模板編譯階段:將模板字串編譯成渲染函式。(該階段在runtime版本中不存在,因為已經編譯好了。) 掛載階段:將vue例項掛載到指定dom上,即將模板渲染到真實dom中。 銷燬階段:解綁指令,移除事件監聽器,銷燬子例項。 與vue生命週期密切相關的鉤子函式有beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。 vue的api文件上,一共有11個和生命週期有關的鉤子函式,另外三個分別是activated,deactivated,最後一個是vue2.5.0新增的,叫errorCaptured。 [更多資訊-Vue原始碼解讀:05生命週期篇](https://juejin.cn/editor/drafts/7057786200492343303) ### 54. 請問 v-if 和 v-show 有什麼區別? v-show 是通過改變 css display 屬性值實現切換效果, v-if 則是通過直接銷燬或建立 dom 元素來達到顯示和隱藏的效果。 v-if是真正的條件渲染,當一開始的值為true時才會編譯渲染,而v-show不管怎樣都會編譯,只是簡單地css屬性切換。 v-if適合條件不經常改變的場景,因為它的切換會重新編譯渲染,會建立或銷燬 dom 節點,開銷較大。 v-show適合切換較為頻繁的場景,開銷較小。 ### 55. 你對 vue 中 computed 和 watch 瞭解? computed 是計算屬性,對於任何複雜邏輯,你都應當使用計算屬性,這就是它的應用場景,雖然通過 methods 或 watch 也能完成, 但是 computed 在處理複雜邏輯時更有優勢:計算屬性是基於它們的響應式依賴進行快取的。 watch 是偵聽屬性,雖然計算屬性在大多數情況下更合適,但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過 watch 選項提供了一個更通用的方法, 來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時,這個方式是最有用的。 Vue 提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動:偵聽屬性。當你有一些資料需要隨著其它資料變動而變動時, 你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而,通常更好的做法是使用計算屬性而不是命令式的 watch 回撥。 ### 56. vue 指令的常用修飾符有哪些? - v-model 的修飾符 ``` .lazy - 取代 input 監聽 change 事件 .number - 輸入字串轉為有效的數字 .trim - 輸入首尾空格過濾 ``` - v-on 的修飾符 ``` .stop - 呼叫 event.stopPropagation()。 .prevent - 呼叫 event.preventDefault()。 .capture - 新增事件偵聽器時使用 capture 模式。 .self - 只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥。 .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥。 .native - 監聽元件根元素的原生事件。 .once - 只觸發一次回撥。 .left - (2.2.0) 只當點選滑鼠左鍵時觸發。 .right - (2.2.0) 只當點選滑鼠右鍵時觸發。 .middle - (2.2.0) 只當點選滑鼠中鍵時觸發。 .passive - (2.3.0) 以 { passive: true } 模式新增偵聽器 ``` - v-bind 的修飾符 ``` .prop - 作為一個 DOM property 繫結而不是作為 attribute 繫結。(差別在哪裡?) .camel - (2.1.0+) 將 kebab-case attribute 名轉換為 camelCase。(從 2.1.0 開始支援) .sync (2.3.0+) 語法糖,會擴充套件成一個更新父元件繫結值的 v-on 偵聽器。 ``` ### 57. 移動端混合開發中的 webview 中,h5 和 原生(IOS 或 安卓)是如何通訊的? 主要是利用 window 這個全域性物件,在上面註冊全域性方法(函式),並監聽來實現的,當然安卓和iOS略有不同。 下面是一個 h5 通知原生支付,並接受原生支付結果回撥的示例。 ```js // 通知原生髮起支付 function notifyPay(payType, data) { const params = JSON.stringify(data); window.acceptPayInfo = function (payResult) {//接收原生支付結果 if (payResult) { store.commit("setPayResult", JSON.parse(payResult)); localStorage.setItem('setPayResult', JSON.parse(payResult)); Toast.clear(); Toast('支付結果:' + payResult) } }; //安卓 if (window.PKAndroid) { //支付寶 if (payType === 1) { window.PKAndroid.alipay(params); return } //微信 window.PKAndroid.wxpay(params); return } //ios if (window.webkit) { //支付寶 if (payType === 1) { window.webkit.messageHandlers.alipay.postMessage(params); return } //微信 window.webkit.messageHandlers.wxpay.postMessage(params) } } ``` ### 58. 說一下 vue 中 key 的作用? key 的特殊 attribute 主要作用在於給節點做唯一標識,以便高效的更新虛擬 DOM。 在新舊 nodes 對比時辨識 VNodes。如果不使用 key,Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試就地修改/複用相同型別元素的演算法。 而使用 key 時,它會基於 key 的變化重新排列元素順序,並且會移除 key 不存在的元素。 有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。 ### 59. Vue2中,vue 的父元件的 mounted 和 子元件中的 mounted,哪個先執行?created呢? 父子元件中幾個鉤子的執行順序。父元件是子元件的容器,從這角度理解,那麼應當是父元件先建立,然後才能容納子元件建立。 而掛載渲染,子元件作為父元件一部分,父元件的掛載渲染完成,應當以子元件為前提。(特例除外) 所以 子mounted 先於父mounted執行,父created 先於 子created執行。 ``` 載入渲染: 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 子元件更新: 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 父元件更新: 父beforeUpdate -> 父updated 銷燬: 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed ``` [更多資訊-Vue原始碼解讀:05生命週期篇](https://juejin.cn/post/7081436617788882975) ### 60. vue 幾個內建屬性的執行順序,data 先還是 methods 先? 幾個內建屬性的執行順序依次是 props,methods,data ,computed,watch。 [更多資訊-Vue原始碼解讀:05生命週期篇](https://juejin.cn/post/7081436617788882975) ### 61. 介紹下 vue 中的 keep-alive 'keep-alive' 用於快取不活動的元件例項。 '<keep-alive>' 包裹動態元件時,會快取不活動的元件例項,而不是銷燬它們。和 '<transition>' 相似,'<keep-alive>' 是一個抽象元件: 它自身不會渲染一個 DOM 元素,也不會出現在元件的父元件鏈中。 當元件在 '<keep-alive>' 內被切換,它的 'activated' 和 'deactivated' 這兩個生命週期鉤子函式將會被對應執行。 ### 62. $router 和 $route 有什麼不同? $router 是包括了路由的鉤子函式和跳轉方法等的路由例項物件,常用於跳轉,例如一個攜帶引數的跳轉: ```js this.$router.push({name: 'detail', query: { id: "12306" }}) ``` $route 可用於獲取 $router.push 攜帶過來的引數,是路由資訊物件,包括 name,query,params 等路由資訊。例如下面這樣使用: ```js this.id = this.$route.query.id; ``` ### 63. css 怎樣穿透樣式?穿透符能穿透修改 vue #app 節點外元素的樣式嗎? - 1. ::v-deep vue3.0 開始,可使用 ::v-deep 替代 /deep/ ``` <style lang="scss" scoped> ::v-deep .el-input { width: 120px; } </style> ``` - 2. /deep/ vue2 中可使用 /deep/ 穿透樣式 ``` <style lang="scss" scoped> /deep/ .el-input { width: 120px; } </style> ``` -3. >>> 僅對 css 有效,對於 css 預處理語言,例如 scss、less 不生效。 對於 vue 中 div#app 節點外的元素樣式,如果 '<style>' 加上了 scoped,那麼此時樣式穿透符是不能穿透修改 div#app 節點外的元素樣式的。 這是因為 scoped 的作用域僅侷限在 div#app 容器內部,所以此時只能修改 div#app 容器內的樣式。 例如 el 元件的下拉選的彈出層是 div#app 的兄弟元素,body的子元素,在 '<style lang="scss" scoped>' 中使用樣式穿透符修改該彈出層的樣式是無效的。 ### 64. vue-router 全域性的 afterEach 守衛鉤子先執行,還是元件內的 beforeRouteEnter 鉤子先執行? 全域性後置守衛鉤子先執行,元件內的 beforeRouteEnter 鉤子後執行。 ``` 完整的導航解析流程(來自 vue-router 官網) 1.導航被觸發。 2.在失活的元件裡呼叫 beforeRouteLeave 守衛。 3.呼叫全域性的 beforeEach 守衛。 4.在重用的元件裡呼叫 beforeRouteUpdate 守衛(2.2+)。 5.在路由配置裡呼叫 beforeEnter。 6.解析非同步路由元件。 7.在被啟用的元件裡呼叫 beforeRouteEnter。 8.呼叫全域性的 beforeResolve 守衛(2.5+)。 9.導航被確認。 10.呼叫全域性的 afterEach 鉤子。 11.觸發 DOM 更新。 12.呼叫 beforeRouteEnter 守衛中傳給 next 的回撥函式,建立好的元件例項會作為回撥函式的引數傳入。 ``` ### 65. 清除浮動的方式 ①使用clear屬性清除浮動。 ②建立BFC環境,利用BFC的特性,BFC具有排除外部浮動和包含內部浮動的特性。 [更多資訊-關於BFC](https://juejin.cn/post/7095168377009750023) ### 66. 典型的可替換元素有哪些? html 規範上說可以被視為替換元素的有:audio, canvas, embed, iframe, img, input, object, 和video。 developer.mozilla 上列明的典型的可替換元素只有下面幾個: - 'iframe' - 'video' - 'embed' - 'img' 而其他元素僅在特定情況下作為可替換元素處理: - 'option' - 'audio' - 'canvas' - 'object' - 'applet' HTML 規範也說了 <input> 元素可替換,因為 "image" 型別的 <input> 元素就像<img>一樣被替換。 但是其他形式的控制元素,包括其他型別的 <input> 元素,被明確地列為非可替換元素(non-replaced elements)。 所以,如果強調典型的可替換元素,那麼 iframe,video,embed,img 更合適作為代表。 ### 67. img 標籤是塊級元素嗎?行內元素和塊級元素有哪些?行內元素和塊級元素的有什麼區別?行內元素的 padding 和 margin 設定會生效嗎? 行內元素: b, big, i, small, tt ,abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea 以下是 HTML 中所有的塊級元素列表(雖然”塊級“在新的 HTML5 元素中沒有明確定義): address, article, aside, blockquote, dd, div, dl, fieldset, figcaption, figure, footer, form, h1-h6, header, hgroup, hr, ol, p, pre, section, table, ul 所以 img 是行業元素,也是典型的可替換元素(replaced element)。 以 span 為例的行內元素的寬高邊距有效性: width:無效。 height:無效。 margin:left和right有效,top和bottom無效。 padding:left和right有效,top會覆蓋前面的元素,bottom會和後面的元素重疊。 因為 img 還是可替換元素(replaced element)又稱置換元素,所以與 span 不同可設定寬高。 ### 68. js 能改變陣列自身的陣列方法有哪些? push(),pop(),shift(),unshift(),splice(),sort(),reverse()是7個可改變自身的陣列的方法。 它們主要是通過對陣列新增或刪除或排序元素,來改變原陣列本身。 [更多資訊-vue原始碼中重寫的7個數組方法](https://juejin.cn/post/7093300880891445261) ### 69. 用過 Vue.nextTick 嗎?你是怎麼理解 Vue.nextTick 的? 用法:在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法,獲取更新後的 DOM。 應用場景:因為 vue 是非同步執行 dom 更新的,所以當你希望在更新資料之後,操作新的檢視, 那麼你的操作邏輯應寫在 Vue.nextTick(callback) 的回撥中,而這個回撥會在dom 更新迴圈結束之後執行。 否則,因為非同步更新 dom 的原因,如果你不是在 Vue.nextTick(callback) 的回撥中執行操作新檢視, 那麼可能會發生意外。例如你在 created()鉤子 是不能操作 dom 的,但你可以在此調介面更新資料, 如果你此時希望介面更新完畢資料後,接著呼叫操作 dom 的邏輯,那麼最後將這部分操作 dom 的邏輯, 放置在Vue.nextTick(callback) 的回撥函式中。 ### 70. 用過 Nginx 嗎?對 Nginx 有哪些瞭解? Nginx (engine x) 是一個高效能的HTTP和反向代理web伺服器,同時也提供了IMAP/POP3/SMTP服務。 Nginx是由伊戈爾·賽索耶夫為俄羅斯訪問量第二的Rambler.ru站點(俄文:Рамблер)開發的. - 反向代理,負載均衡。 有時單臺伺服器,無法滿足大量使用者同時訪問,需要服務叢集以支援,保證應用的可用性。 nginx 做反向代理,可以代理分發,可以使得多臺伺服器能夠平均分擔負載。 我用到 nginx 的地方是,一是作為 http 伺服器,為我做測試實驗,以及一些靜態資源提供 http 服務。二通過 nginx 代理實現跨域。 三是利用 nginx 的代理轉發,實現同一域名下部署多個專案。 [更多資訊-Nginx配置-vue專案打包部署篇](https://juejin.cn/post/7086609804839354381) ### 71. 使用過 sass 和 less 嗎?使用 CSS 預處理語言的優缺點是什麼? 優點: 在 CSS 語法的基礎上增加了變數 (variables)、巢狀 (nested rules)、混合 (mixins)、匯入 (inline imports) 等高階功能, 這些拓展令 CSS 更加強大與優雅。提高樣式的可維護性,一定程度上可以提高工作效率。 缺點:瀏覽器“不認識” css 預處理語言,需要預處理工具轉換才能在瀏覽器上生效,重新編譯的耗時可能略微大於原生 css。 ### 72. 介紹下 vuex > 官網:Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式 + 庫。 > 它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。 vuex 核心: - State。共享的的全域性的的屬性或狀態,主要在 state 中宣告存放。 - Getter。Vuex 允許我們在 store 中定義“getter”(可以認為是 store 的計算屬性)。 注意從 Vue 3.0 開始,getter 的結果不再像計算屬性一樣會被快取起來。 - Mutation。更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。 Vuex 中的 mutation 非常類似於事件:每個 mutation 都有一個字串的事件型別 (type)和一個回撥函式 (handler)。 這個回撥函式就是我們實際進行狀態更改的地方,並且它會接受 state 作為第一個引數 - Action。 Action 類似於 mutation,不同在於:Action 提交的是 mutation,而不是直接變更狀態。Action 可以包含任意非同步操作。 - Module。當應用變得非常複雜時,store 物件就有可能變得相當臃腫。為了解決以上問題,Vuex 允許我們將 store 分割成模組(module)。 每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割。 ### 73. 幾個瀏覽器 css 相容性寫法 CSS非標準屬性。廠商在實現非標準的CSS屬性時,通常會加上字首,甚至在將來會實現的標準也加。當標準被髮布後,廠商會將字首移除。 - Firefox:-moz-, - Chrome和Safari: - -webkit-,IE:-ms-, - Opera:-o-。 - 書寫建議私有屬性(非標準)放在前面,標準屬性寫在後面 下面是一個示例: ``` -webkit-transform:rotate(-3deg); /* Chrome/Safari */ -moz-transform:rotate(-3deg); /* Firefox */ -ms-transform:rotate(-3deg); /* IE */ -o-transform:rotate(-3deg); /* Opera */ transform:rotate(-3deg); /* 標準屬性寫在後面 */ ``` ### 74. js指令碼一定會阻塞瀏覽器渲染文件嗎? 不一定。 瀏覽器解析器遇到script指令碼的解析邏輯: **1.情形一:頁面中引入的script指令碼會阻塞瀏覽器解析渲染文件。** 瀏覽器解析文件時,預設是按照排列順序向下解析的,當遇到script標籤時,和其他標籤元素一樣(例如一個div), 會先解析該元素(指令碼),解析完成後再繼續向下走完成剩餘文件的解析和渲染。也就是說預設情況下,script指令碼會阻塞文件的解析渲染。 注意,如果我們的script指令碼是放在頁面底部的內聯指令碼,那麼它對文件的解析渲染,在結果上影響不大。 但如果script指令碼是外部指令碼(通過網址引入的那種),那麼這個指令碼需要下載和解析執行, 這期間會阻塞瀏覽器對文件的向下解析渲染,直至指令碼下載執行完成,才會繼續向下解析渲染。如果這個指令碼出錯了, 可能還會導致整個頁面永遠無法正常渲染呈現。 注意,DOM樹的生成是受JavaScript程式碼執行影響的,JavaScript程式碼會“阻塞”頁面UI的渲染。 **2.情形二:頁面中引入的script指令碼不會阻塞瀏覽器解析渲染文件。** 情形一中提到的指令碼執行的同步和阻塞的情形,是指預設情況下的script指令碼載入方式。script標籤有兩個屬性,一個是defer(翻譯為延遲), 二是asyn(翻譯為非同步,沒錯,和我們的常見的ajax和axios的非同步是一個意思), 這兩個屬性都可以改變指令碼的載入執行方式(在瀏覽器支援的情況下,這兩的相容性,後面會補充)。 延遲:延遲是指當瀏覽器解析到script指令碼時,會繼續向下載入和解析文件,等到文件載入解析完成且可以操作文件時,才開始執行指令碼。 非同步:非同步是指當瀏覽器解析到script指令碼時,會立刻下載和執行指令碼,但同時瀏覽器解析器也會繼續向下解析渲染文件, 不會造成阻塞的現象。這使得指令碼可以儘快的被載入執行,這很想我們前端呼叫post非同步介面,並不影響文件的正常解析渲染。 ps:defer和async屬性像是在告訴瀏覽器,連結進來的指令碼不會使用document.write(),也不會生成文件內容, 因此瀏覽器在下載指令碼時可以繼續解析和渲染文件。 值得注意的是,使用defer屬性的指令碼,當有多個的時候, 這些指令碼會按照他們在文件中排列的順序載入執行。而使用asyn屬性的指令碼,當有多個的時候,會順序開始觸發載入, 但誰先完成載入就誰先執行,這就是說,他們的執行順序可能是無序不確定的。在有的時候知道這點很重要,因為這可能涉及一些有強制順序的邏輯處理。 [更多資訊-js指令碼一定會阻塞瀏覽器渲染文件嗎?script標籤的async和defer屬性](https://juejin.cn/post/7084282751607636004)</div>