前端性能優化―前端工程師不得不說的痛

2024-08-30 08:35:00

字體：大中小

來源：轉載

供稿：網友

前言
在上一篇文章《我的css架構理念》中，承蒙園內的朋友們抬愛，竟然一路被推薦，讓我這小小一枚前端攻城獅既意外又興奮進而惶恐。惶恐的是資歷實在有限，知識實在匱乏，相當害怕誤人子弟。此真心話！但接下來我依然會堅持有時間就寫寫文章，既能總結，又能學到新知識，還能分享給諸位，我認為，分享---是件功德無量的事，互聯網不就是因此而絢麗多彩嘛！

上篇文章的留言里有好多朋友是對我css架構就http請求的問題提出質疑，我本想回答的，但不知道從何說起。前端性能方面的知識我了解得并不深入，囫圇吞棗地看過一兩本重構的書、喜歡查查資料，看看一些大牛寫的文章，覺得人家那么做有道理了，就搬過來用，林林總總的做些總結，于是有了此文。都不是什么新東西，但是因為小知識點太多，希望這里面的東西有你想要的答案吧。

前端性能優化--前端工程師不得不說的痛
1.html、css、js三者相分離。分離得徹底點！為什么這三者要分離，相信大家都明白，不多說。
2.css的導入方式。css用link而不用@import，因為在 IE 中 @import 指令等同于把 link 標記寫在 HTML 的底部，延長css的載入時間，還可能出現文件下載次序被更改的情況。
3.理性對待jquery。jquery讓我們“write less,do more”，它有太多優勢：強大的選擇器、DOM操作的完美封裝、完善的Ajax、良好的兼容性處理。但是，我們是否就此離不開它呢？我覺得應該根據需求，根據業務邏輯來。一個頁面如果只需要幾行或幾十行js代碼可以搞定的效果，為什么要用jquery？讓頁面先加載個jquery.js，再書寫自己的代碼？沒必要吧。
4.合理布局頁面的內容。DOM的加載順序是由上而下的，遇到css，加載css，遇到js，停滯下來，加載并解析js。在布局頁面的時候，把主體內容優先顯示，把重要內容靠上布局，讓瀏覽器優先解析，是種較好的方案。　
5.js的導入方式。《javascript王者歸來》里有對js的導入方式進行優劣對比。我個人認為，在不考慮js代碼重用及維護的前提下(但是往往這點成為我最重要的衡量指標)，把具有重要業務模塊的js代碼置于title里，把次要的具有操作效果的js代碼置于DOM相對應的對象之后。而這樣做的理論依據即DOM的加載順序。上面那話不好理解，舉例來說：