网易有道前端实习
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就可以避免这个问题。
标签：定位,网易,缓存,前端,像素,1px,实习,面筋,加载 From： https://www.cnblogs.com/best-huan/p/16607752.html