2020 年「我與技術面試那些事兒」

前言

2020年，是個不平凡的一年，由於疫情的蔓延打亂了個人全盤計劃。但在工做中，完成了目標項目、攻克了技術難關、學習了新的技術，也感謝平臺！

首先上來就是給一個思惟導圖分享：

思惟導圖

微信Web開發者工具

小程序開發環境，相關工具

小程序組件

小程序/小遊戲

開發接口

開發接口

開放能力

小程序媒體原生能力

小程序原生能力

小程序設備原生能力

小程序設備原生能力

小程序界面/圖形原生能力

小程序界面/圖形原生能力

小程序界面/圖形原生能力

說說我作爲前端開發工程師爲啥學習雲開發呢？

由於雲開發（Tencent CloudBase，TCB）是雲端一體化的後端雲服務 ，採用 serverless 架構，免去了移動應用構建中繁瑣的服務器搭建和運維。同時雲開發提供的靜態託管、命令行工具（CLI）、Flutter SDK 等能力極大的下降了應用開發的門檻。使用雲開發能夠快速構建完整的小程序/小遊戲、H五、Web、移動 App 等應用。

對於小程序開發，你們對其生命週期函數大都小白都是濛濛的，因此我講一下：小程序註冊完成後，加載頁面，觸發onLoad方法。頁面載入後觸發onShow方法，顯示頁面。首先顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只調用一次。當小程序後臺運行或跳轉到其餘頁面時，觸發onHide方法。當小程序有後臺進入到前臺運行或從新進入頁面時，觸發onShow方法。當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload。

在開始小程序開發以前，須要註冊小程序帳號、公有云帳號，購買雲服務器、域名、申請SSL證書，還須要相關的配置，SSH鏈接服務器、安裝NodeJS、安裝Nginx、安裝MySQL、安裝MySQL、導入SSL證書、測試Nginx、域名備案，才能夠進行開發。

下面針對前端工程師的知識點展開介紹：

1. 務必掌握HTML（標籤，屬性，語義化）等。
2. 務必掌握CSS（文檔流，盒模型，浮動，定位，繼承，瀏覽器兼容性）等。
3. 務必掌握HTML5（新增的標籤屬性，以及核心JavaScript API）等。
4. 務必掌握CSS3（新增的屬性，媒體查詢，佈局，動畫）等。
5. 務必掌握Bootstrap（樣式，組件）等。
6. 務必掌握JavaScript（ECMAScript核心技術，DOM相關技術，前端常見算法）等。
7. 務必掌握jQuery等相關技術。
8. 務必掌握移動端相關問題。
9. 務必掌握開發兼容瀏覽器代碼等問題。
10. 務必掌握面向對象等問題，如（面向對象編程中的類，繼承等）。
11. 務必掌握Ajax與JSON等。
12. 務必掌握HTTP和HTTPS等。
13. 務必掌握Node.js（開發服務器端開發）等。
14. 務必掌握EMAScript5 和 EMAScript6 ，設計模式（工做中）等。
15. 務必掌握Vue.js（框架，插件），Angular（框架，插件），React（框架，插件）等。
16. 務必掌握遊戲開發相關問題，網絡安全相關問題，性能優化相關問題，模塊化開發相關問題，CSS預編譯相關問題，混合開發相關問題，前端工程化問題（前端工程化工具 WebPack，gulp）等。
17. 務必掌握版本管理工具（Git，SVN）,測試相關問題。

針對公司面試官，會針對某一個問題，對面試者提出問題（若簡歷裏沒有對項目做出詳細介紹即會展開對技術知識點的解答）

下面技術總結HTML：

1. 標籤要閉合，英文要小寫，不要嵌套混亂，用標籤語義化來提升搜索的機率，使用外鏈式的CSS和JS。（使結構，樣式，行爲分離，內容可以被更多的設備訪問，代碼簡潔，開發組件化，代碼易維護，可複用等）。

2.HTML是一種基於web網頁的設計語言；XHTML是一種基於XML，語法嚴格，標準的設計語言。（不一樣：XHTML元素必須正確嵌套，元素必須關閉，標籤必須小寫，必須有根元素；HTML沒有限制）

3.嚴格模式是 瀏覽器按照 web標準去解析頁面的方法；混雜模式是一種向後兼容的解析方法。

（觸發嚴格模式或者標準模式，就是在HTML標籤前聲明正確的DTD；觸發混雜模式能夠在HTML文檔開始時不聲明DTD，或者在DOCTYPE前加入XML聲明）

4.靜態網頁是沒有數據交互的網頁（沒有數據庫參與，沒有服務器數據的加載）。如靜態網頁只有（HTML+CSS+JavaScript）；動態網頁是有後臺數據參與的網頁。（有動畫的網頁就是動態網頁是錯誤的認知）

5.DOCTYPE聲明位於文檔中的最前面，位於html標籤前，告訴瀏覽器的解析器用什麼文檔類型規範來解析這個文檔。DOCTYPE不存在或格式不正確都會致使文檔以混雜模式來呈現。

