理解BFC

BFC 块级格式化上下文,定义元素按什么样的规则通过视觉格式化模型布局、渲染

1、触发元素bfc的条件

  • flolt
  • overflow
  • postition
  • display: inline-blick, table-cell,flex

2、BFC特性规则

  • 清除浮动引起父级元素高度为0的问题,默认浮动元素是不会参加父元素高度计算的,触发父级bfc后会让浮动元素参加高度计算
  • margin重叠问题
  • bfc不会与浮动元素重叠[……]

Read more

javascript中的数据类型转换

1、转换过程中注意toString、toNumber、toBoolean、toPrimitive

可以简单理解前面三种为显式转换,而primitive为隐式强制类型转换,

a、toString:默认使用的是Object.prototype.toString(),除非该对象上定义了toString方法,类似的一种情况JOSN,也基本上算是一种显式强制类型转换,转换的时的规则基本和toString相同,只有个别不能处理的数据类型不一样,详细参考JOSN.stringify

b、toNumber:

需要特别注意

0[……]

Read more

JOSN.stringify

JOSN.stringify会忽略的情况:注这里直接会把键一起整个忽略掉,另外循环引用的对象可能会出现Converting circular structure to JSON或者key:undefined情况

JSON.stringify({a:undefined, b:function(){}, c:Symbol()});

// "{}"

console.log(JSON.stringify([undefined,1, function(){}, Symbol(”)]))

// [null,1,nu[……]

Read more

浏览器缓存

第一次请求资源,服务端会通知客户端怎么缓存数据,强缓存和协商缓存

强缓存

expires缓存过期的绝对时间,缺点客户端时间可能不准确,于是http1.1版本增加了

cache-control又有下面几种字段设置,和expires同时出现,cache-control优先级高于expires

max-age:1000  表示从资源被缓存算起1000ms以内再请求的话就会命中

no-cache:先不使用缓存,通过服务器协商后确定,注:不是不使用缓存

no-store:直接请求不用缓存

[……]

Read more

浏览器渲染过程

  1. 解析HTML内容,碰到CSS、IMG、Script发送请求下载,边解析边构建DOM树
  2. 如果碰到script,会暂停DOM树构建,等该script下载执行完后再继续构建
  3. 碰到CSS会解析构建成CSSOM(CSS对象模型)
  4. 遍历DOM树中所有节点,在CSSOM中找到该节点对应的样式,最后生成渲染树,遍历过程中如果碰到不可见元素(script,display:none)等会忽略,即不会添加到渲染树中

react 事件

收集:

1、nodeid、事件名称、存储形式listeners[onClick][nodeid]

2、通过nodeid,然后一直冒泡执行cb

3、所有事件统一绑定在document

另外事件支持捕获时执行

onCaptrueClick={()=>0}

AMD(Asynchronous Module Definition)异步模块定义

AMD这种开发方式解决了什么样的问题

  1. async带来的好处,防止js阻塞页面
  2. 通过require([a], fcuntion(a){a.say()})解决js之间的依赖关系
  3. 模块化开发方便开发维护

requireJS定义了一个函数 define,它是全局变量,用来定义模块

define(id?, dependencies?, factory);
  1. id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)
  2. dependencies:是一[……]

Read more