摘要:隨機(jī)數(shù)參數(shù)中設(shè)置等。有哪幾種導(dǎo)航鉤子三種,第一種是全局導(dǎo)航鉤子,作用跳轉(zhuǎn)前進(jìn)行判斷攔截。在階段,實(shí)例的數(shù)據(jù)對(duì)象有了,還沒(méi)有。載入前后在階段,實(shí)例的和都初始化了,但還是掛載之前為虛擬的節(jié)點(diǎn),還未替換。更新前后當(dāng)變化時(shí),會(huì)觸發(fā)和方法。
最近面試了 很多1-2年的前端,網(wǎng)上手機(jī)了一些 問(wèn)題和答案,發(fā)出來(lái) 希望能幫助到大家~
CSS篇
IOS手機(jī)瀏覽器字體齒輪
修改-webkit-font-smoothing屬性
結(jié)果是:-webkit-font-smoothing: none: 無(wú)抗鋸齒-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑
怎么讓Chrome支持小于12px 的文字?
我們的做法是:
針對(duì)谷歌瀏覽器內(nèi)核,加webkit前綴,用transform:scale()這個(gè)屬性進(jìn)行縮放! p span {font-size:10px;-webkit-transform:scale(0.8);display:block;}
CSS預(yù)處理器(Sass/Less/Postcss)
CSS預(yù)處理器的原理: 是將類(lèi) CSS 語(yǔ)言通過(guò) Webpack 編譯 轉(zhuǎn)成瀏覽器可讀的真正 CSS。
在這層編譯之上,便可以賦予 CSS 更多更強(qiáng)大的功能,常用功能:
嵌套 變量 循環(huán)語(yǔ)句 條件語(yǔ)句 自動(dòng)前綴 單位轉(zhuǎn)換 mixin復(fù)用
JS
網(wǎng)站js和css如何壓縮?有哪些方法?
概念性知識(shí)點(diǎn):
http請(qǐng)求問(wèn)題,HTTP請(qǐng)求信息由那3部分組成?
請(qǐng)求方法URI協(xié)議/版本 (例如:GET/haorooms.jspHTTP/1.1)
請(qǐng)求頭(Request Header)(例如:Accept:image/gif.image/jpeg./ Accept-Language:zh-cn Connection:Keep-Alive Host:localhost等等)
請(qǐng)求正文
前端性能優(yōu)化問(wèn)題,你是如何處理前端性能問(wèn)題的?
www.haorooms.com/post/web_xn… 及 前端性能優(yōu)化補(bǔ)充篇
寫(xiě)出最簡(jiǎn)單的去重方式
es6的new Set()方式
let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90];[...new Set(array)]
es5的Array filter()
[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){ return index === Array.indexOf(elem);})
谷歌瀏覽器運(yùn)行下面代碼,并解釋?zhuān)?/p>
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
運(yùn)行上面代碼之后,會(huì)發(fā)現(xiàn)HTML層都被使用不同的顏色添加了一個(gè)高亮的邊框。為什么會(huì)這樣呢?
如何處理緩存?如何清除緩存。
ajax隨機(jī)數(shù)、ajax參數(shù)、meta中設(shè)置等??梢钥聪挛覍?xiě)的 js清除瀏覽器緩存的幾種方法
Websocket
Websocket 是一個(gè) 持久化的協(xié)議, 基于 http , 服務(wù)端可以 主動(dòng) push
兼容:
FLASH Socket
長(zhǎng)輪詢(xún): 定時(shí)發(fā)送 ajax
long poll: 發(fā)送 --> 有消息時(shí)再 response
new WebSocket(url)
ws.onerror = fn ws.onclose = fn ws.onopen = fn ws.onmessage = fn ws.send()
跨域
JSONP: 利用標(biāo)簽不受跨域限制的特點(diǎn),缺點(diǎn)是只能支持 get 請(qǐng)求
設(shè)置 CORS: Access-Control-Allow-Origin:*
postMessage
框架:Vue
vue-router如何做歷史返回提示?
vue-router如何做用戶(hù)登錄權(quán)限等?
vue組件通信
vue服務(wù)器渲染
vue性能優(yōu)化
active-class是哪個(gè)組件的屬性?
vue-router模塊的router-link組件。
vue-router有哪幾種導(dǎo)航鉤子?
三種, 第一種:是全局導(dǎo)航鉤子:router.beforeEach(to,from,next),作用:跳轉(zhuǎn)前進(jìn)行判斷攔截。 第二種:組件內(nèi)的鉤子 第三種:多帶帶路由獨(dú)享組件
scss是什么?在vue.cli中的安裝使用步驟是?有哪幾大特性?css的預(yù)編譯。
使用步驟:
第一步:用npm 下三個(gè)loader(sass-loader、css-loader、node-sass)
第二步:在build目錄找到webpack.base.config.js,在那個(gè)extends屬性中加一個(gè)拓展.scss
第三步:還是在同一個(gè)文件,配置一個(gè)module屬性
第四步:然后在組件的style標(biāo)簽加上lang屬性 ,例如:lang=”scss”
有哪幾大特性:
可以用變量,例如($變量名稱(chēng)=值)
可以用混合器,例如()
可以嵌套
導(dǎo)航鉤子有哪些?它們有哪些參數(shù)?
導(dǎo)航鉤子有:
全局鉤子和組件內(nèi)獨(dú)享的鉤子。
beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
參數(shù): 有to(去的那個(gè)路由)、from(離開(kāi)的路由)、next(一定要用這個(gè)函數(shù)才能去到下一個(gè)路由,如果不用就攔截)最常用就這幾種
Vue的雙向數(shù)據(jù)綁定原理是什么?
vue.js 是采用數(shù)據(jù)劫持 結(jié)合發(fā)布者-訂閱者模式的方式,通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter,getter,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者,觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。
請(qǐng)?jiān)敿?xì)說(shuō)下你對(duì)vue生命周期的理解?
總共分為8個(gè)階段 創(chuàng)建前/后,載入前/后,更新前/后,銷(xiāo)毀前/后
創(chuàng)建前/后:
在beforeCreated階段,vue實(shí)例的掛載元素 $el 和數(shù)據(jù)對(duì)象data都為undefined,還未初始化。 在created階段,vue實(shí)例的數(shù)據(jù)對(duì)象data有了,$el還沒(méi)有。
載入前/后: 在beforeMount階段,vue實(shí)例的$el和data都初始化了,但還是掛載之前為虛擬的dom節(jié)點(diǎn),data.message還未替換。在mounted階段,vue實(shí)例掛載完成,data.message成功渲染。
更新前/后: 當(dāng)data變化時(shí),會(huì)觸發(fā)beforeUpdate和updated方法。
銷(xiāo)毀前/后: 在執(zhí)行destroy方法后,對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù),說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽(tīng)以及和dom的綁定,但是dom結(jié)構(gòu)依然存在
請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法?
assets文件夾是放靜態(tài)資源;
components是放組件;
router是定義路由相關(guān)的配置;
view視圖;
app.vue是一個(gè)應(yīng)用主組件;
main.js是入口文件
vue.cli中怎樣使用自定義的組件?有遇到過(guò)哪些問(wèn)題嗎?
第一步:在components目錄新建你的組件文件(smithButton.vue),script一定要 export default {
第二步:在需要用的頁(yè)面(組件)中導(dǎo)入:import smithButton from "../components/smithButton.vue"
第三步:注入到vue的子組件的components屬性上面,components:{smithButton}
第四步:在template視圖view中使用,
自動(dòng)化測(cè)試相關(guān)、mock數(shù)據(jù)相關(guān)、 webpack相關(guān)
這個(gè)考察你對(duì)webpack的理解是使用程度。
例如可能考察如下知識(shí)點(diǎn):
hash(contenthash, chunkhash)
多頁(yè)面配置
發(fā)布上線(xiàn)流程
如何加快打包速度,減少打包體積
和其他工具的區(qū)別(grunt,glup,rollup,parcel,Browserify)
如果能看到這里的朋友都很不錯(cuò)~
有g(shù)et到幫助的,可以 圈一下~ 謝謝!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/6662.html
摘要:上節(jié)我們講了同源策略,這節(jié)我們講講如何跨域。當(dāng)這些從的腳本執(zhí)行出錯(cuò),因?yàn)檫`背了同源策略為了保證用戶(hù)信息不被泄露,錯(cuò)誤信息不會(huì)顯示出來(lái),取而代之只會(huì)返回一個(gè)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén),但也僅僅是入門(mén),現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(HTML/CSS/JS),本著提升技術(shù)水平,打牢基礎(chǔ)知識(shí)的中心思想,我們開(kāi)課啦(每...
摘要:前端最基礎(chǔ)的就是。的原理瀏覽器發(fā)送請(qǐng)求,服務(wù)器給出響應(yīng)。保持之前的界面不變化。的核心創(chuàng)建一個(gè)對(duì)象,用于發(fā)起請(qǐng)求設(shè)置為請(qǐng)求,請(qǐng)求發(fā)送請(qǐng)求。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén),但也僅僅是入門(mén),現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(HTML/CSS/JS),本著提升技術(shù)水平,打牢基礎(chǔ)知識(shí)的中心思想,我們開(kāi)課啦(每周四)。 ajax ...
摘要:前端最基礎(chǔ)的就是。的原理瀏覽器發(fā)送請(qǐng)求,服務(wù)器給出響應(yīng)。保持之前的界面不變化。的核心創(chuàng)建一個(gè)對(duì)象,用于發(fā)起請(qǐng)求設(shè)置為請(qǐng)求,請(qǐng)求發(fā)送請(qǐng)求。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén),但也僅僅是入門(mén),現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(HTML/CSS/JS),本著提升技術(shù)水平,打牢基礎(chǔ)知識(shí)的中心思想,我們開(kāi)課啦(每周四)。 ajax ...
摘要:微信小程序課程,面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)官網(wǎng)訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享。 ?? 微信小程序課程,面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? iKcamp官網(wǎng):http://www.ikcamp.com 訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程:《iKcamp出品|全網(wǎng)最新|微信小程序|基于最新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教...
閱讀 1786·2021-11-15 11:37
閱讀 3072·2021-11-04 16:05
閱讀 1926·2021-10-27 14:18
閱讀 2760·2021-08-12 13:30
閱讀 2501·2019-08-29 14:18
閱讀 2088·2019-08-29 13:07
閱讀 2027·2019-08-27 10:54
閱讀 2730·2019-08-26 12:15