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

前言

2020年，是個不平凡的一年，因為疫情的蔓延打亂了我的全盤計劃，但在作業中，完成了目標專案、攻克了技術難關、學習了新的技術，也感謝平臺！

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

思維導圖

微信Web開發者工具

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

小程式組件

小程式/小游戲

開發介面

開發介面

開放能力

小程式媒體原生能力

小程式原生能力

小程式設備原生能力

小程式設備原生能力

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

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

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

說說我做為前端開發工程師為啥學習云開發呢？

因為云開發（Tencent CloudBase，TCB）是云端一體化的后端云服務 ，采用 serverless 架構，免去了移動應用構建中繁瑣的服務器搭建和運維，同時云開發提供的靜態托管、命令列工具（CLI）、Flutter SDK 等能力極大的降低了應用開發的門檻，使用云開發可以快速構建完整的小程式/小游戲、H5、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;
}

11. 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 年「我與技術面試那些事兒」，感謝閱讀，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝轉發分享，點贊，收藏哦！