知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    怎么操作css才是最高效的,打造高性能css必看

    作者:佳明媽 來源:web前端開發 2016-09-07 人氣:
    怎么操作css才是最高效的,打造高性能css必看,要想打造高性能css,文章主要講的是js在操作css的時候,要盡量避免操作那些css屬性,因為這些屬性會導致頁面重繪。

    怎么操作css才是最高效的,打造高性能css必看,要想打造高性能css,要從瀏覽器如何渲染css來說起,文章主要講的是js在操作css的時候,要盡量避免操作那些css屬性,因為這些屬性會導致頁面重繪。

    瀏覽器是怎樣渲染一個頁面的?

    我們從瀏覽器渲染頁面的大概過程開始說起:

    1.由從服務器接收到的 HTML 形成 DOM(文檔對象模型)。

    2.樣式被加載和解析,形成 CSSOM(CSS 對象模型)。

    3.緊接著 DOM 和 CSSOM 創建了一個渲染樹,這個渲染樹是一些被渲染對象的集合( Webkit 分別叫它們”renderer”和”render object”,而在Gecko 引擎中叫”frame”)。除了不可見的元素(比如 head 標簽和一些有 display:none 屬性的元素),渲染樹映射了 DOM 的結構。在渲染樹中,每一個文本字符串都被當做一個獨立的 renderer。每個渲染對象都包含了與之對應的計算過樣式的DOM 對象(或者一個文本塊)。換句話說,渲染樹描述了 DOM 的直觀的表現形式。

    4.對每個渲染元素來說,它的坐標是經過計算的,這被叫做“布局(layout)”。瀏覽器使用一種只需要一次處理的“流方法”來布局所有元素(tables需要多次處理)。

    5.最后,將布局顯示在瀏覽器窗口中,這個過程叫做“繪制(painting)”。

    頁面重繪

    當在頁面上修改了一些不需要改變定位的樣式的時候(比如background-color,border-color,visibility),瀏覽器只會將新的樣式重新繪制給元素(這就叫一次“重繪”或者“重新定義樣式”)。

    頁面重排

    當頁面上的改變影響了文檔內容、結構或者元素定位時,就會發生重排(或稱“重新布局”)。重排通常由以下改變觸發:

    ●DOM 操作(如元素增、刪、改或者改變元素順序)。

    ●內容的改變,包括 Form 表單中文字的變化。

    ●計算或改變 CSS 屬性。

    ●增加或刪除一個樣式表。

    ●改變”class”屬性。

    ●瀏覽器窗口的操作(改變大小、滾動窗口)。

    ●激活偽類(如:hover狀態)。

    瀏覽器如何優化渲染?

    瀏覽器盡最大努力限制重排的過程僅覆蓋已更改的元素的區域。舉個例子,一個 position 為 absolue 或 fixed 的元素的大小變化只影響它自身和子孫元素,而對一個 position 為 static 的元素做同樣的操作就會引起所有它后面元素的重排。

    另一個優化就是當運行一段Jjavascript 代碼的時候,瀏覽器會將一些修改緩存起來,然后當代碼執行的時候,一次性的將這些修改執行。舉例來說,這段代碼會觸發一次重繪和一次重排:

    var $body = $('body');

    $body.css('padding', '1px'); // 重排, 重繪

    $body.css('color', 'red'); // 重繪

    $body.css('margin', '2px'); // 重排, 重繪

    // 實際上只有一次重排和重繪被執行

    如上面所說,訪問一個元素的屬性會進行一次強制重排。如果我們給上面的代碼加上一行讀取元素屬性的代碼,這個情況就會出現:

    var $body = $('body');

    $body.css('padding', '1px');

    $body.css('padding'); // 這里讀取了一次元素的屬性,一次強制重排就會發生。

    $body.css('color', 'red');

    $body.css('margin', '2px');

    上面這段代碼的結果就是,進行了兩次重排。因此,為了提高性能,你應該講讀取元素屬性的代碼組織在一起(細節的例子可以看JSBin上的代碼)。

    有一種情況是必須觸發一次強制重排的。例如:給元素改變同一個屬性兩次(比如margin-left),一開始設置100px,沒有動畫,然后通過動畫的形式將值改為50px。具體可以看例子,當然,我在這里會講更多的細節。

    我們從一個有transition的CSS class開始:

    .has-transition {

    -webkit-transition: margin-left 1s ease-out;

    -moz-transition: margin-left 1s ease-out;

    -o-transition: margin-left 1s ease-out;

    transition: margin-left 1s ease-out;

    }

    然后進行實現:

    //我們的元素默認有"has-transition"屬性

    var $targetElem = $('#targetElemId');

    //刪除包含transition的class

    $targetElem.removeClass('has-transition');

    // 當包含transition的class已經沒了的時候,改變元素屬性

    $targetElem.css('margin-left', 100);

    // 再將包含transition的class添加回來

    $targetElem.addClass('has-transition');

    // 改變元素屬性

    $targetElem.css('margin-left', 50);

    上面的實現沒有按照期望的運行。所有的修改都被瀏覽器緩存了,只在上面這段代碼的最后才會執行。我們需要的是一次強制重排,我們可以通過進行以下修改來實現:

    //刪除包含transition的class

    $(this).removeClass('has-transition');

    // 改變元素屬性

    $(this).css('margin-left', 100);

    //觸發一次強制重排,從而使變化了的class或屬性能夠立即執行。

    $(this)[0].offsetHeight; // offsetHeight僅僅是個例子,其他的屬性也可以奏效。

    // 再將包含transition的class添加回來

    $(this).addClass('has-transition');

    // 改變元素屬性

    $(this).css('margin-left', 50);

    現在這段代碼如我們所期望的運行了。

    實際的優化建議

    匯總了一些有用的信息,我建議以下幾點:

    ●創建合法的 HTML 和 CSS ,別忘了制定文件編碼,Style 應該寫在 head 標簽中,script 標簽應該加載 body 標簽結束的位置。

    試著簡化和優化 CSS 選擇器(這個優化點被大多數使用 CSS 預處理器的開發者忽略了)將嵌套層數控制在最小。
    以下是 CSS 選擇器的性能排行(從最快的開始):

    1.ID選擇器:#id

    2.class選擇器: .class

    3.標簽: div

    4.相鄰的兄弟元素:a + i

    5.父元素選擇器: ul > li

    6.通配符選擇器: *

    7.偽類和偽元素: a:hover ,你應該記住瀏覽器處理選擇器是從右向左的,這也就是為什么最右面的選擇器會更快——#id或.class。

    div * {...} // bad

    .list li {...} // bad

    .list-item {...} // good

    #list .list-item {...} // good

    1.在你的腳本中,盡可能的減少 DOM 的操作。把所有東西都緩存起來,包括屬性和對象(如果它可被重復使用)。進行復雜的操作的時候,最好操作一個“離線”的元素(“離線”元素的意思是與 DOM 對象分開、僅存在內存中的元素),然后將這個元素插入到 DOM 中。

    2.如果你使用 jQuery,遵循jQuery 選擇器最佳實踐

    3.要改變元素的樣式,修改“class”屬性是最高效的方式之一。你要改變 DOM 樹的層次越深,這一條就越高效(這也有助于將表現和邏輯分開)。

    4.盡可能的只對 position 為 absolute 或 fix 的元素做動畫。

    5.當滾動時禁用一些復雜的 :hover 動畫是一個很好的主意(例如,給 body 標簽加一個 no-hover 的 class)關于這個主題的文章。

    ↓ 查看全文

    怎么操作css才是最高效的,打造高性能css必看由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    怎么操作css才是最高效的,打造高性能css必看-最新評論

    老子是皇帝在线客服 日本三级片电影播放 四川熊猫麻将官方网站 陕西十一选五开奖结 顶呱刮麻辣 吉林微乐长春麻将 广东十一选五*软件 26选5今晚开奖 一码大公开免费送73期 黑桃棋牌官网唯一下载 秒速赛车稳赚玩法 配资平台哪个好推荐股牛网 上海11选五今日开奖结果 幸运赛车计划 对麻将一点不懂 怎么学 广东老11选5开奖结果 体球比分网
    Warning: Unknown: write failed: No space left on device (28) in Unknown on line 0

    Warning: Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (/www/web/www_51xuediannao_com/public_html/temp) in Unknown on line 0