關於前端面試技能點分析

時間 2019-11-11

標籤關於前端面試技能分析欄目快樂工作简体版

原文原文鏈接

樓主總結了一些關於前端面試時技能點的知識點：裏面的知識都是從互聯網上找到的。javascript

一、熟練使用HTML/CSS，可以手寫符合W3C標準的頁面，可以兼容主流瀏覽器，能夠精確還原設計圖；

瀏覽器兼容問題：

瀏覽器兼容問題一：不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣

問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。

碰到頻率:100%

解決方案：CSS裏 *{margin:0;padding:0;}

備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大

問題症狀:常見症狀是IE6中後面的一塊被頂到下一行

碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局最多見的瀏覽器兼容問題）

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性

備註：咱們最經常使用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是用div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題。

瀏覽器兼容問題三：設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度

問題症狀：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度

碰到頻率：60%

解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

備註：這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是IE8以前的瀏覽器都會給標籤一個最小默認的行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。

瀏覽器兼容問題四：行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug

問題症狀：IE6裏的間距比超過設置的間距

碰到概率：20%

解決方案：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

瀏覽器兼容問題五：圖片默認有間距

問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。

碰到概率：20%

解決方案：使用float屬性爲img佈局

備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（個人一個學生使用負margin，雖然能解決，但負margin自己就是容易引發瀏覽器兼容問題的用法，因此我禁止他們使用）

瀏覽器兼容問題六：標籤最低高度設置min-height不兼容

問題症狀：由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容

碰到概率：5%

解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。

瀏覽器兼容問題七：透明度的兼容CSS設置

作兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）咱們都要在不一樣的瀏覽器中看是否兼容，固然熟練到必定的程度就沒這麼麻煩了。建議常常會碰到兼容性問題的新手使用。不少兼容性問題都是由於瀏覽器對標籤的默認屬性解析不一樣形成的，只要咱們稍加設置都能輕鬆地解決這些兼容問題。若是咱們熟悉標籤的默認屬性的話，就能很好的理解爲何會出現兼容問題以及怎麼去解決這些兼容問題。

- /* CSS hack*/

我不多使用hacker的，多是我的習慣吧，我不喜歡寫的代碼IE不兼容，而後用hack來解決。不過hacker仍是很是好用的。使用hacker我能夠把瀏覽器分爲3類：IE6 ；IE7和遨遊；其餘（IE8 chrome ff safari opera等）

◆IE6認識的hacker 是下劃線_ 和星號 *

◆IE7 遨遊認識的hacker是星號 *

好比這樣一個CSS設置：

- height:300px;*height:200px;_height:100px;

IE6瀏覽器在讀到height:300px的時候會認爲高時300px；繼續往下讀，他也認識*heihgt，因此當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認爲高度是200px。繼續往下讀，IE6還認識_height,因此他又會覆蓋掉200px高的設置，把高度設置爲100px；

IE7和遨遊也是同樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，由於它們不認識_height。因此它們會把高度解析爲200px，剩下的瀏覽器只認識第一個height:300px;因此他們會把高度解析爲300px。由於優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，因此書寫的次序是很重要的。

關於透明度兼容：

