css相关问题
1. display:none和visbility:hidden区别
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，
visbility:hidden 隐藏对应的元素，在文档布局中任然保留原来的空间，
（补充：display:inline-block 元素内容以快状显示，行内的其他元素显示在同一行）
2. css 盒子模型
box-sizing属性值
a). content-box : width = content （正常模式）
b). padding-box : width = content +padding
c). border-box : width = content +padding + border ( IE怪异模式 )
详细内容：[css 盒子模型]https://www.jianshu.com/p/6a699e997631
3. position 值
absolute: 绝对定位，相对于static定位以外的第一个父元素定位
fixed: 绝对定位，相对于浏览器窗口
relative: 相对定位，相对于普通流中定位
static: 默认值，没有定位，元素在普通流中定位
inhert: 从父元素继承position属性的值
详细内容：https://www.jianshu.com/p/7dabf1d82c1d
html相关问题
1.浮动的工作原理以及如何清除浮动
原理：浮动元素脱离文档流，不占空间，浮动元素碰到包含它的边框或浮动元素停留
导致的问题：父元素高度无法被撑开，
清除方法 ：
a. <div style="clear:both"></div>
b. 使用overflow, 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
c. after伪对象清除浮动
.aa:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
2. DOM操作
a. 创建新节点
createElement() -- 创建具体元素
createTextNode() --创建文本节点
createDocumentFragment() -- 创建DOM片段
b. 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() -- 在已有的子节点前面插入一个新的子节点
c. 查找
getElementById
getElementByName
getElementByTagName
3. webSocket如何兼容低浏览器？
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
3. 重排和重绘
重排是DOM元素的几何变化
重绘是当页面中的元素样式的改变并不影响它在文档流中的位置
https://www.jianshu.com/p/fe64e387d5bc
4.redux基本思想
具体流程
首先view dispatcher拦截action 然后执行对应的reducer，并且更新到strore中，最终view会根据store数据的改变执行界面的刷新渲染。
redux是单向数据流。state是只读，只能通过action来间接修改
整个应用的state 保持在一个单一的store中，store就是一个简单的js对象，而改变应用state的唯一方法就是在应用中触发action然后通过reducer来修改state
store:
一个js对象，保存了应用的state。可以通过getstroe访问state。允许通过dispatch改变state。通过subscribe注册listener，其返回的函数可以用来处理listener注销
action:
必须有一个type属性，来表明在运行时action的类型
reducer:
其实是一个纯函数，该函数以先前的state和action作为参数，返回下一个state
react diff 算法
传统的diff算法其实是循环递归对节点一次比较，然后刷新节点的更新状态，分别是add,remove,change,其计算复杂度时O(n^3)
react diff 算法（计算复杂度O(n)）
只对同一层级的节点比较，其他忽略，如果出现跨级移动，只会进行删除/增加操作
react分别对tree diff, component diff, element diff 进行了优化
- tree diff
对树进行分层比较，两颗树只会对同一层级的节点进行比较，如果出现跨层级的节点只有创建或删除操作， - component diff
react 是基于组件构建应用的，
如果是同一类型的组件，按原策略继续比较
如果不是则判断该组件是dirty component 从而替换整个组件的所有节点
对于同一类型的组件，有可能它的virtual dom没有发生变化，react允许用户通过shouldcomponentupdate来通知react判断该组件是否需要进行diff - element diff
（通过设置唯一key的策略对element diff算法进行优化）
当节点处于同一层级时，react diff 提供了三种操作 insert-markup(插入),move-markup(移动)，remove-markup（删除）
insert-markup(插入)：新的 component 类型不在老集合里， 即是全新的节点，需要对新节点执行插入操作。
move-markup(移动)：在老集合有新 component 类型，且 element 是可更新的类型，generateComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点。
remove-markup(删除)：老 component 类型，在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作，或者老 component 不在新集合里的，也需要执行删除操作。
参考 https://segmentfault.com/a/1190000004003055#articleHeader6
网友评论