一 渲染引擎
- 影响解析生成DOM树的时间——标签数量和嵌套层级
- 影响到狗偶见渲染树的性能——样式匹配方式和布局与绘制的关系
在选择器的右边尽量使用具有唯一性的选择器，而不要使用标签选择器这类容易匹配的选择器
布局和绘制是按先后顺序执行，重新布局一定会进行重新绘制。而重新绘制不一定引起重新布局。
渲染页面大致流程
- 解析HTML标签并生成DOM树
- 解析CSS规则并生成CSSOM树
- 将DOM树和CSSOM树合并成一个渲染树
- 根据渲染树来进行布局
- 对渲染树上的节点进行绘制
前端优化性能不只涉及渲染引擎，就渲染引擎而言，至少可以做到以下几点
- 避免编写复杂的DOM结构，减少DOM层级，从而可以加快DOM树的构建
- 避免编写复杂的CSS样式，从而可以加快CSSOM树的构建
- 避免在选择器右边使用通用的选择器，加快浏览器匹配样式规则的速度
- 修改样式的时候避免引起重新布局
二 CSS盒模型
盒模型分为两种，一种是标准盒模型（对应CSS属性的box-sizing:content-box）,另一种是IE盒模型（对应CSS属性box-sizing:border·-box）。
区别体现在设置和模型宽高的时候，标准盒模型的宽高指的是content，而IE盒模型则包括content，padding和border。
CSS3在布局方面添加了多列布局和弹性盒模型，美化页面方面添加了阴影，渐变最重要是动画效果，其他的新选择器还有字体图标只是锦上添花。
CSS布局：决定元素布局方式主要是position和float属性以及CSS3中的display属性的grid和flex
1.普通文档流主要属性介绍
* none：元素直接消失，不占任何空间
* block：块级元素，块级元素的宽度受父容器宽度限制，直接撑满整行，其他临近位置的普通文档流元素需要另起一行
* inline：内联元素，默认元素宽度由内容决定，高度由font-size决定
* inline-blobk： 内联块级元素。相对于inline来说可以设置宽高。有一个缺陷就是会出现间距，不过该问题可以通过设置父元素的字体大小font-size为0，再单独设置各个元素的字体大小来解决。
2.格式化上下文
格式化上下文分为块级格式化上下文（block Formatting Contexts,BFC）和内联格式化上下文(Inline Formatting Contexts,IFC)
一。BFC的形成（解决布局中不会造成高度塌陷或者）
满足以下任意一个条件可以创建一个新的BFC
（1）根元素
（2）脱离普通文档流的元素（浮动，绝对定位，固定定位）
（3）非块级元素（display属性值为inline-block，table，flex等）
（4）overflow属性部位visible的块级元素
二。BFC的影响
（1）同一个BFC内“相邻”的块级元素的垂直外边距会发生折叠，即两者边距取决于双方边距的最大值而不是边距之和
（2）BFC是页面上隔离的独立容器，内部元素不会与外部元素相互影响
（3）在计算BFC高度时，内部的浮动元素也会被计算在内