function setAlphaOpacity(elm,value){

elm=typeof elm=="string"?document.getElementById(elm):elm;

if(document.all){ //IE

elm.style.filter='alpha(opacity='+value+')';

}else{ //FF

elm.style.opacity=value/100;

}

瀏覽器引擎前綴(Vendor Prefix)有哪些？

-moz- /* 火狐等使用Mozilla瀏覽器引擎的瀏覽器 */
-webkit- /* Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 */
-o- /* Opera瀏覽器(早期) */
-ms- /* Internet Explorer (不必定) */

二、深刻理解JavaScript高級特性（如OOP、繼承、原型鏈、閉包等），瞭解ES6新特性

OOP：面向對象是一種編程思想，用一句話來講，就是抽象封裝繼承多態。

繼承：有四種：

一、原型鏈繼承

二、構造函數繼承

三、組合繼承

四、冒充對象繼承

原型鏈：

有限的實例對象和原型之間組成有限鏈，就是用來實現共享屬性和繼承的

閉包：

一、有權訪問另外一個函數做用域內變量的函數都是閉包

二、閉包的做用:

（1）、造成隔離的封閉空間

（2）、延長變量的生命週期（正常狀況下，函數調用結束以後，那麼函數內部的變量都會被銷燬）

（3）、緩存數據

三、缺點：

（1）消耗內存

（2）內存泄漏：閉包，全局變量，沒有清理的DOM元素引用，被遺忘的定時器回調

ES6新特性：

（1）塊級做用域

（2）關鍵字

（3）變量解構賦值

（4）字符串的擴展

（5）數組擴展

（6）函數擴展

三、熟練使用Ajax進行先後臺數據交互，熟練使用JSONP解決瀏覽器常見的跨域請求問題

var xhr =null;//建立對象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(「方式」,」地址」,」標誌位」);//初始化請求

xhr.setRequestHeader(「」,」」);//設置http頭信息

xhr.onreadystatechange =function(){}//指定回調函數

xhr.send();//發送請求

Ajax原生代碼：

// 1.實例化對象

var xhr = new XMLHttpRequest();

// 2.設置請求行(請求方式,請求地址) 要使用open方法來設置

// false表明不是異步是同步已經被棄用

xhr.open('post','./anync.php',true);

// 3.設置請求頭(post請求必須寫這樣的請求頭)

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

// 4.設置請求正文格式:key=value&key=value

xhr.send('username=wanlum&password=1314520');

// 5.監聽並處理響應

// xhr.onreadystatechange=function(){

// if(xhr.readyState == 4 && xhr.status== 200){

// // document.querySelector('p').innerHTML +=xhr.responseText;

// console.log(xhr.responseText);

// }

1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象

2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

3. 設置響應HTTP請求狀態變化的函數

4. 發送HTTP請求

5. 獲取異步調用返回的數據

6. 使用JavaScript和DOM實現局部刷新

優勢：

Ajax能夠實現異步通訊效果，實現頁面局部刷新，帶來更好的用戶體驗；按需獲取數據，節約帶寬資源；

缺點：

一、ajax不支持瀏覽器back按鈕。

二、安全問題 AJAX暴露了與服務器交互的細節。

三、對搜索引擎的支持比較弱。

四、破壞了程序的異常機制。

get和post（ajax版本）

get通常用來進行查詢操做，url地址有長度限制，請求的參數都暴露在url地址當中，若是傳遞中文參數，須要本身進行編碼操做，安全性較低。

post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在於http請求體中，數據不會暴漏在url地址中。

JSONP:

　Jsonp並非一種數據格式，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是經過動態建立script標籤，而後經過標籤的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，爲了處理這些返回的數據，須要事先在頁面定義好回調函數，本質上使用的並非ajax技術

Ajax是全稱是asynchronous JavaScript andXML，即異步JavaScript和xml，用於在Web頁面中實現異步數據交互，實現頁面局部刷新。

優勢：可使得頁面不重載所有內容的狀況下加載局部內容，下降數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提升用戶體驗

缺點：對搜索引擎不友好；要實現ajax下的先後退功能成本較大；可能形成請求數的增長跨域問題限制；

JSON是一種輕量級的數據交換格式，ECMA的一個子集

優勢：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支持複合數據類型（數組、對象、字符串、數字）

原生代碼：

function myJsonp(url,data,callback){

var fnName = "myJsonp_" + Math.random().toString().replace('.','');

window[fnName] = callback;

var querystring = '';

for(var attr in data){

querystring += attr + '=' + data[attr] + '&'

}

var script = document.createElement('script');

script.src = url + '?' + querystring + 'callback='+ fnName;

script.onload = function(){

document.body.removeChild(script);

}

document.body.appendChild(script);

}

四、熟悉流式佈局和響應式佈局原理，熟悉Bootstrap前端框架，可以開發響應式頁面

模態框。分頁。字體。遮罩層。下拉框。TAB欄

響應式佈局是關於網頁製做的過程當中讓不一樣的設備有不一樣的尺寸和不一樣的功能。響應式設計是讓全部的人能在這些設備上讓網站運行正常

五、對前端模塊化有必定的瞭解，對less等預處理有必定的瞭解

模塊化：

一個模塊就是實現特定功能的文件，有了模塊，咱們就能夠更方便地使用別人的代碼，想要什麼功能，就加載什麼模塊。

less和sass是動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。

變量符不同，less是@，而Sass是$;

Sass支持條件語句，可使用if{}else{},for{}循環等等。而Less不支持;

Sass是基於Ruby的，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充。

六、熟悉主流模板引擎、並熟練操做arttemplate和xtemplate

客戶端渲染路線：1. 請求一個html -> 2. 服務端返回一個html -> 3. 瀏覽器下載html裏面的js/css文件 -> 4. 等待js文件下載完成 -> 5. 等待js加載並初始化完成 -> 6. js代碼終於能夠運行，由js代碼向後端請求數據( ajax/fetch ) -> 7. 等待後端數據返回 -> 8. 客戶端從無到完整地，把數據渲染爲響應頁面

服務端渲染路線：2. 請求一個html -> 2. 服務端請求數據( 內網請求快 ) -> 3. 服務器初始渲染（服務端性能好，較快） -> 4. 服務端返回已經有正確內容的頁面 -> 5. 客戶端請求js/css文件 -> 6. 等待js文件下載完成 -> 7. 等待js加載並初始化完成 -> 8. 客戶端把剩下一部分渲染完成( 內容小，渲染快 )

七、使用git、gulp對代碼進行管理和構建，npm、bower等依賴管理工具

給遠程倉庫地址起一個別名

git remote add abc ../../hello.git

這個克隆的名字默認是origin。

克隆下的項目會自動創建跟蹤分支（git push 或者 git pull）

git remote查看有哪些遠程地址的別名

這時候若是爲空則須要本身加

git remote add abc ../../hello.git

更新一下

git pull origin master

想要直接推

git push -u origin master這樣就創建了關聯。（-u的做用就是創建了跟蹤分支,只須要第一次使用，之後能夠直接git push）

git remote show origin看出每個別名的地址是什麼

八、熟練使用Angular，理解MVC、MVVM開發模式和SPA程序開發

MVC是一種開發模式，由模型（Model）、視圖（View）、控制器（Controller）3部分構成，採用這種開發模式爲合理組織代碼提供了方便、下降了代碼間的耦合度、功能結構清晰可見。

模型（Model）通常用來處理數據（讀取/設置），通常指操做數據庫。

視圖（View）通常用來展現數據，好比經過HTML展現。

控制器（Controller）通常用作鏈接模型和視圖的橋樑。

單頁面應用（SPA）：

SPA（Single Page Application）指的是通單一頁面展現全部功能，經過Ajax動態獲取數據而後進行實時渲染，結合CSS3動畫模仿原生App交互，而後再進行打包（使用工具把Web應用包一個殼，這個殼本質上是瀏覽器）變成一個「原生」應用。

在PC端也有普遍的應用，一般狀況下使用Ajax異步請求數據，而後實現內容局部刷新，局部刷新的本質是動態生成DOM，新生成的DOM元素並無真實存在於文檔中，因此當再次刷新頁面時新添加的DOM元素會「丟失」，經過單頁面應能夠很好的解決這個問題。

九、熟練使用前端基礎類庫，如jQuery

（1）事件操做

（2）DOM樣式操做

（3）標籤獲取

十、對Web前端技術有強烈興趣，對Node.js有必定的使用經驗；

NodeJS

是一個運行環境，其使用了一個事件驅動、非阻塞式（異步） I/O的模型，使其輕量又高效

宿主環境

ECMAScript語法規則，須要不一樣版本實現。若是說ECMAScript運行在瀏覽器，稱爲javascript，簡稱JS。若是說ECMAScript運行flash環境，稱爲ActionScript，簡稱AS。若是ECMAScript運行在Node環境，稱爲Nodejs。這個環境就是宿主環境。必須依賴於某個環境，ECMAScript須要「寄生在某一宿主環境」。

十一、熟練使用HTML5和CSS3相關技術開發移動端和PC端前端應用

H5 C3的新屬性

HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...

CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image,

border-color, transform...;

新增的元素有繪畫 canvas ，用於媒介回放的 video 和 audio 元素，本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失，而sessionStorage的數據在瀏覽器關閉後自動刪除，此外，還新增瞭如下的幾大類元素。

內容元素，article、footer、header、nav、section。

表單控件，calendar、date、time、email、url、search。

控件元素，webworker, websockt, Geolocation。

移出的元素有下列這些：

顯現層元素：basefont，big，center，font, s，strike，tt，u。

性能較差元素：frame，frameset，noframes。

css3:

gradient：gradient(linear,0% 0%,100% 0%,form(red),to(balck))

transform

Transition：property duration timing-function delay

animation

十二、瞭解瀏覽器和服務器的交互

譬如一個http://danYoo網站，以indexhtml爲主頁，該主頁使用index.manifest文件爲manifest文件，在該文件中請求本地緩存index.html、hello.js、hello.jpg、hello2.jpg這幾個資源文件。

1) 首次訪問http://danYoo網站時，它們的交互過程以下所示：

