国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端性能優化從css說起

shiyang6017 / 1691人閱讀

摘要：放在中減少引起和接下來我們再來討論一下圖片與雪碧圖或精靈，在網頁中我們會用到很多圖標，如果每一個圖標是多帶帶的一張圖片，那網頁加載的時候，就會有多個請求去請求圖片，顯而易見會影響網頁性能，所以要采取方法對網頁中圖標使用進行優化處理。

???????我們都知道性能對于一個網站來說相當重要，以至于很多公司都會專門招聘人員優化網站性能，網上關于探討網站性能優化的文章也非常多。性能是什么呢？簡單來說，就是用戶打開網站到網頁完全呈現在用戶面前所耗費的時間，研究表明：用戶最滿意的打開網頁時間是2-5秒，如果等待超過10秒，99%的用戶會關閉這個網頁。
???????影響網站的性能有多重因素，我們就著重從前端方面來進行探討，首先我們先了解一下網頁的解析過程。

主要過程有：1.解析HTML構建DOM樹 ；2.解析css構建CSSOM樹 ；3.根據DOM樹和CSSOM來構造 Rendering Tree（渲染樹）；4.Layout頁面位置計算布局； 5.Paint繪制；css的加載不會阻塞DOM樹的解析，但是會阻塞DOM樹的渲染和后面js語句的執行，所以說才有了優化css的必要性，針對這一問題，我們可以從以下方面進行考慮優化。

1.結合構建工具（webpack,gulp...），對css文件進行打包壓縮，抽離公共樣式，刪除多余的樣式、空格、注釋。
2.減少樣式選擇器的層級，減少樣式匹配時間。        
3.盡量使用class選擇器，增強樣式的復用；

???????css中還有兩個重要的知識點repaint(重繪)和reflow(回流)，repaint主要是針對某一個DOM元素進行的重繪，reflow則是回流，針對整個頁面的重排，我們都知道這兩個特性都會消耗網頁性能，他們的觸發場景也是不同的。不涉及任何DOM元素排版問題的變動為repaint，例如元素的color/text-align/text-decoration等等屬性的變動，除上面所提到的DOM元素style修改基本為reflow，例如元素的任何涉及長、寬、行高、邊框、display等style的修改。很多時候我們是無法避免引起repaint和reflow，但是我們還是要盡量通過各種方法來減少引起這兩個特性,我們可以從以下方面進行考慮優化。

1.盡可能在DOM末梢通過改變class來修改元素的style屬性：盡可能的減少受影響的DOM元素。
2.避免設置多項內聯樣式：使用常用的class的方式進行設置樣式，以避免設置樣式時訪問DOM的低效率。
3.設置動畫元素position屬性為fixed或者absolute：由于當前元素從DOM流中獨立出來，因此受影響的只有當前元素，元素repaint。
4.犧牲平滑度滿足性能：動畫精度太強，會造成更多次的repaint/reflow，犧牲精度，能滿足性能的損耗，獲取性能和平滑度的平衡。
5.避免使用table進行布局：table的每個元素的大小以及內容的改動，都會導致整個table進行重新計算，造成大幅度的repaint或者reflow。改用div則可以進行針對性的repaint和避免不必要的reflow。
6.避免在CSS中使用運算式：expression、calc、等等，可能會造成多次repaint和reflow。
7.css放在head中,減少引起repaint和reflow;

???????接下來我們再來討論一下base64圖片與CssSprites（雪碧圖或css精靈），在網頁中我們會用到很多圖標，如果每一個圖標是多帶帶的一張圖片，那網頁加載的時候，就會有多個請求去請求圖片，顯而易見會影響網頁性能，所以要采取方法對網頁中圖標使用進行優化處理。
???????Css Sprites（雪碧圖）：將許多的小圖片整合到一張大圖片中，利用css中的background-image屬性，background-position屬性定位某個圖片位置，來達到在大圖片中引用某個部位的小圖片的效果。優點：減少網頁的http請求，提升網頁加載速度；合并多張小圖片，減少資源體積。缺點：前期需要處理圖片，增加工程量；不利于改動和維護。
???????base64編碼：base64是網絡上最常見的用于傳輸8Bit字節代碼的編碼方式之一，要求把每三個8Bit的字節轉換為四個6Bit的字節，Base64是網絡上最常見的用于傳輸8Bit字節代碼的編碼方式之一，通俗點來講就是將資源原本二進制形式轉成以64個字符基本單位，所組成的一串字符串。優點：減少http請求；圖片可以避免跨域問題。缺點：低版本IE不兼容；過多使用base64圖片會使得css過大，不利于css加載和解析；
???????在網頁開發中我們經常會在引入圖片，也會使用到上面兩種方法來優化處理網頁，他們有各自不同的使用場景。Css Sprites 主要針對一些不需要經常變動的小圖片，如表情，標志等，base64主要適用于小于幾k的圖片，圖片太大的話反而得不償失。
???????洋洋灑灑寫了一些關于css優化的東西，當然也汲取了前輩們的智慧，算是總結一下吧，我相信關于css的優化知識還有很多，不斷學習吧！！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100730.html

相關文章

  • 前端性能優化從css說起

    摘要：放在中減少引起和接下來我們再來討論一下圖片與雪碧圖或精靈，在網頁中我們會用到很多圖標，如果每一個圖標是單獨的一張圖片，那網頁加載的時候，就會有多個請求去請求圖片，顯而易見會影響網頁性能，所以要采取方法對網頁中圖標使用進行優化處理。 ???????我們都知道性能對于一個網站來說相當重要，以至于很多公司都會專門招聘人員優化網站性能，網上關于探討網站性能優化的文章也非常多。性能是什么呢？簡單...

    KoreyLee 評論0 收藏0

  • 前端優化 - 收藏集 - 掘金

    摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

    VincentFF 評論0 收藏0

  • 用 Service Worker 實現前端性能優化

    摘要：導入谷歌提供的庫注冊成功可以進行下一步的操作立即激活跳過等待下面用官網給出的幾張圖解釋一下所提供的幾種緩存策略而它們正好能滿足上文我們自己用代碼所實現的效果。接下來讓我們使用去實現上文優化前端性能的緩存策略。 前言 : 說起前端性能優化, 我們首先想到的可能就是用 Gulp 、Webpack 之類的自動化構建工具對 HTML、CSS 、JS 代碼進行壓縮，同時優化圖片資源。再者就是使用...

    yuanxin 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

    mikasa 評論0 收藏0

發表評論

0條評論

shiyang6017

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<