當前位置:首頁 » 網頁前端 » 前端巴士無縫滾動延遲優化
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端巴士無縫滾動延遲優化

發布時間: 2022-04-13 00:04:11

A. 如何進行前端優化

1.減少 HTTP 請求....

2.使用 HTTP2

3.使用服務端渲染

4.靜態資源使用 CDN

5.將 CSS 放在文件頭部,JavaScript 文件放 ...

6.使用字體圖標 iconfont 代替圖片圖標

7.善用緩存,不重復載入相同的資源

8.壓縮文件

9.圖片優化

(1).圖片延遲載入

(2). 響應式圖片

(3). 調整圖片大小

(4). 降低圖片質量

(5). 盡可能利用 CSS3 效果代替圖片

(6). 使用 webp 格式的圖片

10. 通過 webpack 按需載入代碼,提取第三庫代碼,減少 ES6 轉為 ES5 的冗餘代碼

11. 減少重繪重排

12. 使用事件委託

13. 注意程序的局部性

14. if-else 對比 switch

15. 查找表

16. 避免頁面卡頓

17. 使用 requestAnimationFrame 來實現視覺變化

18. 使用 Web Workers

19. 使用位操作

20. 不要覆蓋原生方法

21. 降低 CSS 選擇器的復雜性

(1). 瀏覽器讀取選擇器,遵循的原則是從選擇器的右邊到左邊讀取。

(2). CSS 選擇器優先順序

22. 使用 flexbox 而不是較早的布局模型

23. 使用 transform 和 opacity 屬性更改來實現動畫

24. 合理使用規則,避免過度優化

性能優化主要分為兩類:

    • 載入時優化

    • 運行時優化

B. 前端工程師需要擁有哪些技能

1.開發語言

HTML發展歷史有二十多年,歷經多次版本更新,HTML5和CSS3的出現又是一次革新。有些人認為前端開發要掌握的技能簡單,不就是製作網頁 嘛,其實不然,web前端需要掌握的核心語言xHTML+CSS+JavaScript,JavaScript作為最難的語言之一,許多編程高手也不敢妄 自菲薄自封精通。由於JavaScript與html的差異性,以及靜動態分開處理的一些好處。在大公司編寫靜態效果和動態效果往往是分開由不同的人完成的。小公司因為需要壓縮成本,就要求每個人會得越多越好,如果您想往項目經理發展,能懂一兩門後台語言,絕對是錦上添花!

2.瀏覽器兼容性

互聯網目前主流瀏覽器有IE6789,Firefox,Chrome,Opera,Safari,遨遊,包括國內主流的搜狗,騰訊 TT,360,the World等等;從內核上講主要有IE的,遨遊版IE,safari,firefox以及opera的,這些都是大家常見的,如果你身邊有老網蟲喜歡收藏 瀏覽器,你翻翻他的硬碟,相信幾十款肯定是有的。每種內核對代碼的解析是不完全一樣的,即使同樣內核也可能存在很大差異,如IE和遨遊版的IE。不說非主流的瀏覽器,就主流的瀏覽器要做到完全兼容,也並非易事,需要長時間的積累和測試,需要前端開發工程師對前端開發的熱愛和激情。

目前移動互聯網的發展趨勢也不容小覷,將慢慢占據互聯網的主要份額。移動互聯網最突出的好處是方便和及時,試想一下,走在某地風景很好,拍下來後自 動分享給各路好友,因此手機上的瀏覽器兼容也看刻不容緩,現在手機上的瀏覽器也是紛繁復雜,主流的UCWEB,safari,IE,3G門戶的,以及 symbian低端機的「殘缺兒童」,包括國外流行手機我們不知道的一些瀏覽器,更糟糕的是這些瀏覽器解析因為手機硬體的不同,每個瀏覽器得到的結果都是 完全不同的。

3.hack技術

由於不同的瀏覽器對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,這個時候就需要針對不同的瀏覽器寫不同的CSS,這個過程叫CSS hack。雖然我們寫代碼都要求按照標准,不寫hack代碼,但實際工作中為了兼容主流瀏覽器,hack代碼是免不了的,所以這也應該是每個前端開發人員 必備的技能。

4.業內標准

目前Web前端開發中提到最多的就是W3C標准,這是一系列標準的集合,代表了互聯網發展的方向,也代表了前端開發的一種信仰。寫的代碼都要100%通過標准驗證,為通過標准驗證而感到自豪,會有效推動互聯網的快速發展。

5.開發工具

目前比較流行的是Dreamweaver, 其曾經風靡一時,到現在也沒有退出歷史舞台,證明DW還是有很大優勢的,尤其是針對初學者,其強大的提示功能可以幫助我們很快的熟悉並掌握網頁布局,但現 在更提倡的是純手寫代碼,既體現技能方面的卓越,也可有效避免使用DW等工具產生的冗餘代碼。此外再掌握一些photoshop技能,即使沒有美工,也能 簡單處理一些圖像。

小結,掌握以上技能,可以說你是一個合格的前端開發人員,能夠參與到一個大的項目中,或者自己獨立寫出一個網頁。雖然這看起來和網頁製作設計差不多,從效果上來看,都是製作網頁的,但實際上,技術上所超出的已經是好幾個檔次的東西了。

C. 發現網站載入卡頓或者性能差的情況,前端該如何去debug和優化

載入卡頓和性能差的情況,多數出在程序方面。前段的話影響不會那麼大。前段要用壓縮的圖片,壓縮的JS,css文件。保持頁面適當的大小。

D. 前端網頁開發需要學什麼語言

後台語言,比如java、php。

E. 怎麼樣從web前端方面優化性能

例如,輸出有10個元素的數組必須使用循環語句逐個輸出各下標變數:
for(i=0; i<10; i++)
printf("%d",a[i]);
而不能用一個語句輸出整個數組。
下面的寫法是錯誤的:
printf("%d",a);
【例7.1】
main()
{
int i,a[10];
for(i=0;i<=9;i++)
a[i]=i;
for(i=9;i>=0;i--)
printf("%d ",a[i]);
}
【例7.2】
main()
{
int i,a[10];
for(i=0;i<10;)
a[i++]=i;
for(i=9;i>=0;i--)
printf("%d",a[i]);
}

F. 為什麼要關注前端性能優化

  1. 在實際當中,只有 10%~20% 的最終用戶響應時間是花在從 Web 伺服器獲取 HTML 文檔並傳送到瀏覽器中的。如果希望能夠有效地減少頁面的響應時間,就必須關注剩下的 80%~90% 的最終用戶體驗。這 80%~90%的時間大部分花在等待組件(圖片、樣式表、腳本 等)的下載,還有一小部分時間花在解析 HTML、腳本和樣式表上面。


  2. 如果我們將後端的響應時間縮短一半,整體響應時間只能減少 5%~10%;而如果關注前端性能,同樣是將其響應時間減少一半,則整體響應時間可以減少 40%~45%。改進前端通常只需要較少的時間和資源;而減少後端延遲會帶來很大的改動,比如重新設計架構啥的,這些改動需要花數周或數月。