①瀏覽器請求訪問http://danYoo

②服務器返回index.html網頁

③瀏覽器解析index.html網頁，請求頁面上全部資源文件，包括HTML文件、圖像文件、CSS文件、JavaScript腳本文件，以及manifest文件

④服務器返回全部資源文件

⑤瀏覽器處理manifest文件，請求manifest中全部要求本地緩存的文件，包括index.html頁面自己，即便剛纔已經請求過這些文件。若是你要求本地緩存全部文件，這將是一個比較大的重複的請求過程。

⑥服務器返回全部要求本地緩存的文件

⑦瀏覽器對本地緩存進行更新，存入包括頁面自己在內的全部要求本地緩存的資源文件，而且觸發一個事件，通知本地緩存被更新。

2) 若是再次打開瀏覽器訪問http://danYoo網站，並且manifest文件沒有修改過

①瀏覽器再次請求訪問http://danYoo

②瀏覽器發現這個網頁被本地緩存，因而使用本地緩存中index.html頁面

③瀏覽器解析index.html頁面，使用全部本地緩存中的資源文件.

④瀏覽器向服務器請求manifest文件

⑤服務器返回一個304代碼，通知瀏覽器manifest沒有發生變化

只要頁面上的資源文件被本地緩存過，下次瀏覽器打開這個頁面時，老是先使用本地緩存中的資源，而後請求manifest文件

