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分)
回應式布局簡而言之,就是一個網頁能夠兼容多個終端的布局，其原理是動態監聽視口寬度的變化,動態設定頁面元素在不同寬度視口下的樣式,
從而能夠讓頁面能正常顯示并具有可讀性，實作程序主要使用媒體查詢技術，
@mediaalland(min-witdh:320px)and(max-width:560px){
//元素的樣式
}

三、JavaScript基礎,共12題(36分)
1、手寫原生ajax請求程序,指明如何實作異步和同步;(3分)
//1、創建XMLHttpRequest物件
letxmlhttp=null;
if(window.XMLHttpRequest){
//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}else{//codeforIE6,IE5
xmlhttp=newActiveXObject("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分)
letid,count=60;
letcountDown=()=>{
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=newAnimal();
2)構造繼承,使用父類的建構式來增強子類實體
functionCat(name){
Animal.call(this);
this.name=name||'Tom';
}
3)實體繼承,為父類實體添加新特性,作為子類實體回傳
functionCat(name){
letinstance=newAnimal();
instance.name=name||'Tom';
returninstance;
}
4)拷貝繼承,把父類的實體所有屬性賦值給子類原型物件
functionCat(name){
varanimal=newAnimal();
for(varpinanimal){
Cat.prototype[p]=animal[p];
}
this.name=name||'Tom';
}
5)組合繼承,通過呼叫父類構造,繼承父類的屬性并保留傳參的優點,然后通過將父類實體作為子類原型,實作函式復用
functionCat(name){
Animal.call(this);
this.name=name||'Tom';
}
Cat.prototype=newAnimal();
//重新定向建構式,避免紊亂
Cat.prototype.constructor=Cat;

8、原型是什么?函式的原型和物件的原型如何獲得?(3分)
1)建構式是在script標簽里面宣告的函式functionFn(){}
2)原型物件是在宣告了一個建構式后,程式自動按照建構式的規則創建一個物件pt_object,這個物件就叫做原型物件，
3)建構式中會有一個屬性prototype,這個屬性指向的就是原型物件pt_object
Fn.prototype===pt_object
4)使用建構式創建一個物件
letobj=newFn()
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)閉包實體:
functionfn(){
letnum=10
return()=>{
console.log(num+20)
}
}
letmt=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)npmivue-router
2)創建src/router/index.js檔案
3)在index.js檔案中撰寫代碼
importVuefrom'vue'
importVueRouterfrom'vue-router'
letHome=()=>import('../components/Home.vue')
Vue.use(VueRouter)
letroutes=[{path:'/home',name:'Home',component:Home}]
letrouter=newVueRouter({routes})
exportdefaultrouter
4)在main.js中引入路由并掛載
importrouterfrom'./router'
newVue({
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分)
<keep-alive></keep-alive>包裹動態組件時,會快取不活動的組件實體,主要用于保留組件狀態或避免重新渲染

五、其它,共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)客戶端
<script src="less.js"type="text/javascript"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less">
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