浏览器渲染原理

渲染原理 & 如何优化

浏览器渲染过程

1. 根据HTML构建HTML树 (DOM)
2. 根据CSS构建CSS树(CSSOM)
3. 将两棵树合并成一棵渲染树(render tree)
4. layout 布局 (文档流 \ 盒模型 \ 计算大小和位置 )
5. Paint 绘制 (把边框色 \ 文字色\ 阴影等画出来)
6. compose合成 (根据层叠关系展示画面)

CSS渲染过程依次包括 布局 > 绘制 > 合成
其中 [布局] 和 [绘制] 可能省略
CSS Triggers 此网站查看标签触发了什么流程

CSS简介

1.CSS是什么?

CSS: Cascading Style sheet ( 层叠样式表或级联样式表 )
是一种样式设置规则，用于控制页面的外观的样式

2.为什么使用CSS?

实现内容与样式的分离，方便团队开发样式复用，便于网站后期维护页面的精确控制。

3.CSS作用

页面外观美化, 布局和定位

基本用法

1.CSS语法

选择器:要修饰的对象(东西)
样式名:修饰对象的每个样式
样式值:样式的取值

注意:多个样式之间以分号隔开，样式名和样式值之间以冒号隔开

2.CSS引用方式

有三种方式: 内部样式、行内样式、外部样式

2.1 内部样式

也称为内嵌样式，在页面头部通过style标签定义
对当前页面所有符合样式选择器的标签起作用

2.2 行内样式

也称为嵌入样式，使用HTML标签的style属性来定义
只对设置style属性的标签起作用
注意:几乎所有HTML标签都具有style属性

2.3 外部样式

使用单独的css文件来定义，然后在页面中使用link标签或@import指令来引入
使用link标签链接外部样式表(推荐)
使用@import指令导入外部样式表

选择器

1.基础选择器

1.1 标签选择器

也称为元素选择器，以HTML标签的名字作为样式应用依据

1.2 类选择器

使用自定义名称，以.作为前缀，然后通过HTML标签的class属性值作为依据

注意事项:

同时调用多个类选择器，以空格隔开, 类选择器不能以数字开头
注意:几乎所有的HTML标签具有class属性

1.3 ID选择器

使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性值作为样式的应用依据，一对一的关系

注意:几乎所有的HTML标签都具有id属性，且id的值必须唯一

2.复杂选择器

2.1 复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

2.2 组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

2.3 嵌套选择器

在某个选择器内再设置选择器，通过空格隔开

只有满足层次关系最里层选择器的标签才能应用样式

注意:使用空格不区分父子还是后代，表示的后代，使用>表示的是父子关系才可以

2.4 伪类选择器

根据不同的状态显示不同的样式，一般多用于a标签，即超链接

四种状态:

link :未访问的链接
visited:已访问过的链接
hover :鼠标移动到a标签上，即悬浮在链接上
active :选定的链接，被激活

注意:书写顺序:link–>visited–>hover–>active

2.5 伪元素选择器

first-letter:对应元素内容中的第一个字符

first-line:对应元素内容中的第一行

after:配合content属性使用，在指定元素后面增加内容

before:配合content属性使用，在指定元素前面增加内容

选择器的优先级

1.优先级

行内样式>ID选择器>类选择器>标签选择器

原因:首先加载标签选择器，再加载类选择器，然后再加载ID选择器，最后加载行内样式

后加载的样式会覆盖最先加载的同名样式

2.内、外部样式加载顺序

就近原则

原因:按照书写顺序，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离得越近越优先

3.!important

可以使用!important使某个样式属性具有最高的优先级

常用CSS样式属性

1.字体属性

定义字体相关的样式

1.1 font-size

取值:

inherit 继承，默认从父标签继承字体大小(默认值)，所有的css属性默认值都为inherit
HTML根元素默认字体大小是16px,也称为基础字体大小

px: 像素pixel, chrome浏览器不支持12px以下的字体大小，其他浏览器没问题
%百分比 :相对于父标签的字体的大小的百分比

em 倍数: 相对于父标签字体大小的倍数

1.2 font-weight

取值:

normal 普通
bold 粗体
自定义值 (400 normal 700 bold)

1.3 font-family

一般建议写3种字体(首选、其次、备用)，以逗号隔开

1.4 font-style

取值:

normal 普通
italic 斜体

1.5 font

简写属性: font:font-style|font-weight|font-size|line-height|font-family

必须按照特定的顺序书写

2.文本属性

颜色取值:四种写法

1. 颜色名称，使用英文单词

2. 16进制的RGB，#RRGGBB

#CCCCCC----->#ccc
#FF0000----->#F00
#FF7300----->无法缩写
注意:不区分大小写

3. rgb函数，rgb(red,green,blue)

每个颜色的取值范围，[0-255]

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

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

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

4. rgba函数:rgba(red,green,blue,alpha)

可以设置透明度，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文件中使用相对路径，此时是相对于css文件，而不是html文件

3.3 background-repeat

取值:repeat(默认)、no-repeat、repeat-y、repeat-x

3.4 background-position

默认背景图片显示左上角

