web前端开发面试题
#面试题1、vue的特点是什么?2、vue中父子组件如何传值父传子子传父3、v-show和v-if指令的共同点和不同点?4、说出几种vue当中的指令和它的用法?5、vue-loader是什么?使用它的用途有哪些?6、axios是什么?怎么使用?7、单页面应用和多页面应用区别及优缺点8、简述一下 vue 常用的修饰符和作用?9、谈谈你对MVVM开发模式的理解10、前端如何优化网站性能?11、vue中
#面试题
- 1、vue的特点是什么?
- 2、vue中父子组件如何传值
- 3、v-show和v-if指令的共同点和不同点?
- 4、说出几种vue当中的指令和它的用法?
- 5、vue-loader是什么?使用它的用途有哪些?
- 6、axios是什么?怎么使用?
- 7、单页面应用和多页面应用区别及优缺点
- 8、简述一下 vue 常用的修饰符和作用?
- 9、谈谈你对MVVM开发模式的理解
- 10、前端如何优化网站性能?
- 11、vue中样式绑定语法
- 12、简述vue中每个生命周期具体适合哪些场景?(重要,查资料)
- 13、如何避免回调地狱?
- 14、使用NPM有哪些好处?
- 15、一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack
- 16、如何消除一个数组里面重复的元素?
- 17、写一个function,清除字符串前后的空格。(兼容所有浏览器)
- 18、一次完整的HTTP事务是怎样的一个过程?
- 19、页面跳转
- 20、常用的es6的功能
- 21、link和@import的区别
- 22、cookies,sessionStorage 和 localStorage 的区别?
- 23、 -D和-S的区别
- 一、CSS面试题
- 二、JavaScript面试题
1、vue的特点是什么?
- 国人开发的一个轻量级框架。
- 双向数据绑定,在数据操作方面更为简单。
- 视图、数据、结构分离,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作。
- 组件化,方便封装和复用
- 虚拟DOM:dom操作是非常耗费性能的,不再使用原生的dom操作节点,极大解放dom操作
2、vue中父子组件如何传值
下面链接描述的详细
父传子
- 父组件在引用子组件时,通过属性绑定(v-bind:)也可以缩写为(:),把需要传递给子组件的数据,传递到子组件内部,供子组件使用。
- 在子组件里面定义一个props来存储父组件给子组件的值,子组件中的props只能读不能写,props是一个数组,数组里面值的命名要和上面属性绑定的名字一致。
- 在子组件中就可以使用props里面的数据了
子传父
使用监听的方式
在子组件中,利用$emit触发 父组件传递过来的方法的时候,可以将子组件的数据当做参数传递给父组件
3、v-show和v-if指令的共同点和不同点?
共同点:都能控制元素的显示和隐藏。
不通电:实现本质方法不同。
v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销较大)
4、说出几种vue当中的指令和它的用法?
v-model双向数据绑定;v-for循环;v-if v-show显示与隐藏;v-on事件;v-once只绑定一次。
5、vue-loader是什么?使用它的用途有哪些?
vue文件的一个加载器,将template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade
6、axios是什么?怎么使用?
axios是请求后台资源的模块。
安装axios
npm install axios
// 设置请求路径的基准地址
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
//将axios作为vue类的原型对象上的一个属性
Vue.prototype.$http=axios
npm install axios --save装好,js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中。
7、单页面应用和多页面应用区别及优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载必须的 html、js、css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后再交互的时候由路由程序动态载入。
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新。
单页面的优点:用户体验好、快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容时的转场动画)。
单页面缺点:不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览)
8、简述一下 vue 常用的修饰符和作用?
.stop:等同于JavaScript中的event.stopPropagation(),放置事件冒泡;
.prevent:等同于JavaScript中的even.preventDefault(),放置执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
.capture:与事件冒泡的方向相反,事件捕获由内到外;
.self:只会触发自己范围内的事件,不包含子元素;
.once:只会触发一次。
9、谈谈你对MVVM开发模式的理解
MVVM分为Model、View、ViewModel三者。
- Model:代表数据模型,数据和业务逻辑都在Model层中定义;
- View:代表UI视图,负责数据的展示;
- ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;
Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。
这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作。
10、前端如何优化网站性能?
-
减少 HTTP 请求数量
在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态,这是很致命的,因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
可以通过精灵图、合并css和js文件。懒加载等方式来减少http请求。
CSS Sprites
国内俗称CSS精灵图,这是将多张图合并成一张图片达到减少HTTP请求的一种解决方案,可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并CSS和JS文件
现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。为了减少HTTP请求数量,可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
采用 lazyLoad
俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
-
控制资源文件加载优先级
浏览器在加载HTML内容时,是将HTML内容从上至下一次解析,解析到link或者script标签就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将CSS提前加载,不要受JS加载影响。
一半情况下都是CSS在头部,JS在底部
-
利用浏览器缓存
浏览器缓存是将网络资源存储在本地,等待下次请求该资源时,如果资源已经存在就不需要到服务器重新请求该资源,直接在本地读取该资源。
-
减少 DOM 操作(vue这种减少操作DOM)
-
图标使用 IconFont 替换 image 标签
11、vue中样式绑定语法
1、对象方法v-bind:class="{'orange':isRipe,'green':isNotRipe}"
2、数组方法v-bind:class="[class1,class2]"
3、行内v-bind:style="{color:color,fontSize+'px'}"
12、简述vue中每个生命周期具体适合哪些场景?(重要,查资料)
beforeCreate:在new
一个vue
实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate
生命周期执行的时候,data和methods
中的数据都还没有初始化。不能再这个阶段使用data
中的数据和methods
中的方法
create:data
和methods
都已经被初始化好了,如果要调用methods
中的方法操作data
中的数据,最早可以再这个阶段中操作
beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂在到页面中,此时,页面还是旧的。
mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点,最早可以再和这个阶段中进行
beforeUpdate:当执行这个钩子时,页面中的显示的数据还是旧的,data
中的数据是更新后的,页面还没有和最新的数据保持同步
updated:页面显示的数据和data
中的数据已经保持同步了,都是最新的
beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的data
和methods
,指令,过滤器…都是处于可用状态。还没有真正被销毁
destroyed:这个时候上所有的data
和methods
,指令,过滤器…都是处于不可用状态。组件已经被销毁了。
13、如何避免回调地狱?
- 模块化:将回调函数转换为独立的函数
- 使用流程控制库,例如[aync]
- 使用Promise
- 使用aync/await
14、使用NPM有哪些好处?
- 通过NPM,你可以安装和管理项目的依赖,并且能够指明依赖项的具体版本号。
- 对于Node应用开发而言,你可以通过
package.json
文件来管理项目信息,配置脚本,以及指明依赖的具体版本 npm install xx -S
和npm install -D
的命令含义- -S 是运行 -D是开发依赖
npm uninstall xx
是什么意思- 项目转换的时候,不会把
node_modules
包发过去,那么你拿到没有nodeModules目录的项目怎么让它跑起来(你怕吗 install 安装所有的依赖)
15、一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack
IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:
// 1、条件Hack
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->
// 2、属性Hack
.test{
color:#090; /* For IE8+ */
*color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE7 and earlier */
}
// 3、选择符Hack
*html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
16、如何消除一个数组里面重复的元素?
var arr1 = [1,2,2,2,3,3,3,4,5,6],
var arr2 = [];
for(var i = 0,len = arr1.length;i<len;i++){
if(arr2.indexOf(arr1[i])<0{
arr2.push(arr1[i])
})
}
document.write(arr2); // 1,2,3,4,5,6
17、写一个function,清除字符串前后的空格。(兼容所有浏览器)
function trim(str){
if(str&typeof str === "string"){
return str.reqlace(/(^s*)|(s*)$/g,""); //去除前后空白符
}
}
18、一次完整的HTTP事务是怎样的一个过程?
基本流程:
- 域名解析
- 发起TCP的3次握手
- 建立TCP连接后发起http请求
- 服务器端响应http请求,浏览器得到html代码
- 浏览器解析html代码,并请求http代码中的资源
- 浏览器对页面进行渲染呈现给用户
19、页面跳转
methods:{
logout(){
window.localStorage.clear()
this.$router.push('/login')
}
}
20、常用的es6的功能
此题是一道开放题,可以自由回答。但要注意像
let
这种简单的用法就别说了,说一些经常用到并有一定高度的新功能
像module
、class
、promise
等,尽量讲的详细一点。
let/const
结构赋值 let {a,b,c}= [123]
箭头函数
模块化 model.exports import
promise new一个promise成功resolve 失败 reject .then .catch
21、link和@import的区别
两者都是外部引用 CSS 的方式,但是存在一定的区别:
- link是XHTML标签,除了能够加载CSS,还可以定义RSS等其他事务;而@import属于CSS范畴,只可以加载CSS。
- link引用CSS时,在页面载入时同时加载;@import需要页面完全载入以后再加载。
- link是XHTML标签,无需兼容问题;@import则是在CSS2.1提出的,低版本的浏览器不支持。
- link支持使用JavaScript控制DOM改变样式;而@import不支持
22、cookies,sessionStorage 和 localStorage 的区别?
cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie 数据始终在同源的http请求中携带(即使不需要),即会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发送给服务器,仅在本地保存。
存储大小:
cookie数据大小不能超过4k。
sessionStorage 和 localStorage 有大小的限制,比 cookie 大得多,达到5M或更大
有效时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
23、 -D和-S的区别
pm install name -save-dve 简写(npm install name -D) 自动把模块和版本号添加到devdependencies。开发环境
npm install name -save 简写(npm install name -S) 自动把模块和版本号添加到dependencies。
生产环境
一、CSS面试题
1.盒模型
标准盒模型:宽度= 内容(content)+border+margin+padding
IE盒模型 :宽度 = 内容(content+border+padding)+margin
box-sizing
用来控制元素的盒子模式 默认为content-box
- content-box : W3C标准盒模型 元素宽高是content宽高
- border-box : IE盒子模型 元素的宽高属性指的是border+padding+content
2.CSS选择器和继承
id选择器 类选择器 标签选择器 相邻选择器(h1+p) 子选择器(ul>li) 后代选择器 通配符
属性选择器(a[rel=“external”]) 伪类选择器(a:hover ,li:nth-child)
可继承属性:
- 字体相关:font-family、font-style、font-size、font-weight 等;
- 文本相关:text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等;
- 列表相关:list-style、list-style-image、list-style-type、list-style-position 等;
- 其他属性:visibility、cursor 等;
不可继承属性:
border padding margin width height
3.CSS新特性
-
background-image
-
background-origin(content-box/padding-box/border-box)
- 相对于内容框来定位背景图像 相对于内容 内边距 边框
-
background-size
-
background-repeat
-
word-wrap (对长的不可分割单词换行)
- 允许长单词换行到下一行 只在允许的断字点换行
-
word-wrap: break-word 在长单词或 URL 地址内部进行换行
-
文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
-
font-face属性:定义自己的字体
-
圆角(边框半径): border-radius
-
边框图片: border -image: url(border.png) 30 30 round
- 包围元素的边框 平铺(repeated)、铺满(rounded)或拉伸(stretched)
-
盒阴影:box-shadow: 10px 10px 5px #888888
-
媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性
-
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)"> <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
-
@media screen and (max-width:480px){ .ads { display:none; } } @media (min-width: 640px) and (max-width: 767px) { .category a{ font-size: 2.5rem;//25px 在bootstrap框架下 }
-
4 px和em的区别
- PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。
- 如果改变浏览器缩放 那么布局就会被打乱
- EM就是根据
<body>的“font-size”
来缩放字体的大小。- 进行任何元素设置,都有可能需要知道他父元素的大小。 16px = 1em
- Rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值。
二、JavaScript面试题
1.JavaScript数据类型
alert(``typeof` `null``); ``// object
alert(``typeof` `undefined); ``// undefined
alert(``typeof` `NaN); ``// number
alert(NaN == undefined); ``// false
alert(NaN == NaN); ``// false
var` `str = ``"123abc"``;
alert(``typeof` `str++); ``// number
alert(str); ``// NaN
2.JavaScript强制转换和隐式转换
例举至少3种强制类型转换和2种隐式类型转换?
-
强制类型转换: 明确调用内置函数,强制把一种类型的值转换为另一种类型。强制类型转换主要有:Boolean、Number、String、parseInt、parseFloat
-
隐式类型转换: 在使用算术运算符时,运算符两边的数据类型可以是任意的,比如,一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算,是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有:+、–、==、!
3.JavaScript事件流模型
事件流描述的是从页面中接收事件的顺序。 DOM 结构是树形结构,当页面中的某一个元素触发了某个一个事件,事件会从最顶层的 window 对象开始,向下传播到目标元素,途径的祖先节点都会触发对应的事件,如果当前节点的该事件绑定了事件处理函数的话,则会执行该函数当事件达到目标元素并执行绑定函数(如果有绑定的话)后,事件又会向上传播到 window 元素,途径的祖先节点都会触发对应的事件(如果绑定事件处理函数的话)
事件流包含三个阶段:
-
事件捕捉阶段
-
处于目标阶段
-
事件冒泡阶段
事件捕捉阶段:事件开始由顶层对象触发,然后逐级向下传播,直到目标的元素;
处于目标阶段:处在绑定事件的元素上;
事件冒泡阶段:事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;
4.BOM对象有哪些,列举window对象?
- window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
- document 对象,文档对象;
- location 对象,浏览器当前URL信息;
- navigator 对象,浏览器本身信息;
- screen 对象,客户端屏幕信息;
- history 对象,浏览器访问历史信息;
5.简述Ajax以及基本步骤
AJAX即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 初始化ajax对象
- 连接地址,准备数据
- 发送请求
- 接收数据(正在接收,尚未完成)
- 接收数据完成
//初始化ajax对象
var xhr = new XMLHttpRequest();
//连接地址,准备数据
xhr.open(“方式”,”地址”,是否为异步);
//为引擎对象绑定监听时间
xhr.onreadystatechange = function(){}
//发送数据
xhr.send();
6.http请求状态码
- 200:请求已成功,请求所希望的响应头或数据体将随此响应返回。
- 302:请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下,这个响应才是可缓存的。在其他地址发现了请求数据
- 304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304 响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。客户端已经执行了GET,但文件未变化
- 403:服务器已经理解请求,但是拒绝执行它。 请求不允许
- 404:请求失败,没有发现文件、查询或URl
- 500:服务器产生内部错误
7.GET和POST的区别,何时使用POST?
GET和POST的区别:
GET:一般用于查询数据,使用URL传递参数,由于浏览器对地址栏长度有限制,所以对使用get方式所发送信息的数星有限制,同时浏览器会记录(历史记录,缓存)中会保留请求地址的信息,包括地址后面的数据。get只能发送普通格式(URL编码格式)的数据。
POST:一般用于向服务器发送数据,对所发送的数据的大小理论上是没有限制,浏览器会缓存记录地址,但是不会记录post提交的数据。post可以发送纯文本、URL编码格式、二进制格式的字符串,形式多样。
在以下情况中,请使用POST请求:
1.以提交为目的的请求(类似语义化,get表示请求,post表示提交);
2.发送私密类数据(用户名、密码)(因为浏览器缓存记录特性);
3.向服务器发送大量数据(数据大小限制区别);
4.上传文件图片时(数据类型区别);
8. js字符串操作函数
concat()-将两个或多个字符的文本组合起来,返回一个新的字符串。
indexOf()-返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回-1。
charAt()-返回指定位置的字符。
lastlndexOf()-返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回-1。
substr()函数–返回从string的startPos位置,长度为length的字符串
slice()-提取字符串的一部分,并返回一个新字符串。
replace()-用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。
split()-通过将字符串划分成子串,将一个字符串做成一个字符串数组。
length-返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。
toLowerCase()-将整个字符串转成小写字母。
toUpperCase()-将整个字符串转成大写字母。
join() 方法用来将数组转换为字符串
9.怎样添加、删除、移动、复制、创建和查找节点?
1)创建新节点
createElement() //创建一个具体的元素
2)添加、移除
appendChild() //添加
removeChild() //移除3)查找
document.getElementsByTagName() //通过标签名称获取的是数组
document.getElementsByName() //通过元素的Name属性的值
document.getElementByld() //通过元素ld,唯—性
document.querySelector(’#id’) 查找元素唯—性
document.querySelectorAll(’#id’) 查找元素获取的是数组
10.写出三个使用this的典型应用
1.html元素事件属性中使用
<input type="button"οnclick="showInfo(this);" value="点击一下”/>
2.构造函数
function Animal (name, co1or) {
this.name = name;
this.color = color ;
}
- input点击获取值
<input type="button" id="text" value="点击一下”/>
<script type="text /javascript ">
var btn = document.getElementById("text");
btn.onc1ick = function( {
alert(this.value); //此处的this是按钮元素
}
</script>
11.数组中常用方法
- push() 后增
- unshift() 前增
- pop() 后删
- shift() 前删
- splice() 修该删除
- splice(index,length) 表示从index开始删除length个元素,并从index开始新增元素1~N,返回被删除的元素组成的数组
- concat() 拼接
- concat() 方法用来合并两个或多个数组 a.count(b)
- slice() 剪切
- slice(startIndex,endIndex) 返回从startIndex开始(包括),到endIndex(不包括)之间的原属组成的数组 返回新数组,不改变原数组
- join() 数组转字符串
- console.log(a.join(’,’))
- sort() 排序
- reverse() 颠倒顺序
- a.reverse()
- indexOf()和lastIndexOf()
- 查找某元素在数组中的位置,若存在,则返回第一个位置的下标,否则返回-1
- filter() 过滤
- filter() 方法返回数组中满足条件的元素组成的新数组,原数组不变
- map() 格式化数组
- 根据需求格式化原数组,返回格式化后的数组。原数组不变
- every()
- 对数组的每一项都运行给定的函数,若每一项都返回 ture,则返回 true
- some()
- 对数组的每一项都运行给定的函数,若存在一项或多项返回 ture,则返回 true
- forEach() 数组遍历
ES6新增方法
-
find()
- 找到数组中第一次满足条件的元素,并返回,若找不到则返回undefined。不改变原数组。
-
findIndex()方法
- findIndex()的作用同indexOf(),返回第一个满足条件的下标,并停止寻找。
更多推荐
所有评论(0)