试试语音读文章热门回答：
1. cookie session 的用途和区别。以及有效期
1、cookie数据存放在客户的浏览器上。session数据放在服务器上。
2、cookie不是很安全。别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多。会比较占用你服务器的性能
考虑到减轻服务器性能方面。应当使用COOKIE。
4、单个cookie保存的数据不能超过4K。很多浏览器都限制一个站点最多保存20个cookie。
2. vue的数据绑定原理。mvvm与mvc的区别
MVVM：
m:model数据模型层 v:view视图层 vm:ViewModelvue中采用的是mvvm模式。这是从mvc衍生过来的MVVM让视图与viewmodel直接的关系特别的紧密。就是为了解决mvc反馈不及时的问题
图片说明一下：
说到MVVM就要说一下双向绑定和数据劫持的原理。
MVC：
m:model数据模型层 v:view视图层 c:controller控制器
原理：c层需要控制model层的数据在view层进行显示
MVC两种方式。图片说明：
总结：
mvvm与mvc最大的区别：MVVM实现了view与model的自动同步。也就是model属性改变的时候。 我们不需要再自己手动操作dom元素去改变view的显示。而是改变属性后该属性对应的view层会自动改变。
不懂得可以复制链接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的区别 sessionStorage localStorage
localStorage的生命周期是永久性的。假若使用localStorage存储数据。即使关闭浏览器。也不会让数据消失。除非主动的去删除数据。使用的方法如上所示。localStorage有length属性
sessionStorage 的生命周期是在浏览器关闭前。也就是说。在整个浏览器未关闭前。其数据一直都是存在的。sessionStorage也有length属性。其基本的判断和使用方法和localStorage的使用是一致的
4.v-model双向数据原理
有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可
【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】
5.keepAlive用过吗？什么作用？
缓存路由组件
使用的是vue的一个组件。参考vue的官方文档
使用这个东西可以保证我们在切换组件的时候。原来显示的组件不被销毁
-----【保障组件的数据不会被切换路由而销毁数据】
<keep-alive include=\"Home\"> Home是对应的组件对象的名字。不是路由的名字
<router-view></router-view>
</keep-alive>
6.多维数组拍平
数组拍平也称数组扁平化。就是将数组里面的数组打开。最后合并为一个数组
一红六种方法吧……
了解的请看：https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解决方案
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。这里跨域是广义的。
这样就可以说同源策略----协议---端口---域名
原生的src和href可以解决跨域
代理可以解决
请求头也可以携带浏览器提示的也可以解决
一般都是后端解决跨域问题
【别的需要了解看下方链接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容问题
§ 如果你使用cli创建项目（即项目根目录是package.json）。不管用什么ide。即便是用HBuilderX。切记cli项目的编译器是在项目下的。HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。以及如果你想要安装less、scss等预编译器。也需要自己npm安装在项目下。而不是在HBuilderX的插件管理里安装。
§ 如果你使用离线打包。请注意HBuilderX升级后。真机运行基座和云打包对应引擎跟随HBuilderX升级。而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。
§ 如果你使用自定义基座。之前制作的自定义基座是不会跟随HBuilderX升级的。升级HBuilderX后你应该重新制作新版自定义基座。
§ 如果你使用wgt升级。新版HBuilderX编译的wgt。运行到之前的runtime上。一定要先测试好。看有没有兼容性问题。如果有问题。就不要wgt升级。整包升级。
§ 考虑到向下兼容。uni-app编译器在升级为新的自定义组件模式后。同时保留了对老编译模式的向下兼容。在HBuilderX alpha版中。App端一定会使用新编译器。不理会manifest配置。在HBuilderX 正式版中。新创建的项目会使用新编译器。老项目不会强制使用。而是开发者自己在manifest里配置开启。
§ 如果你使用其他ide开发uni-app。会经常因为拼错单词而运行失败。因为经过webpack编译一道。很多错误反应的不够直观。排错时间很长。不如从开始就依赖有良好提示的HBuilderX。避免敲错单词。
§ 云打包的引擎版本说明HBuilderX Alpha。只有1套云打包机。不管你的HBuilderX alpha版本多少。对应的打包机一定是最新的alpha版的客户端引擎。HBuilderX正式版。有2套打包机。一个是最新正式版。一个是次新正式版。中间的紧急更新版本没有独立打包机。举个例子：HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本）除了这2个HBuilderX版本外。其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机）
【详情请看】
https://ask.dcloud.net.cn/article/35845
其他观点：
前端面试题：
1. 一个200*200的div在不同分辨率屏幕上下左右居中。用css实现
<div style=\"width:500px;height:500px;border:1px solid green;display:flex;justify-content:center;align-items:center;\">
<div style=\"\">
2. 写一个左中右布局占满屏幕。其中左右两块是固定宽度200 。中间自适应宽。要求先加载中间块。请写出结构及样式：
<div id=\"left\">我是左边</div>
<div id=\"center\">我是中间</div>
<div id=\"right\">我是右边</div>
html,body{ margin: 0px;width: 100%; }
#left,#right{width: 200px;height: 200px;background-color: aqua;
position: absolute;}
#left{left: 0;top:0;}
#right{right: 0;top:0;}
#center{margin: 0 200px;background-color: blue;height: 200px;}
或者利用弹性盒子
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
}
.left {
width: 100px;
background-color: rgb(199, 170, 223);
}
.center {
background-color: rgb(151, 228, 148);
flex: 1;
}
.right {
width: 100px;
background-color: rgb(199, 170, 223);
}
</style>
<body>
<div class=\"left\">left</div>
<div class=\"center\">center</div>
<div class=\"right\">right</div>
</body>
3. 阐述清楚浮动的几种方式（常见问题）
1.父级div定义 height
原理：父级div手动定义height。就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局。要给出精确的高度。如果高度和父级div不一样时。会产生问题
2.父级div定义 overflow:hidden
原理：必须定义width或zoom:1。同时不能定义height。使用overflow:hidden时。浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
4. 结尾处加空div标签 clear:both
原理：添加一个空div。利用css提高的clear:both清除浮动。让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多。就要增加很多空div。让人感觉很不好
5. 解释css sprites 。如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。再利用CSS的“background-image”。“background- repeat”。“background-position”的组合进行背景定位。background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽。让提高了用户的加载速度和用户体验。不需要加载更多的图片
6. 如何用原生js给一个按钮绑定两个onclick事件？
Var btn=document.getElementById(‘btn’);
//事件监听 绑定多个事件
var btn4 = document.getElementById(\"btn4\");
其他观点：
谢邀。作为一个转行做前端的来回忆下面试的那几次经历。
前几次都是各种培训公司。各种忽悠就不提了。说说后面4次面试的经历。
第一次是面一个小公司。不过他们好像没有厉害的前端。来面我的是个后端。一来没有问我关于js的知识。直接问我以前做过什么。有没有经验。我本人不会吹牛。简历也没怎么包装。就是自己把自学的知识和做的几个小demo弄在上面。也用github挂在页面上了。不过他根本不点开看。也不问。问我会不会vue。我当时对框架还不了解。他就说他们需要能直接上手开始写的。所以我第一个就直接挂了。
第二次面试是一个国企。这个问了很多问题。都很基础。js数据类型。数组操作。事件。大概就是高程的前面几章看看就差不多都能答到。然后因为他们主要用jq。所以问了很多jq的操作。关于节点的。动画的。我看锋利的jq大概看了3遍。也练过多次。所以我答的很熟。然后问了些布局方面的。bootstrap我了解过。又看过css3。所以这方面也没啥问题。最后在现场做了个题目。主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意。说我jq很熟。一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信。虽然没问技术。但是我没啥自信。把没项目经验什么的也不知怎么就一五一十交代了。估计因为这个挂掉了。
第三次没问问题。直接就是一套题开做。我在那做了一个多小时。题目就是按照要求一步一步做一个页面出来。我也搞忘了我当时卡在哪个地方了。坐在那得时候就是做不出来。没有设计图。要根据他的描述自己找个设计图然后做。我第一次遇到这个有点懵。虽然当时没做出来。不过回来我自己花了几个小时把它做了。所以这个也是凉了。
第四个问的比较多。数据类型。数组操作。跨域。ajax。闭包。原型链。继承。深拷贝。浅拷贝。模块amd cmd。基本都是问的js。然后问了html5的新特性 css3 的新特性。遇到过什么浏览器的兼容性问题。怎么解决的。以后想往什么方面发展。这个时候我已经会点vue了。照着做了个小demo。不过后来知道公司用的angularjs。面试官也没看我做的。问也没问。。以前听网上说要带上自己的项目去面试感觉没起多大效果。
最后总结下如果面的比较初级的岗位。应该主要问js。原型链。继承。闭包。深浅拷贝。ajax。跨域。然后js的基础知识。对了还有apply和call也问了。html5的新特性了解下就行。主要就是看你js掌握的程度。如果稍微要求高一点的。暂时还没面过。等以后面过在来回答
您还感兴趣的文章推荐以上就是由互联网推广工程师 网创网 整理编辑的，如果觉得有帮助欢迎收藏转发~
本文地址：https://www.wangchuang8.com/111534.html，转载请说明来源于：网创推广网
声明：本站部分文章来自网络，如无特殊说明或标注，均为本站原创发布。如若本站内容侵犯了原著者的合法权益，可联系进行处理。分享目的仅供大家学习与参考,不代表本站立场。
评论(2)
数据，打包机，数组，属性，浏览器，版本，如果你，编译器，都是，项目
没想到大家都对你遇到的前端面试题都有什么？感兴趣，不过这这篇解答确实也是太好了
1. cookie session 的用途和区别。以及有效期1、cookie数据存放在客户的浏览器上。session数