當前位置:首頁 » 網頁前端 » 前端瀏覽器優化
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端瀏覽器優化

發布時間: 2022-06-30 12:08:53

『壹』 如何進行前端優化

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. 合理使用規則,避免過度優化

性能優化主要分為兩類:

    • 載入時優化

    • 運行時優化

『貳』 前端面試時問到:怎麼解決瀏覽器兼容性該怎麼回答比較好

IE6/IE7對FE當然很不友好,但專業的FE決不應該因為這兩個瀏覽器難處理就不處理了。假如用戶需要,我的目標是在力所能及的情況下為用戶提供最好的前端展現。兼容性的問題從來都不只是IE6/7的問題,各個手機、瀏覽器、版本的兼容性同樣有各種各樣的問題,比IE奇葩多了。我的經驗是,每遇到一個坑爹問題,做這么幾件事:確認觸發場景,什麼瀏覽器、版本、什麼情況下會出現這個問題,做到穩定復現;找到問題原因,為什麼會出現這樣的問題(網上搜、自己琢磨甚至郵件問相應公司開發者等等都是可行的);確定解決法,有沒有什麼框架級的解決法,總之是定規范,避免類似問題;比如不使用某些屬性;用某種布局方法規避一些問題等等;有沒有什麼臨時的法可以快速繞過去?不是每次都有時間搞框架級的法來著。怎麼hack過去把這些都積累起來,就會有用處。不要想著IE6、7沒了就不用考慮瀏覽器兼容性問題,chrome/firefox、webkit的各種版本,手機的各種瀏覽器、各種終端都要處理瀏覽器兼容性問題,恩,對,偶爾還有flash來著。兼容各種終端、兼容各種解析度、兼容瀏覽器都是兼容性問題,這是FE的命,得認。抱著讓用戶有最好體驗的想法去做,收獲更大。

『叄』 前端開發 怎麼解決瀏覽器的兼容問題

一般兼容IE8和主流瀏覽器,IE8不支持css3新特性,主流瀏覽器你要了解它的DOM的差異