CSS篇

1、css的盒模型

html中每个元素都可以称之为一个盒模型。盒模型主要由4部分构成：margin+border+padding+content。

通过box-sizing可以设置盒模型的模式，有两种模式

• 标准盒模型：box-sizing: content-box，是默认模式，这个模型的宽/高=margin+border+padding+content

• IE盒模型：box-sizing:border-box，这个模型的宽/高=margin+content（padding+border+content）

2、隐藏元素的方法

display：none //元素不占据页面位置

opacity： 0 //元素在页面中占有位置，只是将其透明度设置为0，视觉上不可见

visibility: hidden // 页面中占有位置，可见性设置为hidden，视觉上不可见

position: absolute //通过绝对定位，配合任何一个足够大的top，left，right或bottom的负值

3、px，rem，em的区别

px：像素，是绝对单位

rem：相对单位，相对于html根节点的font-size的值

em：相对单位，相对于父节点的font-size的值

4、重排（回流）、重绘

(1) 首先说下浏览器的渲染机制：

• 解析html，生成dom tree
• 解析css，生成style rules
• 将dom tree和style rules结合，生成render tree
• 布局，绘制渲染树，页面展示

(2) 重排（回流）：浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何解构

引起重排的原因：改变元素的几何信息（大小和位置）

• 添加/删除可见的dom元素(display)
• 元素位置改变或使用动画
• 元素尺寸改变(margin,padding,border,width,height,font-size)
• 内容改变
• 浏览器窗口改变（resize）
• 页面渲染初始化
• 激活css伪类（:hover）
• 布局信息：offsetTop

(3) 重绘：元素的外观改变，布局未发生改变时，会引发重绘

引发重绘的属性：

• opacity, visibility, background-size, border-radiu, text, color

(4)避免重排/重绘的方法

• 避免一条一条修改dom样式，采用添加class的方式
• 避免把dom节点的属性放到循环里当成循环变量
• 给动画的html元件设置position为fixed或absolute，这样修改css不会引发重排
• 避免在大量元素上设置伪类，如:hover
• 避免在布局信息改变时查询布局信息
• 避免使用table布局
• 避免设置多层内联样式

重绘不一定引起重排，但重排一定会重绘

5、元素水平垂直居中

• 定位+margin

• 定位+transform

• flex布局

JS篇

1、js组成三部分

ECMAScript：js的核心内容

文档对象模型（DOM）

浏览器对象模型（BOM）

2、JS数据类型的检测方法

3、闭包

定义：函数嵌套函数，内部函数被外部函数返回并保存下来时，就会产生闭包

特点：可以重复利用变量，且不会污染全局的一种机制，这个变量一直保存在内存中，不会被垃圾回收机制回收

缺点：闭包较多时，会消耗内存，导致页面的性能下降，在IE浏览器中会导致内存泄露

场景：节流，防抖

• 防抖：在一段固定时间内，只能触发一次函数，如果触发多次，只执行最后一次

  • 场景：用户搜功能，在用户输入结束后才开始发送搜索请求

• 节流：限制一个函数在一段时间内只能执行一次

  • 场景：改变浏览器尺寸大小；滚动条scroll事件

  节流是为了限制函数执行次数，防抖是为了限制函数执行时机