前端開發的基本面試題

paragraph

㈣ 常見的web前端面試題及答案分享

1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)

答：行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。兼容性：display:inline-block;*display:inline;*zoom:1。

2、box-sizing常用的屬性有哪些?分別有什麼作用?

答：box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。

border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

3、Doctype作用?標准模式與兼容模式各有什麼區別?

答：告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?

答：HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。

(1)繪畫 canvas;

(2)用於媒介回放的 video 和 audio 元素;

(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;

(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;

(5)語意化更好的內容元素，比如 article、footer、header、nav、section;

(6)表單控制項，calendar、date、time、email、url、search;

(7)新的技術webworker, websocket, Geolocation;

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。

以上就是環球青藤小編關於web前端面試題的相關分享，希望對大家有所幫助，想要了解更多相關內容，請及時關注本平台並進行查看!

㈤ 前端部分面試題整理

（持續更新中）

1）直接通過數組下標賦值 例如 arr[0]=7 。
2）直接改變數組長度 arr.length = 3 。

Array.prototype.slice.call()

Object.prototype.toString.call(obj) === '[object Object]'

混入，可混入data，methods，鉤子函數，同名methods 函數、data 變數，組件內的會覆蓋掉mixins中的，鉤子函數不會，會加入隊列，mixins的先執行，組件內的後執行。

等待（pending）、已完成（fulfilled）、已拒絕（rejected）

all必須所有的非同步操作全部執行完後才會執行then，race 只接受最快的非同步操作

由於箭頭函數不綁定this， 它會捕獲其所在（即定義的位置）上下文的this值， 作為自己的this值。

call、apply、bind都是改變this指向的方法, bind不立即執行，bind(obj,1,2)，call和apply會立即調用，apply(obj,[1,2])，call(obj,1,2)

㈥ 前端面試題整理

JavaScript：

1.介紹一下isNaN函數？

如果參數不是數字類型的話isNaN返回true（函數名稱：isnan函數功能：判斷數組的元素是否是NaN。）


2.javascript都支持哪些布爾型的操作？


&&,||和！（&&邏輯與，||邏輯或，！邏輯非）


3.「1″+2+4在javascript中得到什麼？


因為「1」是String類型，所以所有的操作數都是String,結果為124


4.2+5+」8″得到的結果是什麼？


因為2和5是數字類型，8是字元串，所以得到的結果是78


5.javascript有幾種loop（循環）方法？


for,while,do-while，for...in語句用於遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。


6.javascript如何創建一個新的對象？


varobj=newObject()或者varobj={}


7.如何為一個對象屬性賦值？


obj["age"]=17或者obj.age=17


8.如何為一個數組添加一個值？


arr[arr.length]=value;


9.javascript基本數據類型/javascript中的typeof返回哪些數據類型


Number類型、Boolean類型、Object類型、String類型、Null、Undefined類型/


10.例舉3種強制類型轉換和2種隱式類型轉換?


強制（parseInt,parseFloat,number）隱式（==_===）


11.數組方法pop()push()unshift()shift()


Push()尾部添加pop()尾部刪除Unshift()頭部添加shift()頭部刪除


12.閉包是什麼，有什麼特性，對頁面有什麼影響


閉包就是能夠讀取其他函數內部變數的函數。


13.添加刪除替換插入到某個接點的方法


obj.appendChild()obj.innersetBefore()obj.replaceChild()obj.removeChild()


14.javascript的本地對象，內置對象和宿主對象


本地對象為arrayobjregexp等可以new實例化


內置對象為gloadMath等不可以實例化的


宿主為瀏覽器自帶的document,window等


15.介紹一下eval()函數


eval()函數可計算某個字元串，並執行其中的的JavaScript代碼。


16.介紹一下JSON


JSON：JavaScript對象表示法（JavaScriptObjectNotation）。


JSON是存儲和交換文本信息的語法。類似XML。


JSON比XML更小、更快，更易解析。


17.jQueryUI與jquery的主要區別是：


(1)jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。


(2)jQueryUI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等。


(3)jQuery本身注重於後台，沒有漂亮的界面，而jQueryUI則補充了前者的不足，他提供了華麗的展示界面，使人更容易接受。既有強大的後台，又有華麗的前台。


html+css:


1.對WEB標准以及W3C的理解與認識:


標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性；


2.xhtml和html有什麼區別:


HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言


最主要的不同：


XHTML元素必須被正確地嵌套。


XHTML元素必須被關閉。


標簽名必須用小寫字母。


XHTML文檔必須擁有根元素。


3.行內元素有哪些?塊級元素有哪些?CSS的盒模型?


塊級元素：divph1h2h3h4formul


行內元素:abbrispaninputselect


Css盒模型:內容，border,margin，padding


4.前端頁面有哪三層構成，分別是什麼?作用是什麼?


結構層Html表示層CSS行為層js


5.寫出幾種IE6BUG的解決方法:


雙邊距BUGfloat引起的使用display


3像素問題使用float引起的使用dislpay:inline-3px


超鏈接hover點擊後失效使用正確的書寫順序linkvisitedhoveractive


Iez-index問題給父級添加position:relative


Png透明使用js代碼改


Min-height最小高度！Important解決』


select在ie6下遮蓋使用iframe嵌套


為什麼沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08line-height:1px）


6.解釋csssprites，如何使用。


Css精靈把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量


7.你如何對網站的文件和資源進行優化?期待的解決方案包括：


文件合並


文件最小化/文件壓縮


使用CDN託管


緩存的使用


8.清除浮動的幾種方式，各自的優缺點：


使用空標簽清除浮動clear:both（理論上能清楚任何標簽，，，增加無意義的標簽）


使用overflow:auto（空標簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用於兼容IE）


是用afert偽元素清除浮動(用於非IE瀏覽器)


9.瀏覽器內核


1、Trident內核：IE最先開發或使用的，也稱IE內核，360瀏覽器使用的也是IE內核；


2、Webkit內核：谷歌chrome瀏覽器最先開發或使用，也叫谷歌內核，楓樹瀏覽器、太陽花使用的也是谷歌內核；


3、Gecko內核：Netscape6開始採用的內核，後來的MozillaFireFox(火狐瀏覽器)也採用了該內核，K-Meleon瀏覽器也是使用這種內核；


4、Presto內核：目前只有Opera瀏覽器採用該內核

㈦ 你遇到的前端面試題都有什麼

大家好，我是王我。

隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。

HTML篇

1.doctype是什麼？有哪些類型？

2.input有哪些新類型？簡要說明其8用法。

3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？

4.bootstrap響應式的原理是什麼？

5.多移動終端頁面適配是如何實現的？

CSS篇

1.如何實現兩列布局，左邊自適應，右邊固定寬度？

2.用CSS畫一個三角形

3.CSS實現字體大寫

4.display有哪些常用的屬性值？分別是什麼意思？

5.position為absolute，relative，fixed的定點位置

6.用三種方法清除浮動

7.請介紹一下margin塌陷問題

js篇

1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)

2.js創建對象，至少使用三種方法

3.簡述一下事件穿透以及解決辦法

4.用三種方式判斷變數類型是否是數組

5.如何實現對象的拷貝？

6.什麼是閉包？閉包的優缺點。

7.簡述一下ajax請求的過程。

8.簡述一下new一個人構造函數的人過程。

9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。

10.js原始數據類型有哪些？

11.學一個函數，判斷一個變數是否是字元串

12.typeof有哪些結果？

13.剪頭函數和普通函數有什麼區別？

14.請用三種方法實現數組去重

15.href和src有什麼區別？

jquery篇

1.attr()和prop()有什麼區別？

2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？

3.touch和click有什麼區別？

4.window.onload和jquery的ready有什麼區別？

vue篇

1.簡述一下vue的生命周期及其特點

2.vue雙向綁定的原理是什麼？

3.vue的特點有哪些？和jquery有什麼區別？

4.父子組件之間傳遞數據的方法

5.子組件如何共享數據？

6.一般有什麼工具進行數據交互？

7.webpack的原理是什麼？

8.簡述一下$nextTick的用法

瀏覽器篇

1.cookie、sessionStorage、localStorage的區別是什麼？

2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制

網路篇

1.http和https之間的區別

2.從伺服器的安全考慮，是使用get請求還是post請求？

3.URL請求的過程有哪些？

項目經驗篇

1.項目中遇到的最大挑戰以及解決辦法

2.常見的網頁優化有哪些？

作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。

希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。

大家好，我是王我，中國最帥的前端程序員。

前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。

第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。

第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。

第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。

第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。

最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答

1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。

2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙

考慮到安全應當使用session。

3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能

考慮到減輕伺服器性能方面，應當使用COOKIE。

4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

MVVM：

m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題

圖片說明一下：

說到MVVM就要說一下雙向綁定和數據劫持的原理，

MVC：

m:model數據模型層 v:view視圖層 c:controller控制器

原理： c層需要控制model層的數據在view層進行顯示

MVC兩種方式，圖片說明：

總結：

mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。

不懂得可以復制鏈接查看：

https://www.pianshen.com/article/3716256399/

localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性

sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的

有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可

【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】

緩存路由組件

使用的是vue的一個組件，參考vue的官方文檔

使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀

-----【保障組件的數據不會被切換路由而銷毀數據】

Home是對應的組件對象的名字，不是路由的名字

數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組

一紅六種方法吧……

了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。

這樣就可以說同源策略----協議---埠---域名

原生的src和href可以解決跨域

代理可以解決

請求頭也可以攜帶瀏覽器提示的也可以解決

一般都是後端解決跨域問題

【別的需要了解看下方鏈接】

https://blog.csdn.net/qq_41604383/article/details/100770100

§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。

§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。

§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。

§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。

§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。

§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。

§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）

【詳情請看】

https://ask.dcloud.net.cn/article/35845

HTML書寫規范

H5新增標簽

HTML渲染過程

css盒子模型概念

css彈性布局概念

事件模型

DOM2級事件模型

閉包

原型鏈

常見的布局方案

移動端前端常見的觸摸相關事件touch、tap、swipe等整理

移動端前端手勢事件

移動端頁面渲染優化

GPU渲染

GPU核心渲染過程

常用的調試工具

Chrome控制台調試js使用

移動端測試

常見的HTTP狀態碼

不同請求類型的區別

WEB緩存方案

——————————

牛客網（www.nowcoder.com）

- 專業IT筆試面試備考平台

- 最全C++JAVA前端等互聯網技術求職題庫

- 全面提升IT編程能力

- 程序員交友聖地

分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！

放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。

建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！

01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？

02、HTML5為什麼只需要寫？

03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

04、頁面導入樣式時，使用link和@import有什麼區別？

05、介紹一下你對瀏覽器內核的理解？

06、常見的瀏覽器內核有哪些？

07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？

08、如何區分HTML和HTML5？

09、簡述一下你對HTML語義化的理解？

10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？

01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

02、CSS選擇符有哪些？哪些屬性可以繼承？

03、CSS優先順序演算法如何計算？

04、CSS3新增偽類有那些？

05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？

06、display有哪些值？說明他們的作用。

07、position的值relative和absolute定位原點是？

08、CSS3有哪些新特性？

09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？

10、用純CSS創建一個三角形的原理是什麼？

01、介紹Java的基本數據類型。

02、說說寫Java的基本規范？

03、Java原型，原型鏈？有什麼特點？

04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？

05、Java如何實現繼承？

06、Java創建對象的幾種方式？

07、Java作用鏈域？

08、談談This對象的理解。

09、eval是做什麼的？

10、什麼是window對象？什麼是document對象？

OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。

如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……

你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！

如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！

扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。

1.前端框架類問題，問你會不會用vue react啊

2.語言類，問你一些JavaScript語言的問題

3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道

㈧ 前端常見面試題

前端開發可能問到的問題：
自我介紹（一定要對項目很熟悉）
ui-app web前端技術體系？

響應式怎麼做？

render跟狀態的差異
類組件的生命周期？
阻止冒泡，阻止事件默認行為
文本垂直居中。 line-height設置為元素高度。

用rece講數組中的對象進行合並
解釋localstorage sessionstorage cookie
eventbus滿足event.on('eventname', callback)

display有幾個值？默認值？
position有幾個值？默認值？
div水平垂直居中？
position有哪些值

react相關問題（概念理解、通訊組件等）、react常用內置
React-router
html+css

頁面增刪改查

position的值 absolute relative fixed static

工作中是怎麼聯調和上線的（現場想合適的前後端聯調方式，能和webpack環境切換聯系起來）
antd的Form shouldUpdate增量更新方式，性能優化。
對Hooks的理解

3:操作dom點擊事件向伺服器上傳數據，在上傳未完成之前不可重復操作事件
4:日期格式化，日期不足前兩位補0（2021-06-06 06:06:00）

用css寫一個布局，左側固定寬度，右側自適應

你看

㈨ 前端面試題整理（一）

進程是CPU資源分配的最小單位，線程是CPU調度的最小單位

其中GUI渲染線程和JS引擎是無法同時工作的

默認情況下, TCP 連接會啟用延遲傳送演算法 (Nagle 演算法), 在數據發送之前緩存他們. 如果短時間有多個數據發送, 會緩沖到一起作一次發送 (緩沖大小見 socket.bufferSize), 這樣可以減少 IO 消耗提高性能.

如果是傳輸文件的話, 那麼根本不用處理粘包的問題, 來一個包拼一個包就好了. 但是如果是多條消息, 或者是別的用途的數據那麼就需要處理粘包.

可以參見網上流傳比較廣的一個例子, 連續調用兩次 send 分別發送兩段數據 data1 和 data2, 在接收端有以下幾種常見的情況:

A. 先接收到 data1, 然後接收到 data2 .
B. 先接收到 data1 的部分數據, 然後接收到 data1 餘下的部分以及 data2 的全部.
C. 先接收到了 data1 的全部數據和 data2 的部分數據, 然後接收到了 data2 的餘下的數據.
D. 一次性接收到了 data1 和 data2 的全部數據.
其中的 BCD 就是我們常見的粘包的情況. 而對於處理粘包的問題, 常見的解決方案有:

多次發送之前間隔一個等待時間
關閉 Nagle 演算法
進行封包/拆包

通過滑動窗口協議（連續ARQ協議）實現，保證了分組無差錯、有序接收、流量控制。接收方返回的ACK中會包含自己的接收窗口的大小，並且利用大小來控制發送方的數據發送。

當發送者收到了一個窗口為0的應答，發送者便停止發送，等待接收者的下一個應答。如果這個窗口不為0的應答在傳輸過程中丟失，發送者一直等待，接收者以為發送者收到該應答，等待接收新數據，這樣雙方就相互等待，從而產生死鎖

TCP使用了持續計時器。每當發送者收到一個0窗口的應答後就啟動該計時器。計時器到時便主動發送報文詢問接收者的窗口大小。若接收者仍然返回0窗口，則重置該計時器繼續等待；若窗口不為0，則標識應答報文丟失了，此時重置發送窗口開始發送，這樣就避免了死鎖的產生

擁塞控制是作用於網路的，防止網路負載過大，常用的方法：1.慢啟動、擁塞避免 2.快重傳、快恢復。流量控制是作用於接收者的，控制發送者的發送速度使接收者來得及接收，防止分組丟失

發送方維持一個叫做擁塞窗口CWnd的狀態變數，控制著傳輸速度，TCP開始發送報文時CWnd=1。一個傳輸輪次所經歷的時間就是往返時間RTT，每經過一個RTT並且按時收到確認，就將擁塞窗口CWnd加倍。還有一個叫慢啟動門限ssthresh的狀態變數，當CWnd<ssthresh時，使用慢啟動，當CWnd>=ssthresh改用擁塞避免演算法

每經過一個往返時間RTT就把發送方的擁塞窗口cwnd加1而不是加倍。無論在慢啟動階段還是擁塞避免階段，只要發送方沒有按時收到確認，就把慢啟動門限設置為出現擁塞時的擁塞窗口cwnd的一半（但不小於2）。然後把擁塞窗口cwnd重置為1，執行慢啟動演算法

接收方收到一個失序的報文段後就立刻發出重復確認而不是等到自己發送數據時捎帶確認。只要發送方一連收到三個重復確認就立即重傳對方尚未收到的報文段，而不是等待重傳計時器到期

當發送方連續收到三個重復確認時，把慢啟動門限ssthresh減半，但是並不執行慢開始演算法，而是將擁塞窗口cwnd設置為ssthresh減半後的值，直接執行擁塞避免演算法。快重傳配合快恢復的TCP Reno版本是目前使用最廣的版本。

幀：HTTP/2 數據通信的最小單位消息：指 HTTP/2 中邏輯上的 HTTP 消息。例如請求和響應等，消息由一個或多個幀組成。
流：存在於連接中的一個虛擬通道。流可以承載雙向消息，每個流都有一個唯一的整數ID

HTTP/1.x會在請求和響應中中重復地攜帶不常改變的、冗長的頭部數據，給網路帶來額外的負擔。

服務端可以在發送頁面HTML時主動推送其它資源，而不用等到瀏覽器解析到相應位置，發起請求再響應。例如服務端可以主動把JS和CSS文件推送給客戶端，而不需要客戶端解析HTML時再發送這些請求。

服務端可以主動推送，客戶端也有權利選擇是否接收。如果服務端推送的資源已經被瀏覽器緩存過，瀏覽器可以通過發送RST_STREAM幀來拒收。主動推送也遵守同源策略，伺服器不會隨便推送第三方資源給客戶端。

HTTP 1.x 中，如果想並發多個請求，必須使用多個 TCP 鏈接，且瀏覽器為了控制資源，還會對單個域名有 6-8個的TCP鏈接請求限制。

HTTP2中：

同域名下所有通信都在單個連接上完成。
單個連接可以承載任意數量的雙向數據流。
數據流以消息的形式發送，而消息又由一個或多個幀組成，多個幀之間可以亂序發送，因為根據幀首部的流標識可以重新組裝

前端面試與進階指南
從輸入URL到頁面載入的過程？如何由一道題完善自己的前端知識體系！

㈩ 前端常見面試題-hr

因為前端是用戶最直觀能接觸和交互的地方，所有 「用戶體驗」最重要。

早期學習都是有點野路子，遇到問題解決問題，
後面發現有很多問題沒有系統的學習 很難分析出具體的問題，
然後會開始看一下比較基本和底層一點的書或者視頻，包括一些api。
有了系統的知識後，就可以去研究相關一些大神的源碼，當然也借鑒了很多人的學習心的再去慢慢消化。
如果單純看和聽 其實我覺得只能吸收10%左右。
我一般會把學習的內容和工作上解決了比較難的問題都通過 掘金或者的方式記錄下來。這樣我覺可以消化40%的內容。
最後最好的學習方法，當然是給別人說一遍，這也是我們前端組為什麼每個月做技術分享的原因。
這樣我覺得可以最整個知識跟深刻的思考和別人互動互相檢驗學習的質量。

首先我確實挺感謝我現在公司，因為我之前去過外包公司，我深刻的感受到企業文化對公司的重要性。倡導以員工的成長為主，
公司會定期給我們請外面的老師做管理幹部的培訓，有管理的有經驗的。確實讓我學習了很多成長了很多。
不過由於我們是傳統服裝製造業，對於技術的迭代和要求沒那麼高，我在這里也工作了6年多，我自身也感覺有點 開始進入舒適區的感覺，
我想在新的環境，跟更多行業優秀的人才一起學習，讓自己做一個T字型人才，把縱向的技術能力扎深扎穩。

應該就是capp項目，由於公司戰略要求，要在3個月內完成原來capp工時工序客戶端系統到web的切換，兩個前端，兩個後端，由於周期短，要在短時間交付項目成果，確實是一個很難解決的大難題。
（1）首先我覺得溝通很重要，在需求方面，我和後端組長積極與產品溝通，分析系統各個模塊的使用場景和優先順序。把最關鍵的核心模塊提取出來，優先開發，並與領導協商後面再繼續迭代其他基礎功能。 每個功能都討論仔細避免交付時才返工。
（2）在框架上，一個穩定的容用的框架是高效迭代開發所必須的，所以作為框架的搭建就刻不容緩，我和後端負責人也是溝通分析趕工，不斷打磨一個穩定有效的框架。制定了很多約定與規范。
（3）在時間上，打包比較花時間，為了解放不必要的投入，我引進入CI/CD工具，大量的節省了前端後端的部署時間。把精力都花在刀刃上。
（4）團隊的氛圍， 畢竟還有很多功能要開發，加班是再所難免。
其實我覺得人加班為什麼會累，一/般是一個人在奮戰，會感到孤獨和無助。所以我們採取在關鍵節點交付前集體加班的方式，由於大家都在，即保證了開發過程的效率，也可以避免007的噩夢。
（5）儀式感與明確的目標，跟上級申請項目立項，讓公司發起啟動會，讓每一個參與開發同事有儀式感，意識自己參與項目的重要性與意義。並申請項目獎金，在每個階段性節點按時交付，我們都給予員工及時的獎勵和認可，由於有了明確的目標和方向。

整體項目最終以2個半月交付核心業務功能，4個月後完成整個系統所有功能交付，並順利上線。

我們喜歡的運動是羽毛球，平時喜歡用碎片化的時間 聽得到的一些可能，有it類的有經濟學類的，可以擴充自身的視野。
還是在掘金寫寫博客。