3) 若是再次打開瀏覽器時manifest文件已經被更新過了，那麼瀏覽器與服務器之間的交互以下：

①瀏覽器再次請求訪問http://danYoo

②瀏覽器發現這個頁面被本地緩存，因而使用本地緩存中的index.html頁面

③瀏覽器解析index.html頁面，使用全部本地緩衝中的資源文件

④瀏覽器向服務器請求manifest文件

⑤服務器返回更新過的manifest文件

⑥瀏覽器處理manifest文件，發現該文件已被更新，因而請求全部要求進行本地緩存的資源文件，包括indexhtml頁面自己

⑦瀏覽器返回要求進行本地緩存的資源文件

⑧瀏覽器對本地緩存進行更新，存入因此新的資源文件。而且觸發一個事件，通知本地緩存被更新

須要注意的是，即便資源文件被修改過了，在上面的第3中已經裝入的資源文件是不會發生變化的，譬如圖片不會忽然變成新的圖片，腳本文件也不會忽然使用新的腳本文件，也就是說，這時更新事後的本地緩存中的內容還不能被使用，只有從新打開這個頁面的時候纔會使用更新事後的資源文件。另外，若是你不想修改manifest文件中對於資源文件的設置，可是你對服務器上請求緩存的資源文件進行了修改，那麼你能夠經過修改版本號的方式來讓瀏覽器認爲imanifest文件已經被更新過了，以便從新下載修改過的資源文件。

------

額外：

十二、H5C3快速搭建頁面佈局

HTML5/CSS3響應式佈局介紹及設計流程，利用css3的media query媒體查詢功能。

肯定須要兼容的設備類型、屏幕尺寸

專業技能整理1

製做線框原型

測試線框原型

視覺設計

前端實現

1三、懶加載

一、大型的電商網站的一個頁面上有大量的圖片，加載很面。解決辦法：