瀏覽器渲染原理

渲染原理 & 如何優(yōu)化

瀏覽器渲染過程

1. 根據(jù)HTML構(gòu)建HTML樹 (DOM)
2. 根據(jù)CSS構(gòu)建CSS樹(CSSOM)
3. 將兩棵樹合并成一棵渲染樹(render tree)
4. layout 布局 (文檔流 \ 盒模型 \ 計(jì)算大小和位置 )
5. Paint 繪制 (把邊框色 \ 文字色\ 陰影等畫出來)
6. compose合成 (根據(jù)層疊關(guān)系展示畫面)

CSS渲染過程依次包括 布局 > 繪制 > 合成
其中 [布局] 和 [繪制] 可能省略
CSS Triggers 此網(wǎng)站查看標(biāo)簽觸發(fā)了什么流程

CSS簡(jiǎn)介

1.CSS是什么?

CSS: Cascading Style sheet ( 層疊樣式表或級(jí)聯(lián)樣式表 )
是一種樣式設(shè)置規(guī)則，用于控制頁面的外觀的樣式

2.為什么使用CSS?

實(shí)現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊(duì)開發(fā)樣式復(fù)用，便于網(wǎng)站后期維護(hù)頁面的精確控制。

3.CSS作用

頁面外觀美化, 布局和定位

基本用法

1.CSS語法

選擇器:要修飾的對(duì)象(東西)
樣式名:修飾對(duì)象的每個(gè)樣式
樣式值:樣式的取值

注意:多個(gè)樣式之間以分號(hào)隔開，樣式名和樣式值之間以冒號(hào)隔開

2.CSS引用方式

有三種方式: 內(nèi)部樣式、行內(nèi)樣式、外部樣式

2.1 內(nèi)部樣式

也稱為內(nèi)嵌樣式，在頁面頭部通過style標(biāo)簽定義
對(duì)當(dāng)前頁面所有符合樣式選擇器的標(biāo)簽起作用

2.2 行內(nèi)樣式

也稱為嵌入樣式，使用HTML標(biāo)簽的style屬性來定義
只對(duì)設(shè)置style屬性的標(biāo)簽起作用
注意:幾乎所有HTML標(biāo)簽都具有style屬性

2.3 外部樣式

使用單獨(dú)的css文件來定義，然后在頁面中使用link標(biāo)簽或@import指令來引入
使用link標(biāo)簽鏈接外部樣式表(推薦)
使用@import指令導(dǎo)入外部樣式表

選擇器

1.基礎(chǔ)選擇器

1.1 標(biāo)簽選擇器

也稱為元素選擇器，以HTML標(biāo)簽的名字作為樣式應(yīng)用依據(jù)

1.2 類選擇器

使用自定義名稱，以.作為前綴，然后通過HTML標(biāo)簽的class屬性值作為依據(jù)

注意事項(xiàng):

同時(shí)調(diào)用多個(gè)類選擇器，以空格隔開, 類選擇器不能以數(shù)字開頭
注意:幾乎所有的HTML標(biāo)簽具有class屬性

1.3 ID選擇器

使用自定義名稱，以#作為前綴，然后通過HTML標(biāo)簽的id屬性進(jìn)行名稱匹配
以標(biāo)簽的id屬性值作為樣式的應(yīng)用依據(jù)，一對(duì)一的關(guān)系

注意:幾乎所有的HTML標(biāo)簽都具有id屬性，且id的值必須唯一

2.復(fù)雜選擇器

2.1 復(fù)合選擇器

標(biāo)簽選擇器和類選擇器、標(biāo)簽選擇器和ID選擇器，一起使用

必須同時(shí)滿足兩個(gè)條件才能應(yīng)用樣式

2.2 組合選擇器

也稱為集體聲明

將多個(gè)具有相同樣式的選擇器放在一起聲明，使用逗號(hào)隔開

2.3 嵌套選擇器

在某個(gè)選擇器內(nèi)再設(shè)置選擇器，通過空格隔開

只有滿足層次關(guān)系最里層選擇器的標(biāo)簽才能應(yīng)用樣式

注意:使用空格不區(qū)分父子還是后代，表示的后代，使用>表示的是父子關(guān)系才可以

2.4 偽類選擇器

根據(jù)不同的狀態(tài)顯示不同的樣式，一般多用于a標(biāo)簽，即超鏈接

四種狀態(tài):

link :未訪問的鏈接
visited:已訪問過的鏈接
hover :鼠標(biāo)移動(dòng)到a標(biāo)簽上，即懸浮在鏈接上
active :選定的鏈接，被激活

注意:書寫順序:link–>visited–>hover–>active

2.5 偽元素選擇器

first-letter:對(duì)應(yīng)元素內(nèi)容中的第一個(gè)字符

