前端面试题(一)

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 进行了优化

  1. tree diff
    对树进行分层比较,两颗树只会对同一层级的节点进行比较,如果出现跨层级的节点只有创建或删除操作,
  2. component diff
    react 是基于组件构建应用的,
    如果是同一类型的组件,按原策略继续比较
    如果不是则判断该组件是dirty component 从而替换整个组件的所有节点
    对于同一类型的组件,有可能它的virtual dom没有发生变化,react允许用户通过shouldcomponentupdate来通知react判断该组件是否需要进行diff
  3. 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容