前端面经-个人经历

//使用原生 js 怎么实现数据渲染到页面

    1. 内部<script><script>直接写

    2. DOM中的createElement，createTextNode()，innerHTML，insert，appendChild

//左边定长右边自适应的布局? A: 我说了三种 flex, 绝对定位, 和float 没有问题

    1.左边设置左浮动，右边宽度设置100%

    2.父容器设置 display：flex；Right部分设置 flex：1 自适应

    3.父元素相对定位，左边绝对定位并给固定宽度，右边margin-left+左边的宽度

//relative 和 absolute 的区别 A: 文档流 && absolute和relative分别是以什么为基准的 && BFC 没有问题

    relative：相对定位，受父元素里其他元素影响,不脱离文档流，以其他子元素为基准

    absolute：绝对定位，不受父元素里其他元素影响,脱离文档流,以父元素为基准

    BFC：块级格式上下文，清除浮动，限制范围

//CSS的animation 了解吗?

    过渡transition：元素在两个状态间切换时的过渡效果

    动画animation：通过@keyframe设定动画关键帧，可以同时设定多组动画，animation-name，animation-duration，animation-delay

//CSS的transform 了解吗? A: 说了 translate和rotate 问题不大

    transform：旋转 div 元素。translate=2D转化，translate3d=3D转化，rotateX/Y/Z=沿着 X/Y/Z 轴的 3D 旋转  

 

//纯CSS实现一个tab页如何实现? A:我就把实现轮播图的方法说了一下....

    :target用于接收点击事件

    display先都设置为none，然后target接收到点击时间，就出发#id的css属性{display：block；}

 

//let和const

    let 声明的变量只在 let 命令所在的代码块内有效。

    const 声明一个只读的变量，一旦声明，常量的值就不能改变。

 

//const和其他语言中const的区别....A:懵的....运行时常量和编译时常量...

//Promise async await 介绍一下....A:介绍一下呗, 自我感觉不会有问题

    都可以实现异步流程问题

    Promise：ES6,使用链式写法，用类似try catch then 的形式来处理 [成功|失败] 这样的数据，大量异步交互的话，then会堆积

    async await: ES7，async声明的函数的返回本质上是一个Promise；await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖

 

//判断Array的方法 A: isArray

//typeof 返回值 A:基本类型除了null (null是 obj) 加上function 和 object

//map和forEach A: map 有 return balabala....

//H5的标签. A:项目中用到了video audio ...给他说了一个audio的拖拽和点击跳转播放的功能.. webstorage,附赠把生命周期作用域告诉他了&&  history...都一一说了一遍, 感觉问题不大

//defer async A: 延迟和异步 defer不会阻塞后续html加载, async 也不会阻塞但是加载完即执行, 所以不应该包括操作dom的方法

//readytstate中的状态 A:loading/interactive/complete这三个

//webpack bundle 怎么做 A:import() or require ensure balabala....

//webpack怎么处理这些依赖的原理 A:母鸡阿....

//常用的loader ? (是为了看我真的是否用过吗...不知道为什么问这个) 写过loader吗? A:没写过

 

//Vue怎么实现的MVVM A: 就是能百度到的答案差不多那个样子

//Vue生命周期.. A:生命周期 (注意答keep-alive多了两个哦)+ 每个 生命周期应该做些什么

//组件优化...动态组件 keep-alive 路由拆分成bundle

//父子通信 兄弟通信: A:父子 props $emit.兄弟 new一个新的Vue实例当bus,or 借助共同父亲 不然就Vuex