first-line:對(duì)應(yīng)元素內(nèi)容中的第一行

after:配合content屬性使用，在指定元素后面增加內(nèi)容

before:配合content屬性使用，在指定元素前面增加內(nèi)容

選擇器的優(yōu)先級(jí)

1.優(yōu)先級(jí)

行內(nèi)樣式>ID選擇器>類選擇器>標(biāo)簽選擇器

原因:首先加載標(biāo)簽選擇器，再加載類選擇器，然后再加載ID選擇器，最后加載行內(nèi)樣式

后加載的樣式會(huì)覆蓋最先加載的同名樣式

2.內(nèi)、外部樣式加載順序

就近原則

原因:按照書寫順序，在同優(yōu)先級(jí)的前提下，后加載的會(huì)覆蓋先加載的同名樣式，所以離得越近越優(yōu)先

3.!important

可以使用!important使某個(gè)樣式屬性具有最高的優(yōu)先級(jí)

常用CSS樣式屬性

1.字體屬性

定義字體相關(guān)的樣式

1.1 font-size

取值:

inherit 繼承，默認(rèn)從父標(biāo)簽繼承字體大小(默認(rèn)值)，所有的css屬性默認(rèn)值都為inherit
HTML根元素默認(rèn)字體大小是16px,也稱為基礎(chǔ)字體大小

px: 像素pixel, chrome瀏覽器不支持12px以下的字體大小，其他瀏覽器沒問題
%百分比 :相對(duì)于父標(biāo)簽的字體的大小的百分比

em 倍數(shù): 相對(duì)于父標(biāo)簽字體大小的倍數(shù)

1.2 font-weight

取值:

normal 普通
bold 粗體
自定義值 (400 normal 700 bold)

1.3 font-family

一般建議寫3種字體(首選、其次、備用)，以逗號(hào)隔開

1.4 font-style

取值:

normal 普通
italic 斜體

1.5 font

簡(jiǎn)寫屬性: font:font-style|font-weight|font-size|line-height|font-family

必須按照特定的順序書寫

2.文本屬性

顏色取值:四種寫法

1. 顏色名稱，使用英文單詞

2. 16進(jìn)制的RGB，#RRGGBB

#CCCCCC----->#ccc
#FF0000----->#F00
#FF7300----->無法縮寫
注意:不區(qū)分大小寫

3. rgb函數(shù)，rgb(red,green,blue)

每個(gè)顏色的取值范圍，[0-255]

rgb(255,0,0)---->紅色

rgb(0,255,0)---->綠色

rgb(0,0,255)---->藍(lán)色

4. rgba函數(shù):rgba(red,green,blue,alpha)

可以設(shè)置透明度，alpha取值范圍[0,1],0表示完全透明，1完全不透明

rgba(255,0,0,1);----->純紅

rgba(255,0,0,0.5);----->紅色半透明

3.背景屬性

3.1 background-color

取值:transparent(透明)

3.2 background-image

必須使用url()方式指定圖片的路徑
如果是在css文件中使用相對(duì)路徑，此時(shí)是相對(duì)于css文件，而不是html文件

3.3 background-repeat

取值:repeat(默認(rèn))、no-repeat、repeat-y、repeat-x

3.4 background-position

默認(rèn)背景圖片顯示左上角

取值:

關(guān)鍵字top、bottom、left、right、center
坐標(biāo)，左上角(0,0)坐標(biāo)，向右為x正方向，向下為y正方向
CSS雪碧圖，即CSS Sprites，也稱為CSS精靈，是一種css圖像合并技術(shù)
含義:將網(wǎng)頁許多非常小的圖標(biāo)/圖片整合在一張大圖中，當(dāng)訪問該頁面的時(shí)候只需要下載一次，可以減少訪問服務(wù)器的次數(shù)，提高性能

原理:使用background-position進(jìn)行背景定位，定位出背景圖片的位置

3.5 background-attachment

取值:scroll(默認(rèn)值)、fixed固定不動(dòng)

3.6 background

簡(jiǎn)寫屬性:background:background-color|background-image|background-repeat|background-position

書寫順序是沒有要求

4.顯示相關(guān)

4.1 display

通過display屬性設(shè)置元素是否顯示，以及是否獨(dú)占一行

常用取值:

注意:
行級(jí)元素默認(rèn)是無法設(shè)置寬和高，可以為行級(jí)元素設(shè)置display:inline-block，然后就可以設(shè)置寬和高了

4.2 布局技巧

左右布局

如果有以下html結(jié)構(gòu)，設(shè)置左右兩欄布局

<div class="parent clearfix">
    <div class="leftChild"></div>
    <div class="rightChild"></div>
</div>

設(shè)置浮動(dòng)

