Web技术模拟面试题A参考答案
考试时间:180分钟
考试总分:100分
及格分数:70分
一、HTML部分,共5题(10分)
1、H5的语义化标签,至少写出5个?(2分)
Header定义头部,可以多个
Footer底部,不一定是文档最底部,可以多个
Nav导航栏标签,定义导航栏
Article独立内容区域,与session类似,用于文章等
Aside面侧边栏所使用
Time时间标签,主要用于搜索引擎和其它一些内容引擎特殊的解析和展示
Ruby注释标签,跟rt和rp一起使用,可以看一下效果
Details点击展开详情,可以试一下,可能在很多场景下可以使用
Mark会给这个字段添加一个背景色,那个颜色还改不了
Progress进度条,当做简易进度条使用,不够美观
Section节的意思,主要是区分开内容,文档中的节或者是文章的节
Video视频,不支持自动播放了,微信能处理,其他还没见过能自动播放
Audio音频,也就是音乐,也不支持自动播放
Datalist模糊查询,除了样式之外
Embed插入多媒体内容,可以播放视频,但是那些属性都不生效
Canvas画布,很强大很强大,值得研究
Main主要内容
2、简述px,em,rem的区别?(2分)
1)px像素(Pixel).绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟长
度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI.
2)em是相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸
未被人为设置,则相对于浏览器的默认字体尺寸.它会继承父级元素的字体大小,因此并不是一个固定的值.
3)rem是CSS3新增的一个相对单位(rootem,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.
4)浏览器无法调整那些使用px作为单位的字体大小,而em和rem可以缩放,rem相对的只是HTML根元素.
3、网页的重绘、重排、重构?(2分)
1)重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观.触发重绘的条件:改变元素外观属性.如:color,background-color等.
2)重排又称重构、回流、reflow,当渲染树中的一部分(或全部)因为元素的规模、尺寸、布局、隐藏等改变而需要重新构建,这就称为重排(reflow).
每个页面至少需要一次回流,就是在页面第一次加载的时候.
3)触发重排的条件:调整窗口大小、改变字体大小、样式表变动、CSS伪类激活、DOM操作等.
4)重排必定会引发重绘,但重绘不一定会引发重排.
4、简述一下src与href的区别?(2分)
src用于替换当前元素,href用于在当前文档和引用资源之间确立联系.
5、请描述一下cookies,sessionStorage和localStorage的区别?(2分)
1)sessionStorage中的数据,这些数据只有在同一个会话中的页面才能访问,并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,浏览器关闭数据就丢失.
2)localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的.
3)Cookie是一种用户追踪机制,其作用是与服务器进行交互,作为HTTP规范的一部分而存在.
4)Storage的概念和Cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外Cookie还需要指定作用域,不可以跨域调用
二、CSS部分,共5题(10分)
1、怎么让一个不定宽高的元素div,垂直水平居中,写出2种方案?(2分)
1)在当前元素上使用定位和变形
div{
positon:absolute;
top:50%;
left:50;
transform:translate(-50%,-50%);
}
2)在div的父级元素上使用flex布局
div.parent{
display:flex;
align-items:center;
justify-content:center;
}
2、css样式的优先级如何排列?(2分)
1)!importent>id>class>标签
2)!importent>行内>内部>外部
3、清除浮动的几种方式?(2分)
1)给浮动的元素的父级元素添加高度
2)给父级元素设置overflow:hidden;
3)在父级元素最后设置空div元素,设置属性clear:both;
4)使用伪类元素:
.clearFixed::after{
display:block;
content:"";
clear:both;
}
4、Flex布局常用的属性及其默认值?(2分)
1)flex-direction:row|row-reverse|column|column-reverse|initial|inherit设置主轴方向,默认值row
2)flex-wrap:nowrap|wrap|wrap-reverse|initial|inherit;设置主轴方向元素是否换行,默认值nowrap
3)flex-flow:flex-directionflex-wrap|initial|inherit;是flex-direction和flex-wrap的复合属性
4)align-items:stretch|center|flex-start|flex-end|baseline|initial|inherit;设置交叉轴上元素的对齐方式,默认值stretch
5)justify-content:justify-content:flex-start|flex-end|center|space-between|space-around|initial|inherit;设置主轴上元素的对齐方式,默认值flex-start
6)align-content:stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;多个主轴时元素在交叉轴上的对齐方式,默认值stretch
7)flex-grow:number|initial|inherit;设置弹性盒子的展开比率,默认值0即使有剩余空间也不展开
8)flex-shrink:number|initial|inherit;指定了flex元素的收缩规则,默认值是1,元素放不下就缩小填充父级元素
9)flex-basis:number|auto|initial|inherit;设置弹性盒伸缩基准值,默认值auto
10)flex:flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性默认值01auto
11)order:order:number|initial|inherit;设置元素的顺序,数字越小越靠前默认值0
12)align-self:auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;定义flex子元素单独在交叉轴方向上的对齐方式,默认值auto
5、什么是响应式布局,怎么实现?(2分)
响应式布局简而言之,就是一个网页能够兼容多个终端的布局。其原理是动态监听视口宽度的变化,动态设置页面元素在不同宽度视口下的样式,
从而能够让页面能正常显示并具有可读性。实现过程主要使用媒体查询技术。
@media all and (min-witdh:320px) and (max-width:560px){
//元素的样式
}
三、JavaScript基础,共12题(36分)
1、手写原生ajax请求过程,指明如何实现异步和同步;(3分)
//1、创建XMLHttpRequest对象
let xmlhttp=null;
if(window.XMLHttpRequest){
//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=new XMLHttpRequest();
}else{//codeforIE6,IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2、监听XMLHttpRequest的状态变化
xmlhttp.onreadystatechange=function(){
//5、判断xmlhttp的请求状态,渲染数据
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText
}
}
//3、建立连接,open第3个参数是true表示异步,false表示同步
xmlhttp.open("GET","http://www.sheli.net.cn/test1.txt",true)
//4、发送请求
xmlhttp.send()
2、实现一个60秒倒计时函数countDown();(3分)
let id,count=60;
let countDown=()=>{
if(id){
clearInterval(id)
}
id=setInterval(function(){
if(count<=0){
clearInterval(id)
}
count--
div.innerHTML=count
},1000)
}
3、谈谈你对this的理解?(3分)
1)普通函数中this--->window
2)构造函数中this--->当前实例化对象
3)事件回调函数中this--->当前触发事件的对象
4)定时器中this--->window
5)箭头函数中this--->window
4、解释事件模型和执行过程?(3分)
1)一个事件的处理过程主要有三个阶段:捕获,目标,冒泡；
2)捕获阶段:当点击某个元素时,首先要找到这个元素,这时就从window开始一直向子元素递归,直到找到事件触发的元素,这个过程称事件的捕获
3)目标阶段:当找到事件触发的元素时,就开始执行事件
4)冒泡阶段:当事件在目标元素上执行完后,开始向父级元素传递,此过程叫做事件的冒泡
5、如何阻止事件冒泡和默认事件?(3分)
1)使用event.stopPropagation()阻止事件的冒泡
2)使用event.preventDefault()阻止默认事件
6、谈谈你对Promise的理解?(3分)
1)Promise是ES6提供的一个处理异步程序的API,是存储异步代码执行后结果的容器。
2)Promise有三个阶段pending初始状态,fulfilled操作结束,rejected操作失败
3)使用Promise.then().catch()可以实现异步代码的同步化
4)Promise一旦执行就不能取消,内部异常不会在外部显示,在pending状态下不知道程序执行到哪个阶段
7、JS常用的几种继承方式?(3分)
1)原型链继承,将父类的实例作为子类的原型
Cat.prototype=new Animal();
2)构造继承,使用父类的构造函数来增强子类实例
function Cat(name){
Animal.call(this);
this.name=name||'Tom';
}
3)实例继承,为父类实例添加新特性,作为子类实例返回
function Cat(name){
let instance=new Animal();
instance.name=name||'Tom';
return instance;
}
4)拷贝继承,把父类的实例所有属性赋值给子类原型对象
function Cat(name){
var animal=new Animal();
for(var p in animal){
Cat.prototype[p]=animal[p];
}
this.name=name||'Tom';
}
5)组合继承,通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
function Cat(name){
Animal.call(this);
this.name=name||'Tom';
}
Cat.prototype=new Animal();
//重新定向构造函数,避免紊乱
Cat.prototype.constructor=Cat;
8、原型是什么?函数的原型和对象的原型如何获得?(3分)
1)构造函数是在script标签里面声明的函数function Fn(){}
2)原型对象是在声明了一个构造函数后,程序自动按照构造函数的规则创建一个对象pt_object,这个对象就叫做原型对象。
3)构造函数中会有一个属性prototype,这个属性指向的就是原型对象pt_object
Fn.prototype===pt_object
4)使用构造函数创建一个对象
let obj=new Fn()
obj.__proto__===pt_object
9、什么是同源策略?如何实现跨域?(3分)
1)源(origin)就是协议、域名和端口号。当且仅当三个源都相同下才是同源
2)同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
3)实现跨域可以使用:
webSocket、
iframe、
jsonp、
CROS(跨域资源共享cross-origin resource share)服务端设置响应头:Access-Control-Allow-Origin:*
使用服务代理
10、如何实现异步代码块的同步执行?(3分)
3)使用回调函数嵌套
2)使用promise.then().catch()
3)使用async-await
4)使用generator函数
11、ES6的常用语法,至少列举8个?(3分)
1)let
2)const
3)Map
4)Set
5)箭头函数中()=>{}
6)对象、数组解构
7)class
8)async-await
9)Promise
10)Generator
11)Symbol
12、什么是闭包,写一个简单的闭包?(3分)
1)闭包就是能够读取其他函数内部变量或成员的函数,本质上闭包就是将函数内部和函数外部连接起来的一座桥梁
2)闭包实例:
function fn(){
let num=10
return()=>{
console.log(num+20)
}
}
let mt=fn()
mt()//30
四、Vue部分,共10题(30分)
1、vue常用指令有哪些,写出至少10个?(3分)
1)v-on
2)v-if
3)v-else
4)v-show
5)v-bind
6)v-slot
7)v-lazy
8)v-html
9)v-text
10)v-for
11)v-model
2、vue生命周期函数有哪些,有什么特点?(3分)
1)总共分为8个阶段创建前/后,挂载前/后,更新前/后,销毁前/后。
2)在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化
3)在created阶段,vue实例的数据对象data有了,$el还没有。
4)在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。
5)在mounted阶段,vue实例挂载完成,data.message成功渲染
6)更新前/后:当data变化时,会触发beforeUpdate和updated方法
7)销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
3、vue使用路由的过程?(3分)
1)npm i vue-router
2)创建src/router/index.js文件
3)在index.js文件中编写代码
import Vue from 'vue'
import VueRouter from 'vue-router'
let Home=()=>import('../components/Home.vue')
Vue.use(VueRouter)
let routes=[{path:'/home',name:'Home',component:Home}]
let router=new VueRouter({routes})
export default router
4)在main.js中引入路由并挂载
import router from './router'
new Vue({
router,
store,
render:h=>h(App)
}).$mount('#app')
4、vue中route、routes、router、$route、$router的区别?(3分)
1)route:是定义在路由文件中的一个对象,包含路径和组件之间的对应关系
2)routes:在路由文件中的一个数组,存放很多个route
3)$route:当前组件对应的url对象http://localhost:9999/#/home就是home.vue的$route
4)router:在路由文件中定义的VueRouter类型的对象,称路由器,其中包含很多route
5)$router:是全局Vue对象的一个属性,可以通过this.$router来获得到router
5、什么是Vuex?(3分)
1)Vuex是一个专为Vue.js应用程序开发的状态管理模式
2)Vuex可以存储各单文件组件共享的数据
3)Vuex有常用的5个属性
state、getters、mutations、actions、modules
6、vue双向数据绑定的原理?(3分)
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的
setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter,这样的
话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。
第二步：compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对
应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:1、在自身实例化时往属
性订阅器(dep)里面添加自己2、自身必须有一个update()方法3、待属性变动dep.notice()通知时,能调用自身的
update()方法,并触发Compile中绑定的回调,则功成身退。
第四步：MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己
的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信
桥梁,达到数据变化->视图更新；视图交互变化(input)->数据model变更的双向绑定效果。
7、vue中computed、 filters、watch的区别?(3分)
1)过滤器filters是对数据进行修饰,不依赖实例可以定义全局的过滤器
2)计算属性computed对数据进行逻辑运算,依赖实例this.data,当data中的数据发生变化时,立即触发computed计算属性,不可以去改变data(){}中的值
3)帧听器watch根据数据的变化而执行操作
8、vue中子父组件如何传值?(3分)
组件关系可分为父子组件通信、兄弟组件通信。
1)父组件向子组件：
通过props属性来实现
2)子组件向父组件：
子组件用$emit()来触发事件,父组件用$on()来监昕子组件的事件。
父组件可以直接在子组件的自定义标签上使用v-on来监昕子组件触发的自定义事件。
3)兄弟之间的通信：
通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中都引入Bus,之后通过分别调用
Bus事件触发和监听来实现组件之间的通信和参数传递。
9、vue中的路由守卫有哪些,简单写出函数名称?(3分)
1)全局路由前置守卫
router.beforeEach(function(to,from,next){})
2)全局路由后置守卫
router.afterEach(function(to,from){})
3)组件内部守卫
beforeRouteEnter(to,from,next){}
beforeRouteUpdate(to,from,next){}
beforeRouteLeave(to,from,next){}
4)路由独享守卫
beforeEnter((to,from,next)=>{})
10、keep-alive的作用?(3分)
五、其它,共6题(14分)
1、小程序的双向绑定和vue哪里不一样?(2分)
小程序this.data的属性是不可以同步到视图的,必须调用:this.setData({items:[1,2,3]})
2、可以实现前后端交互技术有哪些,比如原生的AJAX,列举4种?(2分)
1)原生ajax
2)jQuery的$.ajax()
3)axios
4)fetch
5)webSocket
3、less是什么,怎么使用?(2分)
Less是一门CSS预处理语言,它扩充了CSS语言,增加了诸如变量、混合(mixin)、函数等功能,让CSS更易维护、方便制作主题、扩充。Less可以运行在Node或浏览器端
1)客户端
2)服务端
Less在服务器端的使用主要是借助于Less的编译器,将Less源文件编译生成最终的CSS文件
4、npm是什么,常用的命令有哪些,至少写出5个?(3分)
npm是nodejs包资源管理器,由三个独立的部分组成:网站、注册表(registry)、命令行工具(CLI)
常用的命令：
npm init
npm install
npm run
npm start
npm uninstall
npm help
npm ls
npm config
5、Git是什么,写出提交本地代码到远程仓库的流程?(3分)
1)Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
2)git init -y
3)git add .
4)git commit -m '首次提交'
5)git remote add origin '远程仓库地址'
6)git push -u master
6、PM2是什么,如何使用pm2启动一个Nodejs服务?(2分)
1)pm2是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载.
2)npm install -g pm2
3)pm2 start app.js