基于TOP-K的面试题解总结（8）

36.简述 Javascript 事件冒泡和事件捕获原理

• 描述事件触发时序问题
• 事件捕获：
• 由外到内：从document根节点到触发事件的那个节点
• 先触发当前节点的根元素然后再触发下一级事件，直到事件源
• 事件冒泡：
• 由内到外：自下而上的去触发事件
• 事件流：
• 事件捕获-->事件源-->事件冒泡

 

37.优化首屏渲染的方式有哪几种？

• Nginx的gzip压缩：
• 配置gzip on；开启gzip压缩
• gzip_types 表示需要压缩的常见静态资源
• gzip_min_length 1k；表示大于1k就压缩
• gzip_comp_level 2；表示压缩等级1-9，数字越小压缩速度越快但cpu消耗大
• Vue-Router路由懒加载
• 将不同路由对应的不同组件分割成不同的js代码块，然后当路由被访问的时候才加载对应的组件，更高效
• UI库可以按需加载：
• 对于UI库可按照页面所需的UI进行按需加载
• 通过设置link标签的ref属性
• prefetch降低权重，不用立马加载
• preload提高下载顺序权重，使得关键数据提前下载好，优化页面加载速）

 

38.sessionStorage 和 localStorage 有什么区别？

• sessionStorage：cookie的扩大版，面向会话的存储。会话结束会被清除。大小和localStorage相近5MB左右
• localStorage：生命周期是永久，储存的信息永远不会消失，除非用户主动清除

 

39.简述 BFC 的原理及其使用场景

• BFC：块级格式化上下文，盒子内部有一套自己的渲染规则，形成独立的容器。不影响其他环境中的布局
• 形成BFC条件：
• float不为none
• position为absolute（绝对定位）或fixed
• display属性值为inline-block/felx/table-cell等
• overflow不为visible
• 使用场景：
• 解决高度塌陷：由于子元素设置浮动，父元素高度塌陷，只要设置父元素overflow为hidden即可解决容器塌陷
• 阻止外边距margin叠加
• 防止浮动元素遮住文档流中元素（因为设置盒子后，盒子不会影响其他环境中的布局）

 

40.简述 Dom 节点的不同操作方式

• 创建DOM节点
• 创建元素节点：document.createElement("div")
• 创建文本节点：document.createNode("hello world")
• 插入DOM节点
• 在父元素节点中末尾插入子节点：fatherNode.appendChild(sonNode)
• 在父元素节点中某个子元素之前插入节点：fatherNode.insertBefore(sonNewNode,sonOldNode)
• 删除DOM节点
• 在父元素节点中删除某个子元素：fatherNode.removeChile(sonNode)
• 修改DOM节点属性
• Node.setAttribute(name,value)；给Node设置{name : value}的属性
• Node.getAttribute(name)；获取Node{name}的属性值
• Node.removeAttribute(name)；移除Node{name}的属性值
• 获取节点
• 通过ID获取对应元素：getElementById()
• 通标签名获取对应元素：getElementsByTagName()
• 通过类名获取对应元素：getElementsByClassName()
• 通过CSS选择器获取对应元素：querySelector()和querySelectorAll()
• 通过name属性获取对应元素：getElementsByName()
• 复制节点
• Anode.cloneNode(boolean); Anode是被复制的元素，返回的是新元素，boolean表示是否复制
• 替换节点
• 在父元素节点中用新的子元素替换老的： fatherNode.replaceChild(newSonNode,oldSonNode)