嚴格模式下以瀏覽器支持的 最高標準來運行的，在混雜模式中，以向後兼容的方式來顯示。

6.HTML語義化讓頁面的內容變得 結構化，便於瀏覽器解析和搜索引擎解析，提升代碼的可維護度和可重用性。

7.錨點的使用方式：

id="" name="" 
<a href="#dadaqianduan">dadaqianduan</a>

8.結構標籤：

<header>用於定義文檔的頁眉
<nav>用於定義頁面的導航連接部分。
<section>用於定義文檔中的節，表示文檔中一個具體的組成部分。
<article>用於定義獨立於文檔其餘部分的內容。
<footer>用於定義某區域的腳註信息。
<aside>用於定義頁面的一些額外組成部分。

<a href="mailo:2xxx@qq.com>
<a href="javascript:void(0);">
超級連接用於建立普通超級連接，下載連接，電子郵件連接，聯繫咱們連接，空連接，錨點跳轉，特定的代碼功能。

9.IE的內核Trident；Firefox的內核（Gecko,Chrome,Safari(Webkit）...

10.div爲網站佈局的盒子標籤，以前使用table佈局會讓網站加載慢，佈局層級不清晰。

11.img標籤上的title是爲提供標題信息，當光標懸浮在標籤上後顯示的信息，而alt是當圖片不能正常顯示時，圖片的替換文案。

12.下面空元素有：

<br> <hr> <img> <input> <link> <meta>

13.src表示來源地址（表示引入），href表示超文本引用。

14.在新窗口打開連接的方式：

target=_blank

15.HTML是網頁內容的載體；CSS是網頁內容的表現；JavaScript是用來實現網頁上的特效和交互。

16.使用iframe，能夠解決加載緩慢的第三方內容，能夠實現安全沙箱，能夠並行加載腳本。可是使用iframe會阻塞主頁面的Onload事件。iframe的內容即便是空的，加載它也是須要時間的，iframe元素是沒有語義的。

17.面試問考你對語義化的理解。

首先就是丟失樣式的時候，也可以讓頁面呈現出清晰的結構；有助於SEO進行抓取更多有效的消息，語義化更具備可讀性。

下面技術總結CSS：

1.css 基本選擇器有：類選擇器，屬性選擇器，ID選擇器。CSS選擇器的權重分 4 個等級，其中 !important 關鍵字優先級最高。

能夠用0.0.0.0來表示 4 個等級：

內聯樣式的優先級爲： 1.0.0.0

ID選擇器的優先級爲： 0.1.0.0

類屬性選擇器，屬性選擇器，僞類的優先級爲：0.0.1.0

元素選擇器，僞元素選擇器的優先級爲 0.0.0.1

通配符組合使用的時候，相應的層級權重也會增長

2.下面說說CSS引入的方式：行內式將樣式 寫在元素的style屬性內；內嵌式將樣式寫在style元素內；外鏈式將經過Link標籤，引入CSS文件內的樣式。

link是XHTML的標籤，除了加載css文件外，還能夠加載rss等。@import只能加載css文件。

使用link引用css，在頁面載入時同時加載，同步加載。

使用@import引用css，須要等到網頁徹底載入後，再加載css文件，異步加載。

link是XHTML的標籤，沒有兼容問題；@import是在css2.1中提出的，不支持低版本的瀏覽器。

link的標籤是DOM元素，支持使用JavaScript控制DOM和修改樣式，@important是一種方法，不支持控制DOM和修改樣式。

3.每次寫浮動元素，會引發父元素的高度沒法被撐開，影響與父元素同級的元素；與元素同級的非浮動元素會緊隨其後，會相似於遮蓋現象，這裏注意若是一個元素浮動，那它前面的元素也是須要浮動的，否則會影響頁面顯示的結構。

當面試官問如何解決呢，首先第一個就是 能夠爲父元素設置 固定高度；第二能夠爲父元素設置overflow:hidden便可清除浮動，讓父元素的高度被撐開；第三可使用clear:both樣式屬性清除元素浮動。

這裏說明一下，有這兩個設置clear:left或clear:right，是分別解決左浮動或右浮動，而這個clear:both是均可以解決兩邊浮動的。

而後對父元素添加after僞元素，設置屬性content:"";display:block;clear:both;

使用clearfix:

.clearfix:after{
 content: "";
 display: block;
 clear: both;
}

4.位置定位：relative表示相對定位，相對於本身自己所在正常文檔流中的位置進行定位；absolute表示爲絕對定位，相對於最近一級定位，相對於static的父元素進行定位；fixed用於生成絕對定位，相對於瀏覽器窗口或frame進行定位；static默認爲沒有定位；sticky用於生成黏性定位的元素，容器的位置能夠根據正常文檔流計算得出。

5.若是對內聯元素設置float和absolute屬性，讓元素脫離文檔流，而且能夠設置其寬高。對於float可佔據位置，不會覆蓋在另外一個BFC區域上，浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。absolute會覆蓋文檔流中的其餘元素，即遮蓋現象。

6.瞭解css選擇器有哪些：id選擇器，類選擇器，標籤選擇器，相鄰選擇器，子選擇器，後代選擇器，通配符選擇器，屬性選擇器，僞類選擇器，僞元素選擇器。

如: #id, .id, div, h1+p, ul>li, li a, #, button[disabled="true"], a:hover, li:fefore

7.一些可繼承樣式：font-size,font-family color等，一些不可繼承的樣式：

border,padding,margin,width,height

8.說說css優先級：!important>style(內聯)>id(權重100)>class(權重10)>標籤(權重1）

9.爲啥總有人寫：

*{padding:0;margin:0;}

由於瀏覽器的兼容問題，不一樣的瀏覽器對某些標籤的默認值是不一樣的，若是沒有初始化css，每每會致使頁面在不一樣瀏覽器之間出現差別；這裏注意初始化樣式有時會對SEO產生必定的影響。

10.居中，以及居中一個浮動元素。

div {
 float: left;
 width: 400px;
 height: 200px;
 margin: -100px 0 0 -200px;
 position: relative;
 left: 50%
 top: 50%;
 background-color: pink;
}

1. display值：block, none, inline, inline-block, list-item, table, inherit

block是塊類型，默認寬度爲父元素寬度，可設置寬高，換行顯示；none表示元素不會顯示，已脫離文檔流；inline表示行內元素類型，默認寬度爲內容寬度，不可設置寬高，同行顯示；inline-block表示默認寬度爲內容寬度，能夠設置寬高，同行顯示；list-item表示像塊類型元素同樣顯示，並添加樣式列表標記；table表示此元素會做爲塊級表格顯示；inherit表示從父元素繼承display屬性的值。

12.display:none爲隱藏元素，在文檔佈局總不會給它分配空間。visibility:hidden隱藏元素，爲文檔佈局中保留原來的空間。

13.有人問FOUC是啥？如何避免FOUC？FOUC是無樣式內容閃爍，是在IE下經過@import方式導入css文件引發的：

<style type="text/css" media="all">@importurl('demo.css');</style>

IE會先加載整個HTML文檔的DOM，而後導入外部的css文件。在頁面DOM加載完成到CSS導入完成中間，有一段時間頁面上的內容是沒有樣式的。這段時間跟網速和電腦速度有關。

能夠解決FOUC：在head標籤之間加入一個link或script標籤。

14.聊聊rem和em：rem表示相對於根元素的字體大小；em表示相對於父元素的字體大小。

15.css中，自適應的單位百分比%，相對於視口寬度的單位vw，相對於視口高度的單位vh，相對於視口寬度或者高度的單位vm。

相對於父元素字體大小的單位em，相對於根元素字體大小的單位rem。

16.使用rgba給元素的背景設置透明度的方式，來替代使用opacity設置元素透明度的方式，解決子元素繼承父元素透明度的問題。

17.瀏覽器的標準模式和怪異模式區別在於盒子模型的渲染模式不一樣，可使用window.top.document.compatMode判斷當前模式爲什麼爲什麼種模式。結果爲BackCompat表示怪異模式；結果爲CSS1Compat表示標準模式。

18.FFC表示自適應格式化上下文，即display值爲flex或inline-flex的元素將會生成自適應容器。伸縮容器中的每個子元素都是一個伸縮單元。伸縮單元能夠是任意數量的。伸縮單元內和伸縮容器外的一切元素都不受影響。

19.GFC,網格佈局格式化上下文，IFC,內聯格式化上下文，BFC，塊級格式化上下文。

20.div+css比table佈局的優勢在於改變時比較方便，只改動css文件。頁面加載速度快，結構清晰，頁面簡潔，表現與結構分離，搜索引擎優化友好。

21.css中遇到的content屬性做用專門應用在before/after僞元素上，用於插入生成的內容，常見的應用是利用僞類清除浮動。

22.網頁製做用到哪些圖片格式：主流的有jpg,png,gif等。

23.優雅降級開始構建完整的功能，而後再針對低版本瀏覽器進行兼容；漸進加強指對低版本瀏覽器構建頁面，保證最基本的功能，再對高級瀏覽器進行效果，交互等修改。

24.px和em是長度單位，區別在於px是固定的，指爲多少就是多少，計算比較容易，em不是固定的，是相對於容器字體的大小，而且em會繼承父級元素的字體大小。

25.水平垂直居中：

#box {
 width: 200px;
 height: 200px;
 background: red;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -100px 0 0 -100px;
}

26.css sprite是把網頁中一些背景圖片整合到一張圖片文件中，再利用css的background-image,background-repeat,background-position的組合進行背景定位background-position能夠用數字精確地定位出背景圖片的位置。

27.頁面重構，編寫css讓頁面結構更合理化，提高用戶體驗，達到良好的頁面效果並提高性能。

總結

以上就是今天要講的內容，本文僅僅簡單介紹了2020 年「我與技術面試那些事兒」，感謝閱讀，若是你以爲這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友。感謝轉發分享，點贊，收藏哦！