A. Web前端新手要掌握的性能優化
今天小編要跟大家分享的文章是關於Web前端新手要掌握的性能優化知識。本文將分享一些前端性能優化的常用手段，包括減少請求次數、減小資源大小、各種緩存、預處理和長連接機制，以及代碼方面的性能優化等方面。下面來和小編一起看一看吧！
base64：尤其是在移動端，小圖標可以base64(webpack)，大圖片慎用(如果載入速度過於慢的，而且很重要的圖片，可以用base64)
1、減少HTTP的請求次數和傳輸報文的大小
「CSSSprite(雪碧圖、圖片精靈)技術」
使用字體圖標(IconFont)或者SVG等矢量圖
+減少HTTP請求次數或者減少請求內容的大小
+渲染更快：因為它們是基於代碼渲染的，而對於點陣圖(png/jpg/gif)是需要先把圖片編碼在渲染
+不容易是幀變形
+也可以使用webp格式圖片，這種格式要小一些(但是需要伺服器端支持這種格式的請求處理)
「圖片懶載入(延遲載入)技術」
+第一次載入頁面的時候不去請求真實的圖片，提高第一次渲染頁面的速度，請求圖片的額外消耗盡可能不要處理
+當頁面載入完，把出現在用戶視野區域中的圖片做真實載入，沒有出現的先不載入(節約流浪，也能減少對伺服器的請求壓力)
o對於數據我們也盡可能分批載入(不要一次請求過多的數據，例如分頁技術)
音視頻文件取消預載入(preload='none')，這樣可以增加第一次渲染頁面的速度，當需要播放的時候在載入
客戶端和伺服器端的數據傳輸盡可能基於JSON格式完成，XML格式比JSON格式要大一些(還可以基於二進制編碼或者文件流格式，這種格式比文件傳輸好很多)
「把頁面的css/js等文件進行合並壓縮」
合並：爭取css和js都只導入一個(webpack可以實現並合並壓縮哦)
壓縮：基於webpack可以壓縮，對於圖片自己找工具先壓縮，可以使用伺服器的GZIP壓縮
圖片BASE64(用BASE64碼代表圖片，減少HTTP，增加瀏覽器渲染速度，所以真是項目中，尤其是移動端，如果圖片載入緩慢，BASE64一下就好了，;但是base64會導致文件中心的代碼超級惡心，不利於維護和開發，所以減渣瞎少使用);webpack中科院配置圖片
2、設置各種緩存、預處理和長連接機制
不經常更改的靜態資源做緩存處理(一般做的是304或者ETAG等協商緩存)
「建立Cache-Control和ExpiresHTTP的強緩存」
DNS緩存或者預處理(DNSPrefetch)，減少DNS的查找
設置本地的離線存儲(manifest)或者把一些不經常更改的數據做本地臨時存儲(webstorage，indexdb)等
有錢就做CDN(地域分布式伺服器)，或者加伺服器
「建立Connection：keep-aliveTcp長連接」
使用HTTP2版本協議(現在用的一般都是http1.1)，可以多條tcp通道共存=>管道化鏈接
一個項目分為不同的域(不同的伺服器)，例如：資源web伺服器、數據伺服器，圖片伺服器，視頻伺服器等，合理利用伺服器資源，但是導致過多的DNS解析
Cache-Control的優先順序高於Expires
基於本地存儲，做數據的存儲
3、代碼方面的性能優化
減少對閉包的使用(因為過多使用閉包會產生很多如蘆空不銷毀的內存，處理不好的話，會導致內存溢出「棧溢出」)，減少閉包的嵌套(減少作用域鏈的查找層級)
對於動畫來說：能用css解決的不用js(能夠用transform處理的，不用傳統的css樣式，因為transform開啟硬體加速，不會引發迴流，或者使用定位的元素也會好很多，因為定位的元素脫離文檔流，不會對其他元素的位置造成影響)，能用
requestAnimationFrame解決的不用定時器
+用requestAnimationFrame還有一個好處，當頁面處於休眠無訪問狀態，動畫會自己暫停，知道回復訪問才開始，而定時器是不論什麼狀態，只要頁面不管，就一直處理
避免使用iframe(因為iframe會嵌入其他頁面，嘩漏這樣父頁面渲染的時候，還要同時把子頁面也渲染了，渲染進度會變慢)
減少直接對DOM的操作(原因是減少DOM的迴流和重繪...)，當代項目基本基於mvvm，mvc數據驅動視圖渲染的，對DOM的操作框架本身完成，性能要好很多
低耦合高內聚(基於封裝的方式：方法封裝，插件，組件，框架，類庫等封裝，減少頁面中的冗餘代碼，提高代碼使用率)
盡可能使用事件委託
避免出現死循環或者嵌套循環(嵌套循環會成倍增加循環的次數)
項目中盡可能使用非同步編程來模擬出多線程的效果，避免主線程阻塞(非同步操作基於Promise設計模式來管理)
JS中不要使用with
避免使用css表達式
函數的防抖和節流
減少使用eval(主要原因是防止壓縮代碼的時候，由於符號書寫不合規，導致代碼混亂)
圖片地圖：對於多次調取使用的圖片(尤其是背景圖)，盡可能把它提取成為公共的樣式，而不是每一次重新設置background
減少filter濾鏡的使用
盡可能減少選擇器的層級
盡可能減少table布局
手動回收堆棧內存(賦值為null)
「棧溢出：死遞」
functionfunc(){
func();
}func();
解決方案：
functionfunc(){
setTimeout(func,0);
}func();
相互引用：引用類型之間的相互調用，形成嵌套式內存
letobj1={
name:'obj1',};
letobj2={
name:'obj2',
x:obj1}
obj1.x=obj2;
以上就是小編今天為大家分享的關於Web前端新手要掌握的性能優化知識的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
B. 前端面試問封裝過什麼組件
日期選擇、城市選擇、組織架構樹、表格樹、列表篩選、頭部導航條、菜單欄、提示彈層、確認彈層、上拉載入下拉刷新、圖表繪制、上傳圖片、下拉選擇等等,其實根據業務需求去封裝復用組件並不是很難的一件事,但就實踐經驗來看,要怎麼樣去封裝一個可用性強,復用性高的優質組件,考慮到盡可能多的可能性的同時又不讓組件用起來太麻煩,這還是需要思考和精進的一件事。