网易前端实习面筋

网易有道前端实习

1、自我介绍

2、介绍了下项目

外卖+

是一个移动端的外卖平台，主要功能有定位，商家详情，购物车，下单，支付等

一、采用前后端分离的跨域方案，前端采用flexible.js布局方案，并使用fastclick解决点击延迟的问题。

1跨域

就是当前页面某个接口的请求地址如果协议，域名、端口其中一项不同就涉及到跨域。跨域是由于浏览器的同源策略导致的。

跨域的解决方法：cors，后端设置Access-Control-Allow-Origin；jsonp:script标签可以跨域，将回调函数拼接在url中，后端收到请求调用并将数据作为参数返回。

2 flexible.js

是将当前屏幕分成十等份，一份是1rem，所以只需确定HTML字体大小就可。

3 移动端有点击延迟/点击穿透的问题，具体表现就是点击有300ms延迟，这个延迟会导致点击穿透。解决方法使用fastclick轻量库。

二、首页使用keep-alive进行组件缓存，附近的商家数据懒加载，路由懒加载优化性能

1、首页在第一次加载之后就进行缓存。项目具体是采用在路由中添加meta属性设置是否缓存。

缓存之后的组件不会执行原有的生命周期，但是会多出进入activated和退出deactivated,可以在这两个周期中进行原来的一些比如发送请求等一些操作。

2、数据懒加载

首页一次展示不了全部的数据，全部请求过来性能消耗太大，使用懒加载，主要思路是当滚动到页面底部的时候再去后端请求数据。

如何判断滚动到底部？当scrollHeight(可视+滚动)=scrollTop(滚动) +clientHeight(可视)

3、路由懒加载

只有用到该组件的时候再加载，节约性能

在配置路由的时候，使用import引入组件。

三、定位功能使用腾讯位置服务。

1定位，根据ip获取位置信息存储在Vuex中

2位置搜索，根据关键词获取位置数组，展示在前端列表，当点击某具体位置后存储在vuex中。

存储在vuex中是因为位置信息不仅在首页使用，美食页面等也要使用，解决了数据传递的困难。

四、支付功能我做的是一个模拟支付的功能，因为现在支付一般是第三方接口，需要付费所以我没有搞这个。

大概的思路就是前端调用支付接口返回来一个url，生成一个二维码，手机在相同局域网扫码之后就修改订单状态，同时前端定时查询订单状态是否支付。

五、用户头像使用七牛云进行图片托管。

​ 七牛云配置仓库，密钥，域名。

​ 前端发请求之后后端通过密钥获取一个token给前端，前端携带token就可以将图片上传到七牛云仓库。

3、说下后台管理系统的布局(自适应两栏布局)自适应三栏布局呢？

两栏布局实现效果就是将页面分成左右宽度不等的两列，一般是左边固定宽度，右边撑满

比如：

<style>
   /*= .box{
        overflow: hidden; 添加BFC
    }
    .left {
        float: left;
        width: 200px;
        background-color: red;
        height: 400px;
    }
    .right {
        margin-left: 210px;
        background-color: blue;
        height: 200px;
    }*/
    
    
    /*flex布局 */
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
    
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

三栏布局

4、display有哪些属性值？

​ none,block,inline,inline-block

5、position有哪几种？

· 定位position的用法

Relative相对定位，相对原来正常位置进行定位

Absolute绝对定位，相对于父级元素进行定位

Fixed固定定位，相对于浏览器窗口进行定位

Sticky粘性定位，相对和固定定位的结合，比如有些导航栏 往下滚动吸附在顶端。

6、1px问题如何解决？

​ 1px问题是由于像素密度导致的。也就是说CSS中的1px此时不等于设备的1px。物理像素和逻辑像素的比例叫像素比。

比如像素比为2，这个时候1px实际是2px物理像素。要想实现二倍图设计稿的要求应该写成0.5px，这样实际才是1px物理像素。但是小数点像素是由兼容问题的。

完美的解决方案就是rem+媒体查询/flexible.js

也就是说，fontsize是计算出来的，通过rem就可以适配不同尺寸。

7、说下你知道的缓存，如果某个数据我们想保存7天应该使用哪种？（localstorage的封装）

web缓存和浏览器缓存

localstorage 不手动清除一直在前端保存

sessionStorage 会话存储，关闭浏览器就消失

cookie比较老了，跟随请求发出主要用于识别用户信息

8、节流和防抖

节流就是每间隔一定时间触发事件 CD

防抖就是每次事件触发之后都会计时，在这段时间内不会有事件触发 回城

9、cache-control是控制什么的？

cache-control：max-age可以设置资源的缓存时间，这是对于强制缓存来说的

cache-control:no-cache表示强制进行协商缓存，不去判断强缓存

cache-control:no-store不进行任何缓存

10、css3 新特性

2D转换（XY轴） transfrom:translate()/rotate()/scale()增加或者减少元素

3D转换多了个Z轴

过渡transition:width 2s linear 1s;

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s; /* 推迟*/
}

11、了解ts吗？（没看过）

12、webpack优化

13、 代码题，实现数组去重 多种方法

let ret=[];
let obj={};

//双重循环
for(let i=0;i<arr.length;i++){
    if(!obj[arr[i].id]){
        ret.push(arr[i]);
        obj[arr[i].id]=true;
    }
}

//reduce 第一个参数是每次执行的函数，第二个参数是可选的归并起点值
arr.reduce(function(pre,cur){
   obj[cur.id]? '':obj[cur.id]=true&&pre.push(cur);
    return pre;
},[])

14、代码题，将url中的参数转换成对象

//https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1
//location.search是url的查询字符串以?开头

function getQueryParams(){
	let obj={};
    let queryStr=location.search.replace('?','').split('&');
    queryStr.foreach(item=>{
        let arr=item.split('=');
        obj[arr[0]]=arr[1];
    })
    return obj;
}

15、垃圾回收机制（面试官想问v8引擎的这跟我在红宝书看到的有点不一样）

​ v8垃圾回收主要是针对堆空间来说的，将堆内存分为下面两部分

• 新生区（内存占用小，存活时间比较短）

  • 对象区 新加的存在对象区
  • 空闲区

  Scavenge算法实现垃圾回收。主要的思路就是对象区中的活跃对象被复制到空闲区，之后两者角色反转。这里还有晋升机制，如果经过两次垃圾回收依然存活就会被移动到老生区。

• 老生区（内存占用比较大，存活时间长）

  常规的标记清除法，注意内存整理。

由于js单线程，执行垃圾回收会造成js执行停顿，我们称之为全停顿。这不好，会造成较长时间的卡顿，解决方法是增量标记算法，主要思路是将标记分为一个个子过程，穿插在js执行逻辑中交替进行。

16、你的项目有页面闪烁的问题吗？

​ 有，我之前将数据请求放在mounted里面结果有页面闪烁。后来改成created之后解决。

​ 原因是mounted时已经渲染完成了，这里再请求数据就会造成二次加载造成闪烁。放在前面的生命周期created就可以避免这个问题。