纯属是将面试的技术问题记录下来,给需要面试的前端小伙们参考一下,有些问题估计不全面,供参考:
1、小程序的双向绑定与vue的区别
他们的区别在于小程序的数据不能同步于视图,必须通过this.setdada方法来同步于视图
2、v-model指令的原理
本质就是一个语法糖,在数据单向绑定的基础上,增加了一个监听用户事件并更新数据的功能。
v-bind:绑定响应事数据
oninput事件:监听数据变化并改变数据
3、vue作用域插槽
一个带数据的插槽,比如说父组件直接使用子组件,但数据却不是父组件给的,而是子组件自己的数据。
4、vue的生命周期
Vue生命周期可以总共分为8个阶段:
beforeCreate(创建前),
created(创建后),
beforeMount(载入前),
mounted(载入后),
beforeUpdate(更新前),
updated(更新后),
beforeDestroy(销毁前),
destroyed(销毁后)
5、meta标签的几种用法
name=值
keywords:说明网站的关键词是什么
render:告诉浏览器你的渲染方式
viewport:告诉浏览器你的视图模式
auther:标注作者
http-equiv=值
refresh:自动刷新并指向某个页面
set-cookies:设置cookies
6、闭包
它是一个能拿到某个作用域变量的方法,由于在js语言中,只有在作用域中才能直接拿到内部变量,因此可以把闭包简单理解成’定义在作用域里的一个方法’
7、小程序的原理
小程序本质上是一个单页面应用,所有的页面渲染和事件处理都放到了一个页面,而且小程序是在微信内部的基础上运行,可以调用微信内部的API或接口。架构是以数据驱动为主的模式。UI与数据是分开的。所有的页面更新都是通过数据的改变。
8、小程序wxml与html的区别
标签名称不一样
wxml多了一些wx:if、wx:for等指令属性
运行的限制:wxml只能在微信上运行,不能在浏览器运行
组件封装的不同:小程序对所有的标签都进行了封装
没有dom树:小程序不能像HTML进行dom操作
9、小程序wxss与css的区别
小程序wxss继承了css大部分特性,也进行了一些扩展。比如增加新的尺寸单位。
提供了全局样式和局部样式
仅支持css部分选择器
10、什么是vuex?如何用?使用场景?
vue实例的状态管理。根目录创建一个store.js,然后找到入口文main.js导入store.js,导入后进行注册。使用的场景:组件间值传递、登录状态
11、vue双向绑定的原理
vue.js就是对数据劫持并响应触发事件的一种操作。原生js有一种方法可以得到数据的获取值方法和更改值方法,并且能监听到数据改变,从而触发事件进行视图数据的操作。
12、css优先级计算
第一级:内联样式值1000
第二级:id选择器值100
第三级:类选择器、伪类选择器、属性选择器值10
第四级:元素选择器、伪元素选择器值1
13、css水平垂直居中
第一:flex弹性布局
第二:设置外边距margin和width
第三:父元素设置文本居中、高度和行高,子元素设置行内块元素
第四:浮动垂直居中
第五:绝对定位垂直居中
14、前端优化性能的几种方式
减少请求次数、资源合并和压缩、避免空的src和href、合并样式图片、外部脚本置底、样式放顶部、减少http缓存
15、站在前端的角度,搞SEO的考虑:
我会去了解搜索引擎的人工基本原理,各个搜索引擎的区别,人工机器如何工作、搜索引擎将搜索结果如何排序显示
vue篇
1、父子组件的传值
2、vue双向绑定的原理
采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
3、watch与computed的区别
computed支持缓存,只要依赖的数据发生改变,就会重新计算。而watch不支持,数据变化直接发生操作。
computed不支持异步操作,只要存在异步操作,计算属性将会无效。而watch反之。
watch监听的函数接收两个参数,一个最新值和一个之前的值。而computed没有。
watch监听的数据必须是data声明过的数据或者父组件传递过来的props中的值。而computed是存在依赖关系的属性。所以说,watch一般是一对多,computed是多对一的使用
ES6的新特性
新增了const和let变量
字符模板
剪头函数
array新方法
Promise
增加了类
前端常见的设计模式
单例模式
观察模式
工厂模式
命令模式
策略模式
混合模式
跨域
1、什么是跨域
指的是一个域下的脚本试图请求另一个域下的资源
2、什么是同源策略
协议+域名+端口三者一致
3、解决跨域的方法
nginx反向代理、jsonp跨域、蹲守同源策略
window.onload和document.ready的区别?谁快?
一个是要资源加载完成,一个是dom完成后,所以dom快
介绍一下new实例,new过程都干了些什么
是实例化构造函数获取对象。
new操作符创建了一个空对象,这个对象的原型指向了构造函数的prototype,执行构造函数后返回这个对象。
前端安全问题
1、xss:跨站脚本攻击
2、csrf:跨站请求伪造
js遍历方法
foreach:遍历数组每一项,不影响原数组、every:、map:遍历数组每一项,每一项的值替换成返回值,返回一个新数组、filter:不会改变原数组,返回新数组
uniapp注意事项
1、js语法不同
2、组价内的图片要用绝对路径
3、css
4、标签不同
v-if和v-for
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中
什么是事件冒泡?
当点击子元素的时候,如果父元素或者祖先元素绑定了事件,那么子元素事件触发的时候,父元素或者祖先元素的事件也会被触发。
什么是事件委托?
事件委托就是利用事件冒泡,只指定某一个事件处理程序,就可以管理某一类型下的所有事件。
判断对象是否为空
1、将对象转化为json字符串,判断是否为{}
2、object.keys遍历对象,如果有遍历,说明不是空
浏览器内核
以上是五大浏览器的简介,接下来是四大内核。在介绍五大浏览器的同时也已经顺便介绍了四大内核。四大内核分别是:Trident(也称IE内核)、webkit、Blink、Gecko。五大浏览器采用的都是单内核,而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。
作为前端开发,熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。
1、IE浏览器内核:Trident内核,也是俗称的IE内核;
2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;
4、Safari浏览器内核:Webkit内核;
5、Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
6、360浏览器、猎豹浏览器内核:IE+Chrome双内核;
7、搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
8、百度浏览器、世界之窗内核:IE内核;
9、2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;
防范短信接口被恶意滥用
1、增加图形验证
2、单IP限制次数
3、限制号码发送
ajax的工作原理
ajax算是众多技术的集合体(js、xml、dom),工作原理主要是在用户和服务器之间加了一个中间层,使用户操作和服务器响应异步化。不是所有的用户操作都是交给服务器处理的,有些操作也会交给ajax处理。
我会使用的框架
bootstrap、layui、element、vant、nuxt、jq、ant、uniapp等等
后台权限
权限开发分为三类:页面权限、操作权限、数据权限
前端一般是对菜单、页面、按钮、请求和响应做处理
技术这一方面,我是用vue来搞的,其中的菜单控制是根据请求后台给过来的数据,v-for来渲染菜单,数据存储采用了两种:sessionStorage和vuex。界面控制是采用了路由守卫,不过是路由跳转前进行了逻辑处理,说白了就是路由拦截,除了路由拦截之外,还用到了动态路由,防止输入网址非法访问。按钮控制的话,比较简单点,用指令或者自定义指令来控制。还有请求和响应的控制,这一块,我是采用axios的,这是vue也推荐用这个来请求,用了才知道,它不仅能拦截请求和响应,还能取消请求、支持Promise方法、自动把请求和响应数据转换为json数据,浏览器端可防csrf(跨站伪造请求)。当然,前面但凡要请求的,都带上了一个重要的数据,就是登录成功后给的token,这个凭据是很重要的,能识别用户所拥有的权限。