左右布局常用的方法就是為子元素設(shè)置浮動(dòng)，然后在其父元素上使用clearfix類清除浮動(dòng)。示例代碼如下：

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}
.leftChild,
.rightChild{
    float:left;
}

設(shè)置position絕對(duì)定位

為父元素設(shè)置position:relative; 為子元素設(shè)置position:absolute 。示例代碼如下：

.parent{
  position:relative;
}
.leftChild{
  position:absolute;
  left:0;
  top:0;
}
.rightChild{
  position:absolute;
  left:50%;
  top:0;
}

左中右布局

左中右布局主要方法也是浮動(dòng)或者絕對(duì)定位，不過可以分情況選擇其一使用甚至結(jié)合使用。

水平居中

內(nèi)聯(lián)元素（比如文本和鏈接）
在塊級(jí)父容器中讓內(nèi)聯(lián)元素水平居中，只需設(shè)置 text-align: center;

塊級(jí)元素
讓單個(gè)塊級(jí)元素水平居中的方法：先設(shè)置塊級(jí)元素的 width，賦予一個(gè)寬度；然后設(shè)置塊級(jí)元素的 margin: 0 auto;

多個(gè)塊級(jí)元素
如果要讓多個(gè)塊級(jí)元素在同一水平線上居中，那么可以修改它們的 display: inline-block; 或者父級(jí)容器的 display: flex;

<main class="inline-block-horizon-center">
    <div>I'm an element</div>
    <div>I'm an element</div>
    <div>I'm an element</div>
</main>
<main class="flex-horizon-center">
    <div>I'm an element</div>
    <div>I'm an element</div>
    <div>I'm an element</div>
</main>
/* CSS */
*{box-sizing: border-box;}
main div {
   max-width: 200px;
   border: 1px solid red;
}
.inline-block-horizon-center {
    text-align: center;
}
.inline-block-horizon-center div {
    display: inline-block;
    vertical-align: middle/top;
}
.flex-horizon-center {
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
} 
.flex-horizon-center div{
  margin:0 20px;
   white-space:nowrap;
}

4.3 visibility

也可以通過visibility屬性設(shè)置元素是否顯示

常用取值:

4.4 diplay & visibility 兩者的區(qū)別

display隱藏時(shí)候不再占據(jù)頁面的空間，后面的元素會(huì)占用其位置
visibility隱藏時(shí)候會(huì)占據(jù)頁面的空間，位置還保留在頁面中，只是不顯示

5.列表屬性

5.1 list-style-type

取值:none、disc、circle、square、decimal

5.2 list-style

簡(jiǎn)寫屬性:list-style:list-style-type|list-style-image|list-style-position

書寫順序沒有要求

6.表格屬性

border-collapse 表格中相鄰的邊框是否合并(折疊)為單一邊框

取值:seperate(分離、默認(rèn)值)、collapse(合并)

盒子模型

1.概念

盒子模型是網(wǎng)頁布局的基礎(chǔ)，將頁面中所有的元素看成是一個(gè)盒子，盒子都包含以下幾個(gè)屬性:

width 寬度

height 高度

border 邊框

padding 內(nèi)邊距

margin 外邊距

2.盒子屬性

2.1 border

表示的盒子的邊框

分為四個(gè)方向:

border-top、border-right、border-bottom、border-left

每個(gè)邊都包含三種樣式:;

顏色color、粗細(xì)width、樣式style

border-top-color、border-top-width、border-top-style

border-right-color、border-right-width、border-right-style

border-bottom-color、border-bottom-width、border-bottom-style

border-left-color、border-left-width、border-left-style

border-style的取值:

solid實(shí)線、dashed虛線、dotted點(diǎn)狀線、double雙實(shí)線、inset內(nèi)嵌3D線、outset外嵌3D線

簡(jiǎn)寫，三種方式:

按方向簡(jiǎn)寫

border-top、border-right、border-bottom、border-left

書寫順序:width style color

按樣式簡(jiǎn)寫

border-color、border-style、border-width

必須按順時(shí)針方向書寫，即上、右、下、左，同時(shí)可以縮寫

border-width:2px -->四個(gè)邊都是2px

border-width:2px 4px -->上下2px ,左右4px

border-width:2px 5px 10px -->上2px 左右5px 下10px

border-width:2px 3px 4px 5px -->上2px 右3px 下4px 左5px

border終極簡(jiǎn)寫

如果四個(gè)邊都一樣，border:width stylle color

2.2 padding

表示盒子的內(nèi)邊距，即內(nèi)容與邊框之間的距離
同樣也分為四個(gè)方向，也可以簡(jiǎn)寫(按順時(shí)針方向)

2.3 margin

