Ⅰ 前端性能優化之路——圖片篇。
本人是一名前端開發者，在公司負責目前負責信息流服務，為五大手機廠商和各大App提供服務，每天的請求就是以億計算，加上我們又做了SSP和DSP，就是類似於網路廣告聯盟，騰訊廣點通這種。接觸過的應該知道，所以前端優化一直是我頭痛的問題，不僅要注重用戶體驗，同時要兼顧收益，有時候必須犧牲一些用戶體驗，但是作為一名有思想的前端，還是努力規避掉，希望能和從事相同業務的同學一起學習交流一下，話不多說，就來分享我的性能優化之路，有什麼不對的知識點，麻煩大家指出批評。
yahoo軍規把大部分的前端優化都提到了，而在js優化這一塊如果有興趣的額，推薦大家去看《 高性能javascript 》,書里講的非常詳細。 https://segmentfault.com/a/1190000008481413
Media Queries 調用高清背景圖
通過 devicePixelRatio的值，就可以區分普通顯示屏和高清屏，當devicePixelRatio值等於1時（也就是最小值），那麼它普通顯示屏，當devicePixelRatio值大於1(通常是1.5、2.0)，那麼它就是高清顯示屏。這時候我們可以讓UI准備2套圖片，甚至是3套圖片，不同像素的圖利用媒體查詢結合 devicePixelRatio 可以區分普通顯示屏和高清顯示屏，並給出了如下CSS設計方案：
也可以用less或者sass
如果省時間通用性高，就像我們是服務端用nginx對圖片進行處理，想要什麼樣尺寸的圖片自己裁切,我們提供了按比例縮放和自定尺寸的裁切方法，地址後拼接字元串就行。
與其他圖片格式相比，在肉眼無法分辨圖片質量差異的情況下，WebP的空間佔用是最小的，目前國內外各大互聯網公司都已經開始應用這一圖片格式。比如美團
想實現首先是判斷，即識別單次訪問的來源瀏覽器是否支持 webp 格式，其次是執行，如果該瀏覽器支持，則將原圖替換為 webp 格式，並返回。如果不支持，則顯示原格式圖片。 http://caniuse.mojijs.com/Home/Html/item/key/webp/index.html
在識別階段，我們有兩種方法：
1. Server 處理
只要有請求，服務端就能拿到你的User-Agent信息，通過對瀏覽器進行分類，支持webp放在白名單里，不支持的則為黑名單。判斷為白名單，則直接調用，返回webp格式圖片；反之，則顯示原圖。這種方式的優點在於，只需定期維護白名單即可，邏輯簡單；缺點則在於不可擴展、不可測試、UA判斷會出現不準確的情況。
Server處理中的另一種方式是通過讀取 JavaScript 種下的 cookie來實現判斷。這種方式的優點是表現穩定，訪問速度更快，切換無壓力。但缺點是，頁面靜態化會導致用戶切換瀏覽器時不能自主更新，圖片服務失效。比如用戶用支持webp的瀏覽器A請求頁面，這時緩存的靜態頁面均使用webp圖片，但當該用戶使用不支持webp的瀏覽器B時，訪問網頁則會出現請求不到圖片的報錯。
Client 處理，是美團雲為美團主站提供的處理方式。在這種處理方式中，瀏覽器端發送的beacon webp 請求後，通過檢測其載入情況來判定 webp 支持情況，然後瀏覽器寫一個cookie。之後通過讀取瀏覽器cookie判斷是否支持webp，就可以進行下一步替換操作了。
2.替換圖片過程中也是有兩種處理方式：
在 server 端處理的優點是對下游開發者透明，缺點是靜態頁面的緩存數量會翻倍。
替換方式如下：
在 client 端處理可以比較好地應對頁面靜態化的情況，主要針對懶載入（非首屏）的圖片進行處理，直接通過修改懶載入器來實現。
對非懶載入的圖片暫時沒有特別好的辦法。目前，可用替換路徑的方式來處理。
Client 處理實際上效果也是不錯的，美團頁面里90%以上的圖片都是懶載入的，基本上都可以滿足需求。對於大多數用戶來說，採用Client 處理實現webp轉換是個不錯的選擇。
既然提到圖片這一塊，我有忍不住想扯寫些題外的tracking Pixel（像素追蹤），幾乎所有網站都會做數據的採集，上報統計。特別是我們做SSP、DSP廣告這塊需要獲取例如
數據永遠說的是實話，數據證明一切可能。如facebook廣告投放的跨境電商朋友都會使用facebook Pixel(像素追蹤)以獲得各環節的精準數據。這樣追蹤數據後，我們才能投放廣告後銷量上去了，哪個才是效果最好的，哪個效果不好，進而通過多個數據對比，對廣告進行合理的調整優化。
國內搜狗、網路、360、新浪都是用這種 tracking Pixel 方法，實際就是利用1px 的圖片，在圖片地址後綴拼接你需要的信息參數，瀏覽器在請求任何資源的時候會發送當前系統的數據，比如瀏覽器信息，操作系統信息，作為http請求頭送過去，他們就能統計了。
為什麼不用js請求統計？
並不是所有的頁面都支持JS的！NoJSStats的實現機制就是網站分析中點擊流數據獲取的方式之一——Web Beacons，即在頁面中嵌入一個1像素的透明圖片，當該頁面被瀏覽時，圖片就會被請求載入，於是在後端的伺服器日誌中就會記錄該圖片的請求日誌，這樣就可以獲得日誌記錄。
例如網路：
本文引用@美團雲 提供的webP方法，感謝。
Ⅱ web前端白屏時間如何優化
首屏樣式直噴，js加defer等，減少白屏時間可以優化關鍵渲染路徑，主要看影響白屏時間的主要原因，可以用Chrome的lighthouse跑下試一試。
Ⅲ 2022前端開發面試記錄（深圳篇）
2022年來到深圳，感覺到了與之前所在城市的差異，心裡多少有點落差。雖然時機不太對吧，但是相信一切都會好起來的，給自己加油呀！
整理了一些面試被問到的問題，雖然很多是無效面試，但是我也強行問了面試官，從他們的回答中猜測了一下他們關注的面試點，所以也算是有點收獲吧，只是浪費了很多簡歷和路費，哭唧唧。
——1、區塊鏈——
1-1、vue生命周期；
1-2、vuex屬性；
1-3、用戶開始登錄到登錄成功都發生了什麼；
1-4、git常用的命令；
——2、金融：vue——
筆試：
2-1、深淺拷貝的區別，為什麼會出現深淺拷貝，淺拷貝的優勢；
2-2、強制中斷 foreach 遍歷；
2-3、多處組件復用；
2-4、你對前端是什麼概念，前端在整個軟體生態內是什麼角色；
2-5、Vue2 中數據變化但視圖沒有發生同步更新，描述一下出現的場景，解決方式，以及該問題發生的可能原因；
2-6、nextTick 是如何確保開發者能夠獲取到最新的 DOM 狀態的；
2-7、如何使用 mixins，有何利弊；
2-8、使用 Hooks 模式開發時，useMemo，useCallback 常用來作為優化的手段。描述一下它們各自的適用場景，以及背後的原理實現?；
2-9、前端從 Jquery 時代演變至如今的三大框架，這種演變的根源是什麼，jquery 解決了什麼問題，如今的三大框架又是為了解決什麼問題出現的？
視頻面試：
2-10、js遍歷樹形結構，每個節點都有一個唯一ID，只能遍歷一次；
2-11、組件封裝的意義；
——3、知識產權：vue2、vue3、ts、react——
3-1、說一說面向對象的理解，包括繼承、封裝、多態等；
3-2、說一說promise；
3-3、webpack優化；
3-4、vuex使用場景；
3-5、描述一下對vue響應式原理的理解；
3-6、vue生命周期；
3-7、父子組件鉤子函數執行順序；
3-8、v-if和v-show；
3-9、js數據類型；
3-10、實現深拷貝；
——4、物流——
4-1、vue生命周期；
4-2、生命周期-修改元素樣式在生命周期的哪個階段；
4-3、生命周期-修改數據在哪個階段；
4-4、生命周期-destroy裡面會做哪些操作；
4-5、怎麼修改title的內容；
4-6、父子組件傳參的具體寫法；
4-7、v-model的多種寫法；
4-8、js數據類型；
4-9、判斷數組的方法；
4-10、實現左邊固定右邊自適應的布局；
4-11、實現div垂直水平居中；
4-12、flex:1；
4-13、flex詳解；
4-14、call,apply,bind是干什麼的；
——5、新興產業——
5-1、封裝路由，怎麼攔截路由；
5-2、瀏覽器緩存有哪些，又問localStorage和sessionStrorage的區別和應用場景；
5-3、瀏覽器強緩存和協商緩存；
5-4、webpack打包機制，構建過程和配置；
5-5、性能優化方法；
5-6、前端的業務和後端的API是怎麼做到數據實時請求的（問的其實是前端對後端API介面的封裝和管理）；
5-7、computed和watch；
5-8、說了幾個關於大屏的應用場景，有沒有做過，怎麼做的；
——6、某水果：vue2、vue3、ts、各種前沿技術都用——
6-1、怎麼封裝一個組件庫/工具類庫，比如vue封裝過什麼復雜組件，jquery封裝過什麼類庫；
6-2、get和post的區別，傳參格式等；
6-3、promise怎麼用的；
6-4、原型鏈，test()的原型鏈；
6-5、websocket；
6-6、es6中的generator；
6-7、es6中的set和map有啥區別，set為什麼能去重；
6-8、項目難點；
——7、醫療健康：vue——
7-1、vue自定義指令配置；
7-2、webpack的理解；
7-3、對node的了解，用過express嗎；
7-4、項目中的拖拽是怎麼做的；
7-5、websocket和socket的區別；
7-6、聽過mqtt嗎，因為沒聽過所以解釋了一下activemq的用法；
7-7、二維地圖的聚合，如果有十萬個點，會做什麼優化；
7-8、地圖實現多個點連成一條線會怎麼做；
7-9、地圖實現一條曲線；
7-10、內網下git怎麼用的；
7-11、openlayers渲染機制；
7-12、父子組件通信方法；
7-13、router中實現攔截；
7-14、對象合並的方法；
7-15、父子組件的生命周期執行順序，渲染階段為什麼會先執行父組件再執行子組件；
7-16、vue生命周期；
7-17、npm run dev, run build可以在項目中的什麼位置找到；
7-18、vue中跳轉頁面的方法；
7-19、mixins用過嗎；
7-20、判斷引用類型的方法；
7-21、js數據類型；
7-22、判斷基本數據類型的方法；
7-23、for in和for of的用法和區別，兩者遍歷的是索引還是屬性值，兩者都可以遍歷對象嗎；
7-24、foreach和map的區別，兩者會不會改變原數組；
7-25、主要用什麼技術棧；
7-26、行內元素和塊級元素的區別，分別都有哪些，行塊級元素有哪些；
7-27、div垂直水平居中，grid知不知道怎麼用；
7-28、splice和slice；
——8、智慧園區：vue2、vue3、ts、uniapp——
8-1、flex了解嗎，flex布局方向，flex:1 0的頁面效果是怎樣的；
8-2、做過移動端嗎，了解uniapp嗎；
8-3、keep-alive；問了一個沒聽明白的，可能和keep-alive有關系；
8-4、vuex中的action；不用vuex，怎麼代替vuex；
8-5、promise.all和promise.on；
8-6、防止表單重復提交；
8-7、async，await的使用；
8-8、vue3和ts的了解；
8-9、防抖怎麼控制時間；
8-10、vue中的data為什麼要設計成一個函數；
——9、智慧工地：vue、uniapp、小程序——
9-1、Vuex是干什麼的；
9-2、openlayers怎麼用的；
9-3、性能優化；
9-4、spa首屏載入優化；
9-5、bundler.js太大，打包怎麼優化；
9-6、加密方式了解多少，比如md5,base64等，一大堆沒聽過的；
9-7、冒泡排序的實現原理；
9-8、js設計模式；
——10、某快遞公司外包——
10-1、一棵樹的數據，給的是列表格式，轉換成樹形結構；
10-2、項目相關的，聊天怎麼做的，拖拽怎麼做的，拖拽的數據怎麼渲染的，拖拽重疊怎麼處理的；
10-3、js設計模式；
——11、三維：vue、cesium——
11-1、一棵樹的數據，給的是列表格式，轉換成樹形結構；
11-2、openlayers怎麼用的，發布過wms嗎，發布流程是怎樣的；
11-3、openlayers轉換經緯度的方法名是什麼；
11-4、cesium常用的函數；
11-5、vue數據雙向綁定原理；
11-6、Vue中data屬性如果改變一個數組的下標，會不會馬上發生變化，不變化可以怎麼解決
11-7、數組常用方法有哪些；
11-8、 map和filter的區別；
11-9、es6常用的方法；
11-10、父子組件通信，兄弟組件通信；
11-11、new具體進行了什麼操作；
——12、醫療：vue、angular——
12-1、js渲染機制和運行機制；
12-2、vue數據綁定原理；
——13、建設行業：vue、uniapp——
筆試：
13-1、||與&運算符；
13-2、垂直居中方案；
13-3、let a=arr, b=a, c=arr.concat(), a[0]=3，列印b和c，應該是深淺拷貝；
13-4、實現font-size:12；
13-5、介面路徑，給一個地址 http://localhost/projectname/resource/index(http://localhost/projectname/resource/index).html ，根據url請求介面路徑寫出完整路徑，』/ geturl.do 』，』 geturl.do 』，』../ geturl.do 』；
13-6、微信小程序流程和主要文件；
13-7、獲取url參數及內容；
13-8、$(function(){}) / (function(){}) / (function(){})()的區別；
13-9、前端優化方案；
面試：
13-10、項目難點；
13-11、git工作流；
13-12、jquery項目會不會用webpack打包；
13-13、webpack優化；
13-14、web優化；
——14、文化：uniapp——
14-1、ssr渲染；
14-2、ajax和axios的區別；
14-3、cookie和session的區別；
14-4、vue生命周期；
14-5、數據請求寫在哪個生命周期中；
14-6、router的history模式和hash模式；
14-7、工作中的開發流程；
14-8、uniapp的開發流程和坑；
14-9、uniapp滑動問題，下滑切換視頻不生效，一般是什麼原因；
14-10、uniapp載入速度慢，點擊載入圖片速度太慢，一般是什麼原因；
——15、企業平台某外包：vue，node，性能優化——
15-1、說一說websocket；
15-2、vue數據雙向綁定原理；
15-3、項目難點；
15-4、對mvvm、mvc、mvp等的理解；
15-5、vue的常見指令；
15-6、computed和watch；
15-7、class和style怎麼綁定；
15-8、ajax和axios的區別；
15-9、axios攔截器，axios的post請求；
15-10、對前端渲染，服務端渲染的理解；
——16、智慧城市：vue，node，three.js——
16-1、vue生命周期；
16-2、vue組件通信方法；
16-3、js的繼承；
16-4、oracle、mysql、sqllite的區別；
16-5、oracle連表查詢；
16-6、openlayers項目場景；
16-7、cesium項目場景；
——17、租房：jquery+layui，vue2——
17-1、筆試：
17-2、foo列印題；
17-3、this列印題；
17-4、變數提升列印題；
17-5、let arr=[1,2,[5,8,[9,[3,5,]7,]20,37]] 把數組扁平化成一個數組，並進行去重升序;
17-6、let a=[1,2,3,4,5,6,7]; let b=[4,5,6]; 求b在a中第一次出現的位置；
17-7、面試：主要問項目
——18、跑腿：vue2，vue3+ts——
18-1、對html5語義化的理解；
18-2、css實現一個三角形；
18-3、css怎麼實現0.5px的線，為什麼有這種需求，涉及到兼容性問題；
18-4、怎麼解決變數提升的問題；
18-5、es6新增了哪些定義變數的方式；
18-6、const定義的變數可以被修改嗎；
18-7、map和filter的區別，會改變原數組嗎；
18-8、es6去重的方法；
18-9、談一談對promise的理解；
18-10、除了鏈式調用，promise還可以怎麼處理同步請求(async/await)；
18-11、對vue響應式原理的理解，核心是什麼；
18-12、對vue生命周期每個階段的理解；
18-13、為什麼要用key，key有什麼作用；
18-14、v-if和v-show；
18-15、Vue中data為什麼是一個函數；
18-16、vue各場景下的傳值方式有哪些，比如父子組件，兄弟組件，祖孫組件；
18-17、對vuex的理解和使用場景；
18-18、vue常見修飾符；
18-19、Vue3用過嗎(因為沒用過，所以就只針對響應式原理說了一下vue3和vue2的區別)；
——19、實業：jquery，vue2，vue3——
筆試：需要解釋
19-1、html5新標簽，css3新特性；
19-2、js+css3實現某元素以50px每秒的速度左移100px；
19-3、css實現左中右布局，不改變文檔流；
19-4、js兼容性有哪些，以及常見的解決方案；
19-5、描述一下事件循環機制eventloop，eventloop解決了什麼問題；
19-6、給了一個題，大概是後端返回的介面數據，data的格式有很多，比如null，對象，數組，字元串等，怎麼處理這種問題；
19-7、前端性能優化方法，首屏頁面怎麼優化；
19-8、用js寫一個方法實現數據去重並排序(用es5和es6+實現)；
19-9、給定一個數組，把數組中為0的往後排，其他值按順序排序; （示例：[1,0,4,0,5,3]轉換結果為[1,3,4,5,0,0]）
19-10、用0，1，2代表紅黃藍三種顏色，實現以下排序，不能用array.sort實現;（示例：[0,1,0,2,0,1,2]轉換結果為[0,0,0,1,1,2,2]）
面試：
19-11、flex布局；flex:1對應的屬性；
19-12、講一下原型鏈； proto 和prototype有什麼區別；字元串有沒有原型；給定一個str，str.test()調用的誰的test方法；
19-13、講一下閉包；什麼情況下才能算是閉包；形成閉包的條件；列了三個題讓你判斷是不是閉包；
19-14、v-if和v-show是干什麼的；應用場景有哪些；給定一對父子組件，默認值是false，另外有一個ajax請求，值發生了以下變化（false true false true true），在v-show和v-if中，父子組件的哪個階段里會請求ajax；
19-15、computed的實現原理，怎麼實現一個computed；
19-16、css中，transform，margin，position的都是怎麼渲染的，渲染機制是什麼；amd，cmd，commonjs了解嗎；
Ⅳ 前端網站常規優化方案
1、減少請求次數
2、減小資源大小
3、提高響應和載入速度
4、優化資源載入時機
5、優化載入方式
1、合並、壓縮、混淆html/css/js文件（webpack實現，減小資源大小）
2、Nginx開啟Gzip，進一步壓縮資源（減小資源大小）
3、圖片資源使用CDN加速（提高載入速度）
4、符合條件的圖標做base64處理（減小資源大小）
5、樣式表放首部，JS放尾部（JS單線程，會阻塞頁面；資源載入方式）
6、設置緩存（強緩存和協商緩存，提高載入速度）
7、link或者src添加rel屬性，設置prefetch或preload可預載入資源。（載入時機）
8、如果使用了UI組件庫，採用按需載入（減小資源大小）
9、SPA項目，通過import或者require做路由按需（減小資源大小）載入
10、服務端渲染SSR，加快首屏渲染，利於SEO
11、頁面使用骨架屏，提高首頁載入速度（提高載入速度）
12、使用 JPEG 2000, JPEG XR, and WebP 的圖片格式來代替現有的jpeg和png，當頁面圖片較多時，這點作用非常明顯
13、使用圖片懶載入-lazyload
Ⅳ 前端性能優化總結(一)-js、css優化
移動互聯網時代，用戶對於網頁的打開速度要求越來越高。首屏作為直面用戶的第一屏，其重要性不言而喻。優化用戶體驗更是我們前端開發非常需要 focus 的東西之一。
從用戶的角度而言，當打開一個網頁，往往關心的是從輸入完網頁地址後到最後展現完整頁面這個過程需要的時間，這個時間越短，用戶體驗越好。所以作為網頁的開發者，就從輸入url到頁面渲染呈現這個過程中去提升網頁的性能。
所以輸入URL後發生了什麼呢？在瀏覽器中輸入url會經歷域名解析、建立TCP連接、發送http請求、資源解析等步驟。
http緩存優化是網頁性能優化的重要一環，這一部分我會在後續筆記中做一個詳細總結，所以本文暫不多做詳細整理。本文主要從網頁渲染過程、網頁交互以及Vue應用優化三個角度對性能優化做一個小結。
首先談談拿到服務端資源後瀏覽器渲染的流程：
關鍵渲染路徑是瀏覽器將 HTML、CSS、JavaScript 轉換為在屏幕上呈現的像素內容所經歷的一系列步驟。也就是我們剛剛提到的的的瀏覽器渲染流程。
為盡快完成首次渲染，我們需要最大限度減小以下三種可變因素:
首先，DOM 和 CSSOM 通常是並行構建的，所以 CSS 載入不會阻塞 DOM 的解析。
然而，由於 Render Tree 是依賴於 DOM Tree 和 CSSOM Tree 的，
所以他必須等待到 CSSOM Tree 構建完成，也就是 CSS 資源載入完成(或者 CSS 資源載入失敗)後，才能開始渲染。因此，CSS 載入會阻塞 Dom 的渲染。
由此可見，對於 CSSOM 縮小、壓縮以及緩存同樣重要，我們可以從這方面考慮去優化。
當瀏覽器遇到 script 標記時，會阻止解析器繼續操作，直到 CSSOM 構建完畢，JavaScript 才會運行並繼續完成 DOM 構建過程。
當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility 等），瀏覽器會將新樣式賦予給元素並重新繪制它，這個過程稱為重繪。
迴流（Reflow）
當 Render Tree 中部分或全部元素的尺寸、結構、或某些屬性發生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為迴流。
有時即使僅僅迴流一個單一的元素，它的父元素以及任何跟隨它的元素也會產生迴流。現代瀏覽器會對頻繁的迴流或重繪操作進行優化：瀏覽器會維護一個隊列，把所有引起迴流和重繪的操作放入隊列中，如果隊列中的任務數量或者時間間隔達到一個閾值的，瀏覽器就會將隊列清空，進行一次批處理，這樣可以把多次迴流和重繪變成一次。
當你訪問以下屬性或方法時，瀏覽器會立刻清空隊列:
因為隊列中可能會有影響到這些屬性或方法返回值的操作，即使你希望獲取的信息與隊列中操作引發的改變無關，瀏覽器也會強行清空隊列，確保你拿到的值是最精確的。
避免頻繁操作樣式，最好一次性重寫 style 屬性，或者將樣式列表定義為 class 並一次性更改 class 屬性。
避免頻繁操作 DOM，創建一個 documentFragment，在它上面應用所有 DOM 操作，最後再把它添加到文檔中。
也可以先為元素設置 display: none，操作結束後再把它顯示出來。因為在 display 屬性為 none 的元素上進行的 DOM 操作不會引發迴流和重繪。
避免頻繁讀取會引發迴流/重繪的屬性，如果確實需要多次使用，就用一個變數緩存起來。
對具有復雜動畫的元素使用絕對定位，使它脫離文檔流，否則會引起父元素及後續元素頻繁迴流。
圖片懶載入在一些圖片密集型的網站中運用比較多，通過圖片懶載入可以讓一些不可視的圖片不去載入，避免一次性載入過多的圖片導致請求阻塞（瀏覽器一般對同一域名下的並發請求的連接數有限制），這樣就可以提高網站的載入速度，提高用戶體驗。
將頁面中的img標簽src指向一張小圖片或者src為空，然後定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。src指向一張默認的圖片，否則當src為空時也會向伺服器發送一次請求。可以指向loading的地址。注意，圖片要指定寬高。
當載入頁面時，先把可視區域內的img標簽的data-src屬性值負給src，然後監聽滾動事件，把用戶即將看到的圖片載入。這樣便實現了懶載入。
事件委託其實就是利用JS事件冒泡機制把原本需要綁定在子元素的響應事件（click、keydown……）委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。
優點：
例如有一個列表需要綁定點擊事件，每一個列表項的點擊都需要返回不同的結果。
傳統寫法：
傳統方法會利用for循環遍歷列表為每一個列表元素綁定點擊事件，當列表中元素數量非常龐大時，需要綁定大量的點擊事件，這種方式就會產生性能問題。這種情況下利用事件委託就能很好的解決這個問題。
改用事件委託：
輸入搜索時，可以用防抖debounce等優化方式，減少http請求；
這里以滾動條事件舉例：防抖函數 onscroll 結束時觸發一次，延遲執行
節流函數：只允許一個函數在N秒內執行一次。滾動條調用介面時，可以用節流throttle等優化方式，減少http請求；
下面還是一個簡單的滾動條事件節流函數：節流函數 onscroll 時，每隔一段時間觸發一次，像水滴一樣
參考鏈接： https://zhuanlan.hu.com/p/113864878?from_voters_page=true
Ⅵ 前端性能優化之Gzip
由於我們團隊的前端項目越來越龐大，加之Vue的SPA首屏載入特性，導致系統第一次載入速度越來越緩慢，可能達到幾十秒的程度，所以為了優化用戶性能體驗，我們選擇了開啟Gzip進行文件壓縮，確實達到了顯著的效果。
Gzip原本用戶UNIX系統的文件壓縮，後來逐漸成為Internet最主流的數據壓縮格式。
當用戶訪問我們的web站點時，伺服器就將我們的網頁文件進行壓縮，將壓縮後的文件傳輸到客戶端，對於純文本文件我們可以至少壓縮到原大小的40%，這樣大大提高了傳輸效率，頁面便可更快的載入出來。
由於目前我們項目是使用ngxin來部署前端的，nginx自首穗帶 HttpGzip模塊 ， 所以我們直接對 nginx.conf 文件的http配置項進行配置即可。但相對的由於nginx自身處理請求然後輪芹局壓縮返回，會消耗對應的伺服器內存。
測試效果
我們應盡可能減少對服務端內存的使用，畢竟服務端的資源是十分寶貴的，這里我們仍然使用nginx進行前端部署，我們在客戶端替nginx處理壓縮文件這一步操作，nginx便可直接使用我們壓縮好的文件，下面是一個基於vue-cli配置的前端項目。
這里最好安裝低版本，防止報錯。
這里可以根據大家不同的配置，總之就是將webpack插件進行注冊。
成功運行後，便可以在打包文件中看到.gz結尾的文件了，將打包後的文件上傳到指定的nginx文件夾下。
這里需要nginx對應臘讓的插件 http_gzip_static_mole ，之前我是通過yum安裝的nginx，這里似乎不可以，需要手動安裝。這里目錄可以根據大家個人情況而定。
安裝nginx
修改nginx.conf
啟動nginx服務
這里我們雖然服務端js文件夾里只有.gz格式的文件（其他的文件已刪除），但客戶端卻成功讀取了。
無論是服務端與客戶端進行gzip的壓縮，我們都大大縮小了文件體積，給用戶帶來了更好的體驗。
服務端處理gzip優點是只需配置一下即可，無需復雜操作，但缺點是會消耗伺服器內存。
客戶端處理gzip優點是無需伺服器進行文件壓縮，減少伺服器內存消耗，但配置起來相比服務端gzip會稍加繁瑣。
Nginx中文文檔
什麼是GZIP,有什麼優勢,如何開啟GZIP?
vue-cli4 開發項目中開啟gzip壓縮，優化打包體積，提升載入速度
Nginx gzip static靜態壓縮
配置nginx直接使用webpack生成的gz壓縮文件，而不用nginx自己壓縮
Ⅶ 如何減少網頁首屏載入壓力和時間
網友上網都不喜歡用太多的時間等待網頁的打開，等待的越長，用戶可能會直接關閉網頁，這樣就會損失很多流量!其次，關鍵字的排名與網頁的打開速度也有關系，這個主要體現搜索引擎對用戶體驗度上，用戶體驗度好，排名相對其它網站就好些。因此我覺得我們有必要去提高網頁的打開速度，這個不需要太多的成本投入，只需要平時多注意一些小技巧就行了!下面給出20種方法幫你提高網站訪問速度縮短網頁載入時間 。 1、減少頁面HTTP請求數量 比較直接的理解就是要減少調用其他頁面、文件的數量。 A/html/rfc2397。 2、使用CDN(Content Delivery Network)網路加速 現在國內做CDN加速業務的公司很多，簡單講，就是將你的圖片、視頻擴散到CDN網路所能到達之處，讓用戶訪問時能就近下載到這些文件，從而達到網路提速的目的，這樣做，同時能減輕你自己網站的負載。 3、添加文件過期或緩存頭 對於同一用戶頻繁訪問的圖片、Js腳本文件等可以在Apache或Nginx設置其緩沖 時間，例如設置24小時過期時間，這樣用戶在訪問過該頁面之後再次訪問時，同一組圖片或JS不會再重復下載，從而減少了HTTP請求，用戶訪問速度明顯有 所提升，同時伺服器負載也會下降。下面給出nginx配置中緩存控制的例子： 4、伺服器開啟gzip壓縮 這個大家都比較了解，即將需要傳輸的內容壓縮後傳輸到客戶端再解壓，這樣在網路上傳輸的 數據量會大幅減小。通常在伺服器上的Apache、Nginx可以直接開啟這個設置，也可以從代碼角度直接設置傳輸文件頭，增加gzip的設置，也可以從 負載均衡設備直接設置。不過需要留意的是，這個設置會略微增加伺服器的負擔。 5、css格式定義放置在文件頭部 這項設置對於用戶端是慢速網路或網頁內容比較龐大的情況比較有利，可以在網頁逐步呈現的同時仍會保持格式信息，不影響網頁美感。 6、Javascript腳本放在文件末尾 很多Javascript腳本執行效率低下，或者有的第3方域名腳本出現意外無法載入， 如果將這些腳本放置到頁面比較靠前的位置，可能會導致我們自己網站的內容載入速度下降甚至無法正常載入，所以一般將這些腳本放置在網頁文件末尾，一定要放 置在前面的腳本要改用所謂的“後載入”方式載入，在主體網頁載入完成後再載入，防止其影響到主體網頁的載入速度。 7、避免使用CSS腳本(CSS Expressions) 有時為了要css的參數動態改變，可能會採用css expression來實現，但這樣做得不償失，會使用戶端瀏覽器負擔明顯加重，所以不建議這樣做，如果需要改變，可以使用Javascript腳本去實現。 8、css、javascript改由外部調用 如果css、js內容比較龐大，盡量不要寫到同1個頁面中去，改由外部載入比較妥當，因為瀏覽器本身會對css、js文件進行緩存。 9、壓縮Javascript、CSS代碼 一般js、css文件中存在大量的空格、換行、注釋，這些利於閱讀，如果能夠壓縮掉，將會很有利於網路傳輸。這方面的工具也有很多，一般可以保留開發版本，利用工具生成生產版本，2個文件比較，一般壓縮率能達到50%以上，減少的數據量還是比較可觀的。 我這個博客剛改版完成，各種代碼還沒有進行優化和壓縮，目前yslow評級只能達到D,等有時間進行部分優化，達到C等級應該問題不大。 10、避免採用301、302轉向 11、養成良好的開發維護習慣，盡量避免腳本重復調用 12、配置ETags 13、Ajax採用緩存調用 這個的使用可以參照Discuz論壇代碼，裡面對於大量使用的Ajax調用都採用了緩存 調用方式，一般採用附加特徵參數方式實現，注意其中的 就是特徵參數，這個參數不變化就使用緩存文件，如果發生變化則重新下載新文件或更新信 息。 14、合理使用Flush 用戶端發送瀏覽請求後，伺服器端一般要花銷200-500ms去處理這些請求，在此期間，用戶端瀏覽器處於等待狀態，如果要減少用戶等待時間，可以在適當的位置使用flush，將已經就緒的內容推送到用戶端，這在php中很容易實現例如： 15、Ajax調用盡量採用GET方法調用 實際使用XMLHttpRequest時，如果使用POST方法實現，會發生2次HTTP請求，而使用GET方法只會發生1次HTTP請求。如果改用GET方法，HTTP請求減少50%! 16、盡可能減少DCOM元素 這個很好理解，就是盡可能減少網頁中各種<>元素數量，例如 的冗餘很嚴重，而我們完全可以用取代之。 17、使用多域名負載網頁內的多個文件、圖片 記得有資料說明，IE在網頁載入過程中，在同1時刻，對同1域名並行加的HTTP請求數 量最高為2個，如果網頁需要載入的文件數量超過2個(通常遠遠超過..)，要加快網頁訪問速度，最好將文件分布到多個域名，例如19樓，其js文件採用獨 立的域名，據說網路的圖片伺服器數量在20台以上。 18、縮減iframe的使用，如無必要，盡量不要使用 iframe通常用於不同域名內容的載入，這同時也可能因iframe內容載入速度影響到主網頁載入速度，如果可能，把需要載入的內容抓取到本地直接嵌入。如果實在需要iframe載入，採用後載入方式實現。 19、優化圖片文件 優化圖片文件，減小其尺寸，特別是縮略圖，一定要按尺寸生成縮略圖然後調用，不要在網頁中用resize方法實現，雖然這樣看到的圖片外形笑了，但是其載入的數據量一點也沒減少。曾經見過有人在網頁中載入的縮略圖，其真實尺寸有10M之巨… 普通圖像、icon也要盡可能壓縮後，可以採用web圖像保存、減少顏色數等等方法實現。 20、當頁面內容龐大到一定程度，可以採用分頁的方式展現，或者taobao的那種翻頁後載入方式。