网易有道前端实习
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