3月17日前端学习记录

128 阅读4分钟
内存泄漏

内存泄漏就是不能再被利用到的内存空间没有及时释放掉

情况1
function foo(arg) {
    bar = "this is a hidden global variable";
}

bar是一个没有被声明的变量,因此是全局变量,在页面关闭之前不会被释放

情况2

闭包:

闭包让原来本可以被释放掉的执行期上下文得不到释放,环境中的变量得不到释放,这也造成了内存泄露

垃圾回收机制

基本类型数据保存在栈内存中

引用类型数据保存在堆内存中,对于引用类型数据,栈内存中的变量中保存一个地址,这个地址指向堆内存中的实际值,如果变量被赋值为其他地址,那么原来的对象数据没有引用关系,就变成了无用的对象,因为没有变量引用该对象。那么这个无用的对象就要被回收

可达性

以某种方式可以访问到的变量,他就具有可达性

浏览器的垃圾回收机制就是定期回收释放掉那些不具有可达性的变量所占用的内存。

标记清除法:

这种算法是大多数浏览器所采用的一种算法。

  1. 垃圾回收器运行的时候,会给所有的变量标记为0
  2. 然后从根节点开始遍历,把能访问到的变量标记为1
  3. 清除掉所有标记为0的变量,回收它们的内存
  4. 最后把所有的标量标记改为0,开始新一轮的垃圾回收
优点:

实现简单01即可实现

缺点:

可能造成内存碎片化

引用计数法:

引用计数的策略就是记录变量引用内存空间的次数

  1. 当声明一个变量并将一个引用类型赋值给该变量,这个值的引用次数加一
  2. 当这个值又赋值给其他变量的时候,引用次数再次加一
  3. 如果该变量的是被覆盖掉了,那么这个值的引用次数减一
  4. 当这个值的引用次数为0的时候,说明没有变量在使用了,需要对内存进行回收,然后垃圾回收器在运行的时候会回收掉引用次数为0的值所占用的内存空间
优点:

算法非常清晰,引用数为0就被回收掉

缺点:

需要一个计数器,这需要占用很大的位置,循环引用的问题也无法解决,这个就是比较严重的了

BFC

BFC是 block formatting context的缩写,也就是块格式化上下文

BFC是一个独立的空间,是一个独立的布局环境,在BFC内的元素不会影响到外边的布局。

触发BFC的CSS属性:
  • overflow:hidden;
  • display:inline-block;
  • position:absolute
  • position:fixed
  • display:table-cell
  • display:flex
BFC的规则:
  • BFC是块级元素,块级元素会按垂直方向一个接一个的排列
  • 因为html是根标签,所以他能开启bfc(注意因果关系)
  • 垂直方向的距离由margin决定,属于同一BFC的两个相邻的标签外边距会发生重叠
  • 计算BFC属性的时候,浮动元素也被计算在内
  • BFC是一个独立的容器,容器内的标签不会影响到外部标签
  • 一个元素不能同时存在于两个BFC中
解决的问题:
  • 内部元素使用float脱离文档流,导致高度坍塌
  • 解决margin坍塌(子元素与父元素的margin重叠了)
position
position:static

默认值

正常的布局行为,即元素在文档常规流中当前的布局位置,此时top等都无效

position:relative

相对定位,元素仍然放在未添加定位时的位置,此时,top等有效

position:absolute

绝对定位,元素会脱离文档流,相对于最近的非static祖先元素进行定位

position:fixed

固定定位,元素会脱离文档流,元素根据屏幕视口进行定位,当滚动的时候,元素的位置不会改变

position:sticky

粘性定位,相当于relative和fixed的结合版本