1.盒子模型
一个盒子中主要的属性就5个:width、height、padding(内边距)、border、margin(外边距)。
盒模型有标准盒模型和IE的盒模型,
IE盒模型:
不同之处就是标准盒模型的内容大小就是content的大小,而IE的则是content+padding+border总的大小。
那么随之而来第二个问题–怎么设置这两种模型呢?
很简单,通过设置box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。
2.js有几种数据类型?null与undefined的区别?
JS有7种数据类型:三种基本类型(数字,字符串,布尔),两种引用数据类型(对象,数组),两种特殊数据类型(undefined,null)
其中上面的四种(undefined,number,string,boolean)属于简单的值类型,不是对象。
剩下的几种情况——函数、数组、对象、null、newNumber(10)都是对象。他们都是引用类型。
值类型的类型判断用typeof,引用类型的类型判断用instanceof。
null与undefined的区别
undefined表示缺少值,就是此处应该有一个值,但是还没有定义,undefined类型只有一个值,undefined.
(1)所有已声明但是没有初始化的变量,默认值都为undefined。
(2)函数没有明确返回值的时候,会默认返回undefined。
null为一个空指针对象null表示没有对象,即该处不应该有值
当函数返回的对象不存在时,返回null。
当某个对象不需要时,可将值设为null。
3.js闭包
闭包是指有权访问另一个函数作用域变量的函数。
清晰的讲:闭包就是一个函数,这个函数能够访问其他函数的作用域中的变量。
创建闭包的通常方式,是在一个函数内部创建另一个函数。
由于作用域链的结构,外围函数是无法访问内部变量的,为了能够访问内部变量,我们就可以使用闭包,闭包的本质还是函数
4.重绘和回流
只是样式的变化,不会引起DOM树变化,页面布局变化的行为叫重绘,且重绘不一定会伴随回流
引起DOM树结构变化,页面布局变化的行为叫回流,且回流一定伴随重绘。
什么情况下回导致回流,如何避免回流?
1.页面初次渲染
2.浏览器窗口尺寸改变
resize事件发生也会引起回流。
3.DOM的增删行为
比如你要删除某个节点,给某个父元素增加子元素,这类操作都会引起回流。
如果要加多个子元素,最好使用documentfragment。(让要操作的元素进行离线处理,处理完事以后再一起更新)
documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。
documentFragment用来批量更新
4.几何属性的变化
比如元素宽高变了,border变了,字体大小变了,这种直接会引起页面布局变化的操作也会引起回流。
如果你要改变多个属性,最好将这些属性定义在一个class中,直接修改class名,这样只用引起一次回流。
5.元素位置的变化
改一个元素的左右margin,padding之类的操作
所以在做元素位移的动画,不要更改margin之类的属性,使用定位脱离文档流后改变位置会更好
5.本地存储和离线缓存
5.1本地存储
1.cookie
(1)在h5之前,存储主要用的是cookie。cookie会随着每次