取值:

关键字top、bottom、left、right、center
坐标，左上角(0,0)坐标，向右为x正方向，向下为y正方向
CSS雪碧图，即CSS Sprites，也称为CSS精灵，是一种css图像合并技术
含义:将网页许多非常小的图标/图片整合在一张大图中，当访问该页面的时候只需要下载一次，可以减少访问服务器的次数，提高性能

原理:使用background-position进行背景定位，定位出背景图片的位置

3.5 background-attachment

取值:scroll(默认值)、fixed固定不动

3.6 background

简写属性:background:background-color|background-image|background-repeat|background-position

书写顺序是没有要求

4.显示相关

4.1 display

通过display属性设置元素是否显示，以及是否独占一行

常用取值:

注意:
行级元素默认是无法设置宽和高，可以为行级元素设置display:inline-block，然后就可以设置宽和高了

4.2 布局技巧

左右布局

如果有以下html结构，设置左右两栏布局

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

设置浮动

左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例代码如下：

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

设置position绝对定位

为父元素设置position:relative; 为子元素设置position:absolute 。示例代码如下：

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

左中右布局

左中右布局主要方法也是浮动或者绝对定位，不过可以分情况选择其一使用甚至结合使用。

水平居中

内联元素（比如文本和链接）
在块级父容器中让内联元素水平居中，只需设置 text-align: center;

块级元素
让单个块级元素水平居中的方法：先设置块级元素的 width，赋予一个宽度；然后设置块级元素的 margin: 0 auto;

多个块级元素
如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display: inline-block; 或者父级容器的 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属性设置元素是否显示

常用取值:

4.4 diplay & visibility 两者的区别

display隐藏时候不再占据页面的空间，后面的元素会占用其位置
visibility隐藏时候会占据页面的空间，位置还保留在页面中，只是不显示

5.列表属性

5.1 list-style-type

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

5.2 list-style

简写属性:list-style:list-style-type|list-style-image|list-style-position

书写顺序没有要求

6.表格属性

border-collapse 表格中相邻的边框是否合并(折叠)为单一边框

取值:seperate(分离、默认值)、collapse(合并)

盒子模型

1.概念

盒子模型是网页布局的基础，将页面中所有的元素看成是一个盒子，盒子都包含以下几个属性:

width 宽度

height 高度

border 边框

padding 内边距

margin 外边距

2.盒子属性

2.1 border

表示的盒子的边框

分为四个方向:

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

每个边都包含三种样式:;

颜色color、粗细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实线、dashed虚线、dotted点状线、double双实线、inset内嵌3D线、outset外嵌3D线

简写，三种方式:

按方向简写

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

书写顺序:width style color

按样式简写

border-color、border-style、border-width

必须按顺时针方向书写，即上、右、下、左，同时可以缩写

border-width:2px -->四个边都是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终极简写

如果四个边都一样，border:width stylle color

2.2 padding

表示盒子的内边距，即内容与边框之间的距离
同样也分为四个方向，也可以简写(按顺时针方向)

2.3 margin

表示盒子的外边距，即盒子与盒子之间的距离
同样也分为四个方向，也可以简写

3 其他

3.1 元素所占的空间

页面中的元素所占空间:
宽=width+左右padding+左右margin+左右border
高=height+左右padding+上下margin+左右border

CSS transform

transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

transform 常用的功能

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

transform 经验

• 一盘需要配合transition过渡
• inline元素不支持transform,需要先变成block

让demo绝对居中:

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

CSS 动画的两种做法（transition 和 animation）

transition

补充中间帧

• transition 属性名 时长 过度放松 延迟
• transition all 1s 默认是ease-in-out ms毫秒

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

过度方式:

常用取值:

• linear 动画会以恒定的速度从初始状态过渡到结束状态。
  ease 它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。
  ease-in 动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。
  ease-out 动画开始很快，然后逐渐减慢，直到最终状态。
  ease-in-out 使用这个定时函数，动画开始的行为类似于 ease-in 函数，动画结束时的行为类似于ease-out函数。

不常用:

• step-start 使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。
  step-end 使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。
  cubic-bezier 立方贝塞尔, 这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数

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

注意

• 不是所以属性都能过度 , dispaly: none 变成 block 没法过度
• opacity 只是看不见,但还占着位置, visibility:hidden=>visible 也是一样效果
• 背景色是能过度的
• 过渡必须要有起始, 如果中间要有过度 转折 用 animation 或者2次transform
  2次transform的例子 | animation的例子

animation 动画

用@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; }
}

设置好了关键帧，就可以设置animation属性了，animation也是一个符合属性，可以简写，语法如下：
参考网文

红心案例

animation: 动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停

• 动画名: 用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致
• 时长:1s 或者 10000ms
• 过渡方式: 跟transition一样取值: ease-in | linear ... 默认是 ease
• 次数: 3 或 2.4 或 infinite 无限
• 方向: reverse | alternate ,动画过去过来交替,很适合做加载动画
• 填充模式: none | forwards | backwards | both , forwards常用, 动效过去后不回来了
• 是否暂停: paused | running