表示盒子的外邊距，即盒子與盒子之間的距離
同樣也分為四個(gè)方向，也可以簡(jiǎn)寫

3 其他

3.1 元素所占的空間

頁面中的元素所占空間:
寬=width+左右padding+左右margin+左右border
高=height+左右padding+上下margin+左右border

CSS transform

transform 屬性允許你旋轉(zhuǎn)，縮放，傾斜或平移給定元素。這是通過修改CSS視覺格式化模型的坐標(biāo)空間來實(shí)現(xiàn)的。

transform 常用的功能

• transform: translate(120px, 50%); //平移
• transform: scale(2, 0.5); //縮放,用得少,會(huì)模糊
• transform: rotate(0.5turn);
• transform: skew(30deg, 20deg);

transform 經(jīng)驗(yàn)

• 一盤需要配合transition過渡
• inline元素不支持transform,需要先變成block

讓demo絕對(duì)居中:

#deomo{
left: 50%;
top: 50%;
transform:translate(-50%,-50%)
}

CSS 動(dòng)畫的兩種做法（transition 和 animation）

transition

補(bǔ)充中間幀

• transition 屬性名 時(shí)長(zhǎng) 過度放松 延遲
• transition all 1s 默認(rèn)是ease-in-out ms毫秒

transition: left 200ms linear
transition: left 200ms , top 400ms;
transition: all 200ms;

過度方式:

常用取值:

• linear 動(dòng)畫會(huì)以恒定的速度從初始狀態(tài)過渡到結(jié)束狀態(tài)。
  ease 它在開始時(shí)加速地更快，但在接近中間中，加速已經(jīng)開始變慢了。
  ease-in 動(dòng)畫開始時(shí)緩慢，然后逐步加速，知道達(dá)到最后狀態(tài)，動(dòng)畫突然停止。
  ease-out 動(dòng)畫開始很快，然后逐漸減慢，直到最終狀態(tài)。
  ease-in-out 使用這個(gè)定時(shí)函數(shù)，動(dòng)畫開始的行為類似于 ease-in 函數(shù)，動(dòng)畫結(jié)束時(shí)的行為類似于ease-out函數(shù)。

不常用:

• step-start 使用這個(gè)定時(shí)函數(shù)，動(dòng)畫會(huì)立刻跳轉(zhuǎn)到結(jié)束狀態(tài)，并一直停留在結(jié)束狀態(tài)直到動(dòng)畫結(jié)束。
  step-end 使用這個(gè)定時(shí)函數(shù)，動(dòng)畫會(huì)立刻跳轉(zhuǎn)到結(jié)束狀態(tài)，并一直停留在結(jié)束狀態(tài)直到動(dòng)畫結(jié)束。
  cubic-bezier 立方貝塞爾, 這些曲線是連續(xù)的，一般用于動(dòng)畫的平滑變換，也被稱為緩動(dòng)函數(shù)

語法: cubic-bezier(x1, y1, x2, y2) , 比如 linear 就可以寫成 cubic-bezier( 0, 0, 1, 1)

注意

• 不是所以屬性都能過度 , dispaly: none 變成 block 沒法過度
• opacity 只是看不見,但還占著位置, visibility:hidden=>visible 也是一樣效果
• 背景色是能過度的
• 過渡必須要有起始, 如果中間要有過度 轉(zhuǎn)折 用 animation 或者2次transform
  2次transform的例子 | animation的例子

animation 動(dòng)畫

用@keyframes , 2種寫法: from to 和 百分比%

@keyframes xxx{
  from{
    transform:translateX(0%)
  }
  to{
    transform:translateX(100%)
  }
}

@keyframes xxx{
  0% { top:0; left:0; }
  30% { top:50px; }
  100% { left:100px; }
}

設(shè)置好了關(guān)鍵幀，就可以設(shè)置animation屬性了，animation也是一個(gè)符合屬性，可以簡(jiǎn)寫，語法如下：
參考網(wǎng)文

紅心案例

animation: 動(dòng)畫名 | 時(shí)長(zhǎng) | 過渡方式 | 延遲 | 次數(shù) | 方向 | 填充模式 | 是否暫停

• 動(dòng)畫名: 用來調(diào)用@keyframes定義好的動(dòng)畫，與@keyframes定義的動(dòng)畫名稱一致
• 時(shí)長(zhǎng):1s 或者 10000ms
• 過渡方式: 跟transition一樣取值: ease-in | linear ... 默認(rèn)是 ease
• 次數(shù): 3 或 2.4 或 infinite 無限
• 方向: reverse | alternate ,動(dòng)畫過去過來交替,很適合做加載動(dòng)畫
• 填充模式: none | forwards | backwards | both , forwards常用, 動(dòng)效過去后不回來了
• 是否暫停: paused | running