（-）1.自我介紹 主要按照自己的簡歷從頭到尾簡單介紹了一遍。 （ 最近這幾年的項目都是前后端分離，同會同時去開發前端和后端 我應該屬于全棧，目前的后端技能重一些，前端技能主要是使用JS和jQuery去開發，vue有使用過，那時主要是為了解決數據綁定功能的需求。以后有機會再慢慢研究vue，react，nodejs ） （-）2.能挑簡歷里的一個項目具體說一說嗎？ 騰訊的面試官普遍偏向于深挖簡歷里寫的項目，所以對于寫在簡歷里的內容一定要非常熟練，做到張口就來。這并不意味著面試前端崗位面試官就不會問你其他技術棧的項目，我簡歷里有幾個深度學習的項目，騰訊的每個面試官都會問幾句。面試就以這個項目涉及的技術棧貫穿始終。 （ 那我舉最近的一個項目，同時也是我開發時間最長的項目。 統計處的前端和后端都有參與，同時用不同語言去開發。其中里面有一個搜索系統從設計和開發都是我一個人獨立完成，后端是自己寫php?MVC框架，前端是用原生js寫的應用。前端主要通過ajax和后端交流數據實現無刷新更新數據。交流過程用到了主流的json?web?token做簽名驗證。整個搜索系統從前端和后端也融合了第三方系統的的API交流，例如統計處有一個人工智能分析部門，他們寫了一個系統，那個系統就融合到了我的mvc框架里面，前端用ajax方式獲取數據到后端，然后后端用php調用他們的python系統，同時需要對他們的python系統做一些修改，以配合兩個系統的無縫結合。 這里面大概實現了微服務架構的思想，主要通過API將不同的系統和不同語言融合在一起。 ） 技術棧：React?+?antd,?React?hook?+?TypeScript 涉及領域：toB管理端，視頻web播放端，互動直播web客戶端 （ ????typeof運算符，用來檢測一個變量的類型 ????或者，Object.prototype.toString.call，能判斷所有類型 ） 3.React的生命周期，說說你知道的生命周期函數。 （-）4.如何驗證用戶登錄，第三方登錄（微信登錄）的原理是什么。 { ????第一步：請求code ????第二步：通過code獲取access\_token ????第三步：通過access\_token調用接口 } Vue的特點： 1.輕量級的框架 2.雙向數據綁定 3.指令化 4.插件化 vue原理 1.建立虛擬DOM?Tree 2.通過Object.defineProperty()進行數據變化攔截 3.截取到的數據變化，通過發布者-訂閱者模式，觸發觀察者模式,從而改變虛擬DOM中的具體數據 4.通過改變虛擬DOM元素值，從而改變最后渲染dom樹的值，完成雙向綁定 因為我有提到在項目里做了用戶登錄和第三方登錄，所以面試官問得很細。 （-）5.cookie是什么？cookie的字段有哪些？ { ????儲存在用戶本地終端上的數據，一般是純文本文件。 ????name字段：名稱 ????value字段：cookie的值 ????domain字段：為可以訪問此cookie的域名，頂級域名只能設置domain為頂級域名，不能設置為二級域名或者三級域名，否則cookie無法生成。二級域名能讀取設置了domain為頂級域名或者自身的cookie，不能讀取其他二級域名domain的cookie。所以要想cookie在多個二級域名中共享，需要設置domain為頂級域名，這樣就可以在所有二級域名里面或者到這個cookie的值了。 ????path字段：為可以訪問此cookie的頁面路徑。?比如domain是abc.com,path是/test，那么只有/test路徑下的頁面可以讀取此cookie。 ????Size字段：設置cookie的大小 ????http字段：cookie的httponly屬性。若為true，則只有在http請求頭中會帶有此cookie的信息，而不能通過document.cookie來訪問此cookie ????expires/Max-Age字段：設置cookie的過期時間。不設置的話默認值是Session，意思是cookie會和session一起失效。當瀏覽器關閉(不是瀏覽器標簽頁，而是整個瀏覽器)?后，此cookie失效。 ????secure字段：設置是否只能通過https來傳遞此條cookie } cookie的缺點，最大存儲4KB http請求時需要發送到服務端，增加請求數據量 （-）6.瀏覽器緩存知道哪些？Local?storage和cookie的區別是什么？ 1.瀏覽器緩存：緩存文件，比如html、css、js、image(jpg\\png\\gif)?pdf、MP4、MP3等-----提升訪問速度； 2.cookie：http?header?里的一個字段，保持一些很小的信息，會隨著http?request發送到后端，一般代碼使用key：value?，可保存登錄狀態； 3.local?storage：跟cookie類似，但不會發送到服務器，記錄用戶的一些行為和配置。 （-）7.Local?storage、session?storage有什么區別？ （ localstorage數據會永久存儲，除非代碼或手動刪除 sessionStorage數據只存在于當前會話，瀏覽器關閉則清空 主流項目中，localstorage使用會多一些 ） （-）8.在項目里如何運用cookie處理用戶信息的？ { ????獲取?cookie?-?this.cookie ????cookie?配置 ????設置?cookie?-?this.cookie("theme",?"default");?//將?cookie?theme?值設置為?default } （-）9.有涉及到web安全方面嗎？說說常見的攻擊方式？XSS和CSRF，解決方案 { ????XSS（跨站腳本攻擊）防御（一般在用戶保存內容時） ????1.替換特殊字符，和轉義字符，如英文括號，?<?變為的?&gt; ????1.1.在js敏感代碼，如的左右括號轉化為專用字符（&lt;script&gt;）?直接顯示，而不會作為腳本執行 1.2.內容出現單雙引號，需要替換 CSRF（跨站請求偽造）防御 ????1.使用POST接口，增加了跨域成本，因為需要服務端通過跨域設置，大大避免了CSRF攻擊 ????2.增加驗證，如密碼，短信驗證碼，指紋等 } （-）10.跨域問題及解決方案？JSONP、CORS代理 { 在瀏覽器中，為了保護用戶的數據的私密性，出現了一種限制規則，叫做“同源策略”，這個策略的誕生就是瀏覽器對協議不同，域名不同，端口號不同的兩個服務器各自的數據進行的一種保護。 解決跨域的三種方式，JSONP、CORS、服務器代理。一般推薦使用CORS方法 CORS全稱是"跨域資源共享"（Cross\-originresourcesharing）。 CORS方法是解決跨域最簡單粗暴的一種方法，只要服務器實現了CORS接口，就可以跨源通信。在我們項目開發中，后端（node搭建的express服務器）可以在接口響應中加入下面代碼，則前端就可以訪問后端接口了，但是這種方式是需要后端給前端開放權限才可以。 因此，實現CORS通信的關鍵是服務器。 前端可以使用可以處理JSON數據格式的script標簽來解決跨域，而JSONP的核心理念就是目標頁面回調本地頁面的方法,并帶入參數。 一般帶src屬性的標簽imgscriptiframe這三個標簽都不受是否跨域的影響，使用回調＋script標簽的src屬性來跳過瀏覽器的同源策略限制，請求接口，而這種方式，也稱之為JSONP。 一般不會使用的方法：由于后端不存在跨域，臨時新建一個解決跨域的服務端，獲取數據源，再返回前端。 } （-）11.說說你知道的http狀態碼 （ 常用得狀態碼 200成功 301永久重定向（配合location，瀏覽器自動處理） 302臨時重定向（配合location，瀏覽器自動處理） 304資源未被修改 403沒有權限 404資源未找到 500服務端錯誤 504網關超時 1xx服務器收到請求 2xx請求成功200 3xx重定向如302 4xx客戶端錯誤如404 5xx服務端錯誤如500 ） http得method get獲取數據 post新建數據 patch/put更新數據 delete刪除數據 restfulapi 一種新的API設計方法 傳統API設計：把每個url當作一個功能 restfulapi設計：把每個url當作一個唯一的資源 （-）12.js異步加載的方式有哪些？ { 使js文件脫離html解析的瀑布流加載，從而使js可以并行下載。 ????1.比較常用的寫法是動態的添加一個script標簽，叫做ScriptDOMElement ????2.$(document).ready()?需要引入jquery，兼容所有瀏覽器 ????3.使用onload方法實現異步加載 4.標簽的async\="async"屬性 5.標簽的defer\="defer"屬性 } （-）13.webpack用過嗎？簡單說一說 ( 有了解。Webpack是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。 Webpack可以將多種靜態資源js、css、less轉換成一個靜態文件，減少了頁面的請求。 主要承擔如下功能： ????1.打包：將多個文件打包成一個文件，減少服務器壓力和下載帶寬 ????2.轉換：將預編譯語言轉換成瀏覽器識別的語言 ????3.優化：性能優化 ) （-）14.從輸入URL到瀏覽器顯示頁面經過了什么？ { //?這個過程可以大致分為兩個部分：網絡通信和頁面渲染。 //?網絡通信：應用層、傳輸層、網絡層、數據鏈路層。 //?在瀏覽器中輸入url //?1.應用層DNS解析域名 //?2.應用層客戶端發送HTTP請求 //?3.傳輸層TCP傳輸報文 //?4.網絡層IP協議查詢MAC地址 //?5.數據到達數據鏈路層 //?6.服務器接收數據 //?7.服務器響應請求 //?8.服務器返回相應文件 這個過程可以大致分為兩個部分：加載過程和頁面渲染。 在瀏覽器中輸入url: 加載過程： ????1.DNS解析：域名\->IP地址 ????2.瀏覽器依據IP地址向服務器發起http請求 ????3.服務器處理http請求，并返回給瀏覽器 瀏覽器渲染頁面的過程： ????1.依據HTML代碼生成DOMTree ????2.依據CSS代碼生成CSSOM ????3.將DOMTree和CSSOM整合行程RenderTree ????4.依據RenderTree渲染頁面 ????5.遇到則暫停渲染，優先加載并執行JS代碼，完成再繼續 ????6.直至把RenderTree渲染完成 } ( ajax請求get和post的區別？ get一般用于查詢操作，post一般是用戶提交操作 get參數拼接在url上，post放在請求體內（數據體積可更大） 安全性：post易于防止CSRF call和apply的區別？ ) （-）15.瀏覽器緩存機制，強緩存、協商緩存？ { 緩存定義: 1.瀏覽器在本地磁盤上將用戶之前請求的數據存儲起來，當訪問者再次需要改數據的 時候無需再次發送請求，直接從瀏覽器本地獲取數據 1.強緩存 1.不會向服務器發送請求，直接從本地緩存中獲取數據 2.請求資源的的狀態碼為:?200ok(frommemorycache) 2.協商緩存 1.向服務器發送請求，服務器會根據請求頭的資源判斷是否命中協商緩存 2.如果命中，則返回304狀態碼通知瀏覽器從緩存中讀取資源 3.強緩存?&?協商緩存的共同點 1.都是從瀏覽器端讀取資源 4.強緩存VS協商緩存的不同點 1.強緩存不發請求給服務器 2.協商緩存發請求給服務器，根據服務器返回的信息決定是否使用緩存 } 16.vue和react的區別都有什么？ 17.與ES5相比，React的ES6語法有何不同？ 18.什么情況會引起組建重渲染？ 19.setState()函數是同步的還是異步的？ 20.介紹一下ReactRedux的工作流程。 21.解釋Reducer的作用。 22.項目中有用到react路由嗎？簡單說一下。 23.情景題：目前需要實現一個組件，它會根據父組件提供的參數自動生成多個表單，如何實現？傳參設計，內部生成form如何設計，如何保證每個表單是獨立的... （-）24.講一下你知道的前端性能優化方式。 { 多使用內存，緩存或其他方法 減少CPU計算量，減少網絡加載耗時 壓縮文件資源，例如css，js 減少刷新頁面的操作，多用js做無刷新的更新數據 減少直接訪問數據庫，盡量避免重負獲取相同數據，適當時候做一下數據緩存 防止別人盜鏈 適當使用CDN，可以就近獲取所需資源，更快的訪問速度 } 防抖debounce 用戶輸入結束或暫停時，才會觸發change事件 節流throttle 無論拖拽速度多快，都會每隔100ms觸發一次 25.說說js操作數組的API （-）26.ts和js的區別？ { ????1.ts是靜態類語言，可以做到聲明即文檔，js是動態類語言相對更靈活。 ????2.ts是js的超集，即你可以在ts中使用原生js語法。 ????3.ts更易于維護和拓展 ????4.ts對比js基礎類型上，增加了void/never/any/元組/枚舉/以及一些高級類型 ????5.js沒有重載概念，ts有可以重載 ????6.JS在在運行時，才會拋出錯誤，而ts在不運行的時候也發現錯誤 } 27.useEffect()怎么使用？ 28.useEffect()怎么使用？ 算法題 套路簡單題 1.快速排序 vararr?=?\[1,?3,?5,?2,?4\]; for?(vari\=0;i?<?arr.length;i++) {? } 2.二分搜索