Web前端2019面試總結

2022-02-20 16:08:37 字數 3346 閱讀 6822

基礎知識點

1.水平垂直居中

子絕父相,子盒子設定絕對定位,設定top:50%;left:50%,margin-top:-50%;margin-left:-50%;

子絕父相,子盒子設定絕對定位,設定 left & top & right & bottom為0;margin: auto;

伸縮盒子,父元素設定flex;justify-content: center;align-items: center;

利用transform屬性,需要設定子絕父相,設定top:50%;left:50%;transform:translate(-50%, -50%);

2.聖杯布局

中間盒子設定寬度100%,左右margin,留出左右盒子的位置

左右盒子在通過定位至左右

3.相容性問題

標籤樣式在不同的瀏覽器各自的margin 和padding差異較大, 解決方案:css裡 *

當在a標籤中巢狀img標籤時,在某些瀏覽器中img會有藍色邊框;解決方案:給img新增border:0;或者是border:none;

4.清除浮動的方法?(重點)

1.父級div定義height

2.結尾處家空div標籤clear:both

3.父級div定義 偽類:after和zoom

4.父級div定義 overflow:hidden

5.前端優化技巧

壓縮css,js,

2.減少http請求次數,合併css,js 合併(雪碧圖)

3.使用cdn

4.減少dom元素數量

5.懶載入

6.靜態資源另外用無cookie得網域名稱

7.減少dom的訪問(快取dom)

8.巧用事件委託

9.樣式表置頂,指令碼置低

6.this指向問題

一般來說,誰呼叫,this就指向誰,特殊情況除外

普通函式呼叫,此時 this 指向 window

定時器函式, 此時 this 指向 window

更改this指向的三個方法

1.call( )方法呼叫乙個函式,其具有乙個指定的this值

fn.call(改變其this指向, [指定的引數] ) 如果指定了null或者undefired,則內部this指向window

應用場景:①借用建構函式

②借用其他物件的方法

應用場景:把陣列展開,傳遞給呼叫的方法

3.bind 不會呼叫函式,會返回乙個新的函式

應用場景:①改變定時器內部的this,②改變事件處理函式的this

7、json字串轉化方法

json.parse(str); //由json字串轉換為json物件

json.stringify(obj); //將json物件轉化為json字元

高階知識點

1、設定千分符

1

function

farmat(mun) /g).join(",")

9 } else

/g).join(",")11}

12}13var a =farmat(1000000)

14 console.log(a);

2、只能輸入數字和小數點

1

function

clearnonum(obj)/g,"."); //

只保留第乙個. 清除多餘的

4 obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");

5 obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//

只能輸入兩個小數

6if(obj.value.indexof(".")< 0 && obj.value !="")

9 }

3、統計每乙個字串出現的次數

1

//字串

2var strs = "asdasdadd";

3function

getmaxstr(str)

5var newarr =;

6for(var i = 0 ; ss= str.length, i)else12}

13console.log(newarr);

14var maxkey='';

15var maxvalue=1;//

設定乙個值

16for(var k in

newarr)21}

22console.log(maxkey);

23return

maxkey;24}

25 getmaxstr(strs);

1

//陣列

2var arr =["a","b","c","c","c","d"];

3 array.prototype.diaohuan=function

(arr)else11}

12console.log(newarr);

13var maxkey = 1;

14var maxvalue ="";

15for (var k in

newarr) 20}

21return

maxkey;

22console.log(maxvalue);23}

24 alert(arr.diaohuan());

高難度知識點

1.怎樣引入乙個第三方的包?require與import的區別:

遵循規範:

require是執行時呼叫,所以require理論上可以運用在**的任何地方,

import是編譯時呼叫,所以必須放在檔案開頭.

本質:

require是賦值過程,其實require的結果就是物件、數字、字串、函式等,再把require的結果賦值給某個變數,

import是解構過程,但是目前所有的引擎都還沒有實現import,我們在node中使用babel支援es6,也僅僅是將es6轉碼為es5再執行,import語法會被轉碼為require.

2.在那呼叫第三方支付介面?為什麼?前端調介面和後端調介面各有什麼區別,優勢與特點:

一般支付介面都是由後端和支付單位聯絡調取的,前端調介面容易被劫持,不安全.

2023年Web前端面試總結

1.水平垂直居中 1.子絕父相,子盒子設定絕對定位,設定top 50 left 50 margin top 50 margin left 50 2.子絕父相,子盒子設定絕對定位,設定 left top right bottom為0 margin auto 3.伸縮盒子,父元素設定flex justi...

2019前端面試總結

作為乙個程式猿,跳槽,那是比較正常滴,最近在準備裸辭,把面試過程中問到的面試題記錄下來,希望能夠幫助大家找到乙個理想中的工作。一定要記得和 hr 約好具體的時間 一定要記得和 hr 約好具體的時間 一定要記得和 hr 約好具體的時間 重要的事請說三遍,否則,可能和我一樣在大晚上刷劇的時候來場面試 嗯...

web前端面試總結

因為最近在找工作,所以避免不了的就是面試,關於面試的話,其實不僅僅只是知道做面試題這麼簡單,因為我們要從公司的角度考慮問題。其實初級的程式設計師是最好塑造的,我的建議是不管你的薪水有多低,一定要以學習新知識為己任,多去嘗試不同方法,去適應不同的環境,做人做事都應該有乙個全新的認識。因為畢竟是工作,所...