史上最全最新前端面试题(不定期更新,有问题欢迎评论区对线)
一階段面試題:
CSS浮動怎么理解的
浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中,也就是脫離文檔流,所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。一般使用float來實現(xiàn)浮動,聯(lián)系=》清除浮動的相關(guān)方法。27題
絕對定位相對定位怎么理解
absolute:絕對定位,將對象從文檔流中拖離出來,使用left/right/top/bottom等屬性相對其最接近的一個并有定位設(shè)置的父元素進行絕對定位;如果不存在這樣的父對象,則依據(jù)根元素(html)《瀏覽器》進行定位,而其層疊通過z-index屬性定義。
relative :相對定位,該對象的文檔流位置不動,將依據(jù)right,top,left,bottom(相對定位)等屬性在正常文檔流中偏移位置;其層疊通過z-index屬性定義
塊元素和行內(nèi)元素、行內(nèi)塊什么區(qū)別
1.行內(nèi)元素
行內(nèi)元素最常使用的就是span,其他的只在特定功能下使用,修飾字體和標簽,還有和這兩個標簽可以直接做出平方的效果,而不需要類似移動屬性的幫助,很實用。
行內(nèi)元素特征:(1)設(shè)置寬高無效
(2)對margin僅設(shè)置左右方向有效,上下無效;padding設(shè)置上下左右都有效,即會撐大空間
(3)不會自動進行換行
2.塊狀元素
塊狀元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div來實現(xiàn)。不過為了可以方便程序員解讀代碼,一般都會使用特定的語義化標簽,使得代碼可讀性強,且便于查錯。
塊狀元素特征:(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標簽寫在一起,默認排列方式為從上至下
3.行內(nèi)塊狀元素
行內(nèi)塊狀元素綜合了行內(nèi)元素和塊狀元素的特性,但是各有取舍。因此行內(nèi)塊狀元素在日常的使用中,由于其特性,使用的次數(shù)也比較多。
行內(nèi)塊狀元素特征:(1)不自動換行
(2)能夠識別寬高
(3)默認排列方式為從左到右
這三者是可以互相轉(zhuǎn)換的,使用display屬性能夠?qū)⑷呷我廪D(zhuǎn)換:
(1)display:inline;轉(zhuǎn)換為行內(nèi)元素
(2)display:block;轉(zhuǎn)換為塊狀元素
(3)display:inline-block;轉(zhuǎn)換為行內(nèi)塊狀元素
Css如何實現(xiàn)盒子水平垂直居中
第一種:
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
第二種:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
第三種:
.middle{
width:100px;
height:100px;
background-color:tomato;
/* 水平垂直居中*/
position: absolute;
top:50%;
left:50%;
margin: -50px 0 0 -50px;
}
第四種:
#container{
width:100%;
height: 100%;
/* 子元素middle垂直居中 */
display: flex;
justify-content: center; // 水平居中
align-items:center; // 垂直居中
}
第五種:
#container{
width:100%;
height: 100%;
display: flex;
}
.middle{
width:100px;
height:100px;
background-color:tomato;
margin:auto;
}
Href 和 src的區(qū)別
1.href:Hypertext Reference的縮寫,超文本引用,它指向一些網(wǎng)絡(luò)資源,建立和當前元素或者說是本文檔的鏈接關(guān)系。在加載它的時候,不會停止對當前文檔的處理,瀏覽器會繼續(xù)往下走。常用在a、link等標簽。
2.src:source的所寫,表示的是對資源的引用,它指向的內(nèi)容會嵌入到當前標簽所在的位置。由于src的內(nèi)容是頁面必不可少的一部分,因此瀏覽器在解析src時會停下來對后續(xù)文檔的處理,直到src的內(nèi)容加載完畢。常用在script、img、iframe標簽中,我們建議js文件放在HTML文檔的最后面。如果js文件放在了head標簽中,可以使用window.onload實現(xiàn)js的最后加載。
總結(jié):href用于建立當前頁面與引用資源之間的關(guān)系(鏈接),而src則會替換當前標簽。遇到href,頁面會并行加載后續(xù)內(nèi)容;而src則不同,瀏覽器需要加載完畢src的內(nèi)容才會繼續(xù)往下走。
Px和Rem的區(qū)別
px:絕對單位,頁面按精確像素展示。
rem:相對單位, 相對根節(jié)點html的字體大小來計算,CSS3新加屬性。
7.常見的瀏覽器內(nèi)核和前綴有哪些? 微信的瀏覽器內(nèi)核是什么
Trident內(nèi)核:IE瀏覽器以Trident作為內(nèi)核引擎。(遨游,世界之窗,騰訊TT……都是IE)。-ms-
Trident內(nèi)核最慢。
Gecko內(nèi)核:開放源代碼,以C++編寫的網(wǎng)頁排版引擎,是跨平臺的。
FireFox是基于Gecko開發(fā)。-moz-
presto內(nèi)核(Opera前內(nèi)核)(已廢棄):該款引擎的特點就是渲染速度的優(yōu)化達到了極致,然而代價卻是犧牲了網(wǎng)頁的兼容性。-o-
Webkit內(nèi)核:(Safari內(nèi)核,Chrome內(nèi)核原型,開源),它是蘋果公司自己的內(nèi)核,也是蘋果的Safari瀏覽器使用的內(nèi)核。-webkit-
Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是從KDE的KHTML及KJS引擎衍生而來,它們都是自由軟件,在GPL條約下授權(quán),同時也支持BSD系統(tǒng)的開發(fā)。所有Webkit也是自由軟件,同時開放源代碼。在安全方面不受IE,FireFox的制約。所以,Safari瀏覽器在國內(nèi)還是很安全的。
微信瀏覽器內(nèi)核-------QQ瀏覽器X5內(nèi)核
也就是說微信、手機QQ內(nèi)置瀏覽器都是騰訊的QQ瀏覽器。
X5內(nèi)核是騰訊基于開源Webkit優(yōu)化的瀏覽器渲染引擎,目前除了微信、手機QQ、京東等有30多款APP內(nèi)置瀏覽器都是基于X5內(nèi)核。
html5中新增哪些api
多媒體:baivideo、audio、
游戲:canvas、webgl、
存儲du:localstorage、sessonstorage、websql、indexedDB
網(wǎng)絡(luò):websocket
html5新增哪些標簽
h5是html的最新版本,是14年由baiw3c完成標準制du定。增強了,瀏覽zhi器的原生功能,減少瀏覽器插件(eg:flash)的應(yīng)用,提dao高用戶體驗滿意度,讓開發(fā)更加方便。- h5新增的標簽
新增元素
說明
video 表示一段視頻并提供播放的用戶界面
audio 表示音頻
canvas 表示位圖區(qū)域
source 為video和audio提供數(shù)據(jù)源
track 為video和audio指定字母
svg 定義矢量圖
code 代碼段
figure 和文檔有關(guān)的圖例
figcaption 圖例的說明
main
time 日期和時間值
mark 高亮的引用文字
datalist 提供給其他控件的預定義選項
keygen 秘鑰對生成器控件
output 計算值
progress 進度條
menu 菜單
embed 嵌入的外部資源
menuitem 用戶可點擊的菜單項
menu 菜單
template
section
nav
aside
article
footer
header
移動端怎么做適配
一:meta viewport
meta viewport屬性主要是讓viewport的寬度等于當前設(shè)備的寬度,也可以按照需求來限制用戶是否可以縮放。
你們以前移動端是怎么寫的
布局,寫樣式,寫功能,上線
你們以前移動端是怎么布局的
1.固定meta視圖
1
這種寫法中,利用meta標簽,將視圖寬度定位了750px,固定值,也就是ios6的標準,然后css也是基于750px的設(shè)計稿進行布局。
優(yōu)點:前端開發(fā)十分快速,都是死值。
缺點:匹配不完全,手機像素高于這個的,顯示這個效果,不理想狀態(tài);低于這個狀態(tài)的,不兼容這個狀態(tài);固定寬在做項目的時候由于每個手機屏幕的高度不同需要有一個最小的內(nèi)容區(qū)域。
2.rem布局
rem是一種基于頁面根元素的布局方式
當手機屏幕大小改變了,只要改變對應(yīng)的頁面根元素,就可以實現(xiàn)頁面的縮小放大。按照750px的設(shè)計稿,進行布局的時候 可以在head中添加下圖的一段j,監(jiān)聽屏幕改變,從而動態(tài)改變頁面根元素的fonsize大小,對頁面進行縮放改變
換句話說 設(shè)置根元素 fontsize=16px 那么 1rem=16px,所以根據(jù)屏幕大小 而動態(tài)改變 fontsize的值,從而做到 移動端rem適配效果。
優(yōu)點:引入js后,通過動態(tài)修改根元素fontsize,根據(jù)手機屏幕 自動縮放
缺點:head中 就要引入js,會有一點加載影響
3.meta媒體查詢 動態(tài)設(shè)置,幾個手機的比例,進行對應(yīng)匹配;
meta標簽,通過媒體查詢 按照不同手機的像素寬高不同,進行條件匹配
優(yōu)點:根據(jù)不同手機定制不同css,達到完美展示
缺點:需要寫匹配很多手機,寫很多套css,對前端工作量比較大
4.改變縮放比例,進行布局,類似于第2種方式,2是根據(jù)設(shè)備寬高對根元素進行font-size的動態(tài)改變,4這種方式則是通過改變meta種縮放比例,來進行動態(tài)改變頁面的
這里有一個點需要說明
像素比 window.devicePixelRatio = 設(shè)備像素/css像素
(補充一下 分辨率 和像素的 內(nèi)容: 某博客內(nèi)容
高分辨率:eg每一毫米5像素點,像素點越多,色塊越多,頁面越清晰
低分辨率:eg每一毫米3像素點,像素點越少,色塊越少,頁面越模糊
肉眼看得請不清晰,跟屏幕實際尺寸的大小沒關(guān)系,而跟單位長度的像素點有關(guān),低分辨率的放在大屏上 也只是一個 放大的不清楚的畫面而已,對于前端開發(fā)來說,設(shè)計圖是1920或者是1366并不代表是寬度。
所以當你的網(wǎng)頁完全按照設(shè)計圖使用px來實現(xiàn)的話,有可能出現(xiàn)兩種情況:
- html寬度用了設(shè)計圖1366px,但無奈到了1024的電腦或者手機的時候,就會出現(xiàn)了橫向滾動條
- html寬度用了設(shè)計圖1366px,到了1920的電腦上,就會出現(xiàn)大量的留白
5.百分比布局
將整個頁面 按照百分比 進行布局 對于寬度 比較好把握 但是 高度還是需要具體的值
你對語義化標簽是怎么理解的?有什么好處?
什么是標簽語義化?
<基本上都是圍繞著幾個主要的標簽,像標題(H1~H6)、列表(li)、強調(diào)(strong em)等等>
根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化),選擇合適的標簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
標簽語義化有什么意義?
為了在沒有CSS的情況下,頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時好看;
用戶體驗:例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用;
有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重;
方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動設(shè)備)以意義的方式來渲染網(wǎng)頁;
便于團隊開發(fā)和維護,語義化更具可讀性,是下一步吧網(wǎng)頁的重要動向,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。
Css3動畫有哪些
2D:transform屬性,包括位移translate()、旋轉(zhuǎn)rotate()、縮放scale()、傾斜skew()
3D:transform-style屬性,有兩個屬性值:flat和preserve-3d,包括3D位移translate3d(tx,ty,tz)、3D旋轉(zhuǎn)rotate3d(x,y,z,a)、3D縮放scale3d(sx,sy,sz)
使用 CSS 預處理器嗎?喜歡哪個?
工作流程:
各種預處理器語法不一樣,但最終工作流程是一樣的,以Sass為例。
以Sass提供的語法規(guī)則編寫樣式代碼
經(jīng)過編譯器把Sass編寫的代碼轉(zhuǎn)換成標準的CSS代碼
瀏覽器加載解析轉(zhuǎn)換后的CSS樣式(瀏覽器只能解析標準的CSS代碼,而不能是Sass等)
主流CSS預處理器:
Sass,2007,最早最成熟的CSS預處理器,有兩種語法,分別以 .sass 和 .scss 為擴展名。SCSS是Sass 3引入的新語法,完全兼容CSS3,并繼承了Sass的強大功能,和CSS語法結(jié)構(gòu)更接近
Less,2009,受Sass影響大,以 .less 為擴展名
Stylus,2010,來自Node.js社區(qū),主要用來給Node項目進行CSS預處理支持,以 .styl 為擴展名
可以在CSS預處理器中:使用變量、簡單邏輯判斷、函數(shù)等基本編程技巧。
CSS優(yōu)化、提高性能的方法有哪些?
1,首推的是合并css文件,如果頁面加載10個css文件,每個文件1k,那么也要比只加載一個100k的css文件慢。
2,減少css嵌套,最好不要套三層以上。
3,不要在ID選擇器前面進行嵌套,ID本來就是唯一的而且人家權(quán)值那么大,嵌套完全是浪費性能。
4,建立公共樣式類,把相同樣式提取出來作為公共類使用,比如我們常用的清除浮動等。
5,減少通配符*或者類似[hidden=“true”]這類選擇器的使用,挨個查找所有…這性能能好嗎?當然重置樣式這些必須 的東西是不能少的。
6,巧妙運用css的繼承機制,如果父節(jié)點定義了,子節(jié)點就無需定義。
7,拆分出公共css文件,對于比較大的項目我們可以將大部分頁面的公共結(jié)構(gòu)的樣式提取出來放到單獨css文件里, 這樣一次下載后就放到緩存里,當然這種做法會增加請求,具體做法應(yīng)以實際情況而定。
8,不用css表達式,表達式只是讓你的代碼顯得更加炫酷,但是他對性能的浪費可能是超乎你的想象的。
9,少用css rest,可能你會覺得重置樣式是規(guī)范,但是其實其中有很多的操作是不必要不友好的,有需求有興趣的 朋友可以選擇normolize.css
10,cssSprite,合成所有icon圖片,用寬高加上bacgroud-position的背景圖方式顯現(xiàn)出我們要的icon圖,這是一種 十分實用的技巧,極大減少了http請求。
11,當然我們還需要一些善后工作,CSS壓縮(這里提供一個在線壓縮 YUI Compressor ,當然你會用其他工具來壓縮是十 分好的),
12,GZIP壓縮,Gzip是一種流行的文件壓縮算法,詳細做法可以谷歌或者百度
怎么讓Chrome支持小于12px 的文字
通過對文字區(qū)域局部應(yīng)用以下樣式解決:針對谷歌瀏覽器內(nèi)核,加webkit前綴,用transform:scale()這個屬性進行縮放。
CSS3有哪些新特性?
1.CSS3實現(xiàn)圓角(border-radius),陰影(box-shadow),
2.對文字加特效(text-shadow、),線性漸變(gradient),旋轉(zhuǎn)(transform)
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉(zhuǎn),縮放,定位,傾斜
4.增加了更多的CSS選擇器 多背景 rgba
5.在CSS3中唯一引入的偽元素是 ::selection.
6.媒體查詢,多欄布局
7.border-image
html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區(qū)分HTML和HTML5?
新特性:
拖拽釋放(Drag and drop) API
語義化更好的內(nèi)容標簽(header,nav,footer,aside,article,section)
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
表單控件,calendar、date、time、email、url、search
新的技術(shù)webworker, websocket, Geolocation
移除的元素:
純表現(xiàn)的元素:basefont,big,center,font, s,strike,tt,u;
對可用性產(chǎn)生負面影響的元素:frame,frameset,noframes;
支持HTML5新標簽:
IE8/IE7/IE6支持通過 document.createElement 方法產(chǎn)生的標簽,可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽,瀏覽器支持新標簽后,還需要添加標簽?zāi)J的樣式(當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架):
如何區(qū)分:
DOCTYPE聲明新增的結(jié)構(gòu)元素、功能元素
::before 和 :after中雙冒號和單冒號 有什么區(qū)別?
· 在 CSS 中偽類一直用 : 表示,如 :hover, :active ,:visited,:link等
· 偽元素在CSS1中已存在,當時語法是用 : 表示,如 :before 和 :after
· 后來在CSS3中修訂,偽元素用 :: 表示,如 ::before 和 ::after,以此區(qū)分偽元素和偽類
· 由于低版本IE對雙冒號不兼容,開發(fā)者為了兼容性各瀏覽器,繼續(xù)使使用 :after 這種老語法表示偽元素
· 綜上所述:::before 是 CSS3 中寫偽元素的新語法; :after 是 CSS1 中存在的、兼容IE的老語法
說下遇到的各種兼容性的處理方法?
1、不同瀏覽器的標簽?zāi)J的margin和padding不同
解決方案:可以使用Normalize來清除默認樣式。
2、塊屬性標簽float后,又有橫行的margin情況下,在IE6顯示margin比設(shè)置的大。
解決方案:在float的標簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
3、設(shè)置較小高度標簽(一般小于10px),在IE6,IE7中高度超出自己設(shè)置高度
解決方案:給超出高度的標簽設(shè)置overflow:hidden;
4、阻止事件冒泡
e.stopPropagation();ie:window.event.cancelBubble = true;
Html盒模型的不同?
w3c的盒子模型: padding和border不被包含在定義的width和height之內(nèi)。對象的實際寬度等于設(shè)置的width值和border、padding之和,即 ( Element width = width + border + padding ) 此屬性表現(xiàn)為標準模式下的盒模型。
IE的盒子模型: padding和border被包含在定義的width和height之內(nèi)。對象的實際寬度就等于設(shè)置的width值,即使定義有border和padding也不會改變對象的實際寬度,即 ( Element width = width ) 。
一般都使用標準的w3c盒子模型,如果需要使用IE的盒子模型,可以使用box-sizing屬性進行修改。
W3C盒模型是與IE盒模型的區(qū)別就是對寬高的定義不同。
W3C認為:寬高是內(nèi)容區(qū)的寬度(只包含節(jié)點顯示的具體內(nèi)容)content-box
IE認為:寬高是顯示效果的實際效果(包含節(jié)點的全部內(nèi)容)border-box
響應(yīng)式布局
響應(yīng)式布局概念
Responsive design,意在實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應(yīng)式設(shè)計能使網(wǎng)站在手機和平板電腦上有更好的瀏覽閱讀體驗。·
響應(yīng)式設(shè)計的步驟
設(shè)置 Meta 標簽
通過媒介查詢來設(shè)置樣式 Media Queries
設(shè)置多種試圖寬度
透明度opacity和rgba的區(qū)別?
rgba()和opacity都能實現(xiàn)透明效果,但最大的不同是opacity作用于元素,以及元素內(nèi)的所有內(nèi)容的透明度,而rgba()只作用于元素的顏色或其背景色。(設(shè)置rgba透明的元素的子元素不會繼承透明效果!)使用Opacity時,背景和背景內(nèi)的元素都會透明;而rgba()只會讓背景透明。
兼容IE8以下的瀏覽器你是如何編寫css樣式的
IE hacks:
“_” 是IE6 專有的hack;
“\9” 對IE6-IE10都有效;
"\0"對IE8-IE10都有效;
"\9\0"對IE9-IE10都有效;
優(yōu)點:
CSS hacks 內(nèi)嵌在普通的 CSS 里面,不會產(chǎn)生更多 HTTP 請求。CSS hacks 內(nèi)嵌在普通的 CSS 里面,編寫時比較方便。
缺點:
它是不標準的產(chǎn)物。內(nèi)嵌在其他 CSS 中,不便維護。尤其是當 hacks 的數(shù)量比較多的時候維護簡直是個惡夢。內(nèi)嵌在其他 CSS 中,即使在非 IE 瀏覽器中也會被加載,浪費資源。
2.條件注釋 CSS:
并且條件注釋對于其他所有瀏覽器作為常規(guī)注釋出現(xiàn),因此對其他瀏覽器無害
優(yōu)點:
條件注釋 CSS 的好處是在獨立的 CSS 文件中編寫,能準確控制在特定的 IE 中加載,不會造成資源浪費,并且便于維護。
缺點:
就是會產(chǎn)生多余的 HTTP 請求,尤其是當你需要兼容的 IE 版本很多的時候,你就需要產(chǎn)生多個 HTTP 請求,這對于本來通道數(shù)目就少的低版本 IE 來說無疑會影響頁面加載速度。
以上兩種方法不是很好,以下的方法相對來說會好點;
3.條件注釋 html 標簽:
這種方案也是利用條件注釋,但并不是對 CSS 使用條件注釋,而是對 html 標簽使用條件注釋,引入不同的 class ,從而區(qū)分不同的 IE 以及其他瀏覽器;
然后把對特定 IE 的 CSS 加上相應(yīng)的 class 并寫在普通 CSS 文件里即可: .ie6 .header .nav {margin:0 0 0 ;padding:0 0 0 0; }
優(yōu)點:
條件注釋表達式的好處在于不會產(chǎn)生多余的 HTTP 請求;
缺點:
由于這些針對特定 IE 的 CSS 與普通的 CSS 放在一起,即不是相應(yīng)的 IE 也會被加載,因此如果 CSS 數(shù)目比較多的話就會像使用 hacks 那樣,造成浪費;
1.在ios和android下,audio和vedio不能自動播放
//方法:觸屏即播
$(‘html’).on(‘touchstart’,function(){
audio.play()
})
2.CSS動畫頁面閃白,動畫卡頻
? 方法:(1)使用transform和opacity屬性來設(shè)計動畫,不適用position的left和top來定位。
? (2)設(shè)置時,加上不同瀏覽器的前綴,如-webkit-、-moz-、-ms-、-o-
3.input的placeholder會出現(xiàn)文本位置偏上的情況
? 方法:設(shè)置line-height:normal
4.fixed定位缺陷
? ios下,當出現(xiàn)軟鍵盤的時候,會影響fixed元素定位
? 方法:使用iScroll插件解決
26.清除浮動的方法
1.overflow: hidden
2.增加額外標簽,然后添加屬性clear: both
3.給父元素添加高度
4.給所有元素添加浮動
5.使用display: inline-block
6.使用
7.after偽類清除
8.設(shè)置overflow: auto
9.設(shè)置display: table
二階段面試題:
Ajax同步和異步怎么理解的
AJAX的核心是客戶端的JavaScript程序能夠?qū)崿F(xiàn)異步執(zhí)行,異步執(zhí)行是相對與同步執(zhí)行的.同步執(zhí)行意味著代碼必須順序執(zhí)行.
Js面相對象是怎么理解的
ECMAScript 有兩種開發(fā)模式:1.函數(shù)式(過程化),2.面向?qū)ο?OOP)。面向?qū)ο蟮恼Z言有一個標志,那就是類的概念,而通過類可以創(chuàng)建任意多個具有相同屬性和方法的對象。但是,ECMAScript 沒有類的概念,因此它的對象也與基于類的語言中的對象有所不同。
js(如果沒有作特殊說明,本文中的js僅包含ES5以內(nèi)的內(nèi)容)本身是沒有class類型的,但是每個函數(shù)都有一個prototype屬性。prototype指向一個對象,當函數(shù)作為構(gòu)造函數(shù)時,prototype則起到類似class的作用。
Js寫過原生插件嗎?
寫過,比如輪播圖插件,運動插件,煙花特效插件
Js閉包是如何理解的
在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù),通過另一個函數(shù)訪問這個函數(shù)的局部變量,將函數(shù)內(nèi)部的變量和方法傳遞到外部。
簡單來說就算將函數(shù)內(nèi)部和函數(shù)外部連接起來。
apply和call的區(qū)別
Apply:B.apply(A, arguments);即A對象應(yīng)用B對象的方法。第一個參數(shù)是對象,第二個參數(shù)是是一個數(shù)組,是要替換的數(shù)據(jù)集合
Call:B.call(A, args1,args2);即A對象調(diào)用B對象的方法。第一個參數(shù)是對象,第二個往后參數(shù)是是要替換的數(shù)據(jù)
js中數(shù)組后面添加數(shù)據(jù) 數(shù)組前面添加數(shù)據(jù) 數(shù)組后面刪除數(shù)據(jù) 數(shù)組前面刪除數(shù)據(jù)用什么?
push、unshift、pop、shift
請描述一下cookies,sessionStorage和localStorage的區(qū)別?
相同點:都存儲在客戶端
不同點:
1.存儲大小
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。
2.有效時間
localStorage 存儲持久數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù);
sessionStorage 數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除。
cookie 設(shè)置的cookie過期時間之前一直有效,即使窗口或瀏覽器關(guān)閉
數(shù)據(jù)與服務(wù)器之間的交互方式
cookie的數(shù)據(jù)會自動的傳遞到服務(wù)器,服務(wù)器端也可以寫cookie到客戶端
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。
你對localStorage是怎么理解的?
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數(shù)據(jù)。
localStorage 用于長久保存整個網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時間,直到手動去刪除。
localStorage 屬性是只讀的
跨域請求是怎么理解的?
也就是觸發(fā)同源策略(同域名同協(xié)議同端口),跨域交互數(shù)據(jù)有幾種方法,jsonp(script、src、href還有ajajx等)、cors服務(wù)器代理、API
Post和get的區(qū)別是怎么理解的?
GET
POST
=> 請求頭里面的 content-type 表示請求體的數(shù)據(jù)格式
什么情況下面存在跨域
端口、協(xié)議、域名其一不一樣就會存在
你如何處理后臺接口返回的數(shù)據(jù)
通過json轉(zhuǎn)換成前端能識別的代碼
開發(fā)過程中遇到的內(nèi)存泄露情況,如何解決的?
1、定義和用法:
內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用,又不能回收,直到瀏覽器進程結(jié)束。C#和Java等語言采用了自動垃圾回收方法管理內(nèi)存,幾乎不會發(fā)生內(nèi)存泄露。我們知道,瀏覽器中也是采用自動垃圾回收方法管理內(nèi)存,但由于瀏覽器垃圾回收方法有bug,會產(chǎn)生內(nèi)存泄露。
2、內(nèi)存泄露的幾種情況:
(1)、當頁面中元素被移除或替換時,若元素綁定的事件仍沒被移除,在IE中不會作出恰當處理,此時要先手工移除事件,不然會存在內(nèi)存泄露。
(2)、由于是函數(shù)內(nèi)定義函數(shù),并且內(nèi)部函數(shù)–事件回調(diào)的引用外暴了,形成了閉包。閉包可以維持函數(shù)內(nèi)局部變量,使其得不到釋放。
實例如下
網(wǎng)站如何優(yōu)化?
減少http請求 代碼合并整合
網(wǎng)站加載速度慢如何優(yōu)化
提高網(wǎng)速、靜態(tài)化生成頁面、減少http請求,整合css代碼和js代碼、壓縮圖片
網(wǎng)站seo優(yōu)化有哪些方法?
1、戰(zhàn)略的制定:通過數(shù)據(jù)分析用戶需求和競爭對手,找出SEO優(yōu)化的突破口。
2、關(guān)鍵詞挖掘:根據(jù)用戶需求和SEO優(yōu)化的突破口進行關(guān)鍵詞挖掘。
3、網(wǎng)站搭建:按照戰(zhàn)略目標,有計劃的制定網(wǎng)站建設(shè)框架,網(wǎng)站搭建分為幾個步驟:導航設(shè)計、頁面框架、確定草圖、設(shè)計設(shè)置展示。網(wǎng)站搭建之后就可以根據(jù)我們之前設(shè)計的框架對導航、首頁、目錄頁、內(nèi)頁的標題和url進行設(shè)置了,同時也可以根據(jù)內(nèi)容框架開始給網(wǎng)站填充內(nèi)容。
4、優(yōu)化戰(zhàn)略制定:首先,戰(zhàn)略制定是SEO基礎(chǔ)操作必須做好的一個工作。所謂的戰(zhàn)略的制定就是我們要通過數(shù)據(jù)分析滿足到我們網(wǎng)站的用戶最大的搜索需求,并且通過對比競爭對手找到最適合的SEO優(yōu)化方向。戰(zhàn)略制定分為四個部分。
Seo針對搜索引擎操作的
一次完整的HTTP事務(wù)是怎樣的一個過程?
客戶端輸入url回車后解析成ip地址向服務(wù)器發(fā)送請求(三次握手),服務(wù)器端接收請求,查看路徑,給你做出響應(yīng)
服務(wù)器響應(yīng),數(shù)據(jù)到了前端,渲染到頁面中
你以前用過哪些js庫和框架
jQuery、Angular、vue、react
ajax請求時,如何解釋json數(shù)據(jù)
JSON.parse(xhr.responseText)
如何阻止事件冒泡和默認事件
阻止默認事件
非IE
e.stopPropagation();
IE
window.event.cancelBubble = true;
阻止默認事件
//全支持
// event.preventDefault();
//該特性已經(jīng)從 Web 標準中刪除,雖然一些瀏覽器目前仍然支持它,但也許會在未來的某個時間停止支持,請盡量不要使用該特性。
// window.event.returnValue = false;
//不建議濫用,jq中可以同時阻止冒泡和默認事件
// return false;
// 兼容
// stopDefault(event)
解釋jsonp的原理,以及為什么不是真正的ajax
①Ajax與JSONP這兩種技術(shù)看起來很像,目的也一樣,都是請求一個url,然后把服務(wù)器返回的數(shù)據(jù)進行處理,因此jQuery等框架都把JSONP作為Ajax的一種形式。
②實際上Ajax與JSONP有著本質(zhì)上的不同。Ajax的核心是通過XMLHttpRequest獲取數(shù)據(jù),而JSONP的核心則是動態(tài)添加
1.bind()函數(shù)只能針對已經(jīng)存在的元素進行事件的設(shè)置;但是live(),on(),delegate()均支持未來新添加元素的事件設(shè)置;演示代碼如下:
View Code
2.bind()函數(shù)在jquery1.7版本以前比較受推崇,1.7版本出來之后,官方已經(jīng)不推薦用bind(),替代函數(shù)為on(),這也是1.7版本新添加的函數(shù),同樣,可以
用來代替live()函數(shù),live()函數(shù)在1.9版本已經(jīng)刪除;
3.live()函數(shù)和delegate()函數(shù)兩者類似,但是live()函數(shù)在執(zhí)行速度,靈活性和CSS選擇器支持方面較delegate()差些,想了解具體情況,請戳這:
http://kb.cnblogs.com/page/94469/
3.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;
Jquery與jQuery UI有啥區(qū)別?
jQuery UI 與 jquery 的主dao要區(qū)別是:
(1) jQuery是一du個js庫,主要提供的zhi功能是選擇器,屬性dao修改和事件綁定內(nèi)等等。
(2) jQuery UI則是在容jQuery的基礎(chǔ)上,利用jQuery的擴展性,設(shè)計的插件。提供了一些常用的界面元素,諸如對話框、拖動行為、改變大小行為等等。
(3) jQuery本身注重于后臺,沒有漂亮的界面,而jQuery UI則補充了前者的不足,他提供了華麗的展示界面,使人更容易接受。既有強大的后臺,又有華麗的前臺。jQuery UI是jQuery插件,只不過專指由jQuery官方維護的UI方向的插件。
Zepto如何理解的
Zepto是一個輕量級的針對現(xiàn)代高級瀏覽器的JavaScript庫, 它與jquery有著類似的api。 如果你會用jquery,那么你也會用zepto。
zepto與jquery的區(qū)別
jquery針對pc端,主要用于解決瀏覽器兼容性問題,zepto主要針對移動端。
zepto比jquery輕量,文件體積更小
zepto封裝了一些移動端的手勢事件
zepto的使用與jquery基本一致,zepto是分模塊的,需要某個功能,就需要引入某個zepto的文件。
requireJS是怎么理解的
RequireJS 是一個JavaScript模塊加載器。
在ES6出現(xiàn)之前,JS不像其他語言同樣擁有“模塊”這一概念,于是為了支持JS模塊化,出現(xiàn)了各種各樣的語言工具,如webpack,如ReuqireJS。
模塊化:模塊化就是將不同功能的函數(shù)封裝起來,并提供使用接口,他們彼此之間互不影響。
· 不會阻塞頁面:RequireJS,會在相關(guān)的js加載后執(zhí)行回調(diào)函數(shù),這個過程是異步的,所以它不會阻塞頁面。
· 按需加載:平時我們寫html文件的時候,在底部可能會引用一堆js文件。在頁面加載的時候,這些js也會全部加載。使用require.js就能避免此問題。舉個例子,比如說我寫了一個點擊事件,放到了一個js文件里,并在html引用,在不使用require.js的情況下,頁面加載它跟著加載,使用后則是什么時候觸發(fā)點擊事件,什么時候才會加載js。
require.js將javascript模塊化確實比較好用,語法也簡單,主要掌握三個語法就能實現(xiàn)一定的功能,即require.config()、require()、define()。但可惜自從webpack出現(xiàn)后,RequireJs幾乎退出了人們的視野,官網(wǎng)也不再升級版本,后續(xù)出現(xiàn)的框架如angular、React、Vue又將前端模塊上升到了另外一個高度。跟隨前端時代的變遷固然重要,但有時,嘗試一些“老技術(shù)”也無可厚非,或許也能給我們帶來不同的體。
jQuery的優(yōu)點
(1)輕量級:JQuery非常輕巧,采用Dean Edwards編寫的Packer壓縮后,大小不到30KB,如果使用Min版并且在服務(wù)器端啟用Gzip壓縮后,大小只有18KB。
(2)強大的選擇器:JQuery允許開發(fā)者使用從CSS1到CSS3幾乎所有的選擇器,以及JQuery獨創(chuàng)的高級而且復雜的選擇器,另外還可以加入插件使其支持XPath選擇器,甚至開發(fā)者可以編寫屬于自己的選擇器。
(3)出色的DOM操作的封裝:JQuery封裝了大量常用的DOM操作,使開發(fā)者在編寫DOM操作相關(guān)程序的時候能夠得心應(yīng)手。
(4)可靠的事件處理機制:JQuery的事件處理機制吸收了JavaScript專家Dean Edwards編寫的事件處理函數(shù)的精華,是的JQuery在處理事件綁定的時候相當可靠。
(5)完善的Ajax:JQuery將所有的Ajax操作封裝到一個函數(shù).ajax()里,使得開發(fā)者處理Ajax的時候能夠?qū)P奶幚順I(yè)務(wù)邏輯而無需關(guān)心復雜的瀏覽器兼容性和XMLHttpRequest對象的創(chuàng)建和使用的問題。(6)不污染頂級變量:JQuery只建立一個名為JQuery的對象,其所有的函數(shù)方法都在這個對象之下。其別名.ajax()里,使得開發(fā)者處理Ajax的時候能夠?qū)P奶幚順I(yè)務(wù)邏輯而無需關(guān)心復雜的瀏覽器兼容性和XMLHttpRequest對象的創(chuàng)建和使用的問題。 (6)不污染頂級變量:JQuery只建立一個名為JQuery的對象,其所有的函數(shù)方法都在這個對象之下。其別名.ajax()里,使得開發(fā)者處理Ajax的時候能夠專心處理業(yè)務(wù)邏輯而無需關(guān)心復雜的瀏覽器兼容性和XMLHttpRequest對象的創(chuàng)建和使用的問題。(6)不污染頂級變量:JQuery只建立一個名為JQuery的對象,其所有的函數(shù)方法都在這個對象之下。其別名也可以隨時交流控制權(quán),絕對不會污染其他的對象。該特性是JQuery可以與其他JavaScript庫共存,在項目中放心地引用而不需要考慮到后期的沖突。
(7)出色的瀏覽器兼容性:JQuery能夠在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常運行。JQuery同時修復了一些瀏覽器之間的的差異,使開發(fā)者不必在開展項目前建立瀏覽器兼容庫。
(8)鏈式操作方式:JQuery中最有特色的莫過于它的鏈式操作方式——即對發(fā)生在同一個JQuery對象上的一組動作,可以直接接連寫無需要重復獲取對象。這一特點使得JQuery的代碼無比優(yōu)雅。
(9)隱式迭代:當用JQuery找到帶有“.myClass”類的全部元素,然后隱藏他們時。無需循環(huán)遍歷每一個返回的元素。相反,JQuery里的方法都被設(shè)計成自動操作的對象集合,而不是單獨的對象,這使得大量的循環(huán)結(jié)構(gòu)變得不再必要,從而大幅度地減少代碼量。
(10)行為層與結(jié)構(gòu)層的分離:開發(fā)者可以使用選擇器選中元素,然后直接給元素添加事件。
(11)豐富的插件:JQuery的易擴展性,吸引了來自全球開發(fā)者來編寫JQuery的擴展插件。目前已經(jīng)有超過幾百種官方插件支持,而且還不斷有新插件面試。
(12)完善的文檔:JQuery的文檔非常豐富,現(xiàn)階段多位英文文檔,中文文檔相對較少。很多熱愛JQuery的團隊都在努力完善JQuery中文文檔,例如JQuery的中文API。
(13)開源:JQuery是一個開源的產(chǎn)品,任何人都可以自由地使用并提出修改意見。
懶加載的原理?
意義:懶加載的主要目的就是作為服務(wù)器前端的優(yōu)化,減少請求次數(shù)或者延遲請求數(shù)。
實現(xiàn)原理:先加載一部分數(shù)據(jù),當觸發(fā)某個條件時利用異步(async)加載剩余的數(shù)據(jù),新得到的數(shù)據(jù)不會影響原有數(shù)據(jù)的顯示,同時最大幅度的減少服務(wù)器端資源耗用。
數(shù)組的所有遍歷方法,包括es6
1.For循環(huán) 2.forEach循環(huán) 3.map循環(huán) 4.for of遍歷 5.for in遍歷 6.filter遍歷
7.every遍歷 8.some遍歷 9.indexOf 10.find 11.findIndex 12.includes 13.reduce
14.reduceRight
說下事件委托是什么?有什么好處?
事件委托就是利用事件冒泡機制指定一個事件處理程序,來管理某一類型的所有事件。
即:利用冒泡的原理,把事件加到父級上,觸發(fā)執(zhí)行效果。
好處:
只在內(nèi)存中開辟了一塊空間,節(jié)省資源同時減少了dom操作,提高性能
對于新添加的元素也會有之前的事件。
開發(fā)過程中有什么編碼規(guī)范?
HTML規(guī)范
一.DOCTYPE的聲明: 每個HTML開頭使用!doctype來啟用標準模式聲明,在此建議使用HTML5的聲明模式
二.字符集和編碼字符: 在每個頁面的head中設(shè)置字符集,一般都是使用"UTF-8"
三.語法: 使用四個空格的縮進 在屬性上使用雙引號 不要忽略可選的關(guān)閉標簽
四.引入css樣式以及js腳本: 需要采用外鏈的形式引入css樣式/js腳本,方便管理和修改
五.正確的標簽嵌套
除了固定的嵌套規(guī)則(如ul包含li,ol包含li等),一般遵循以下規(guī)則:
1.塊級元素與塊級元素平級、內(nèi)聯(lián)元素與內(nèi)聯(lián)元素平級
2.塊級元素可以包含內(nèi)聯(lián)元素或某些塊級元素,但內(nèi)聯(lián)元素不能包含塊級元素
3.有幾個特殊的塊級元素只能包含內(nèi)聯(lián)元素,不能再包含塊級元素 h1~h6、p、dt。
4.塊級元素不能放在標簽p里面。
5.li標簽可以包含div標簽,因為li和div標簽都是裝在內(nèi)容的容器。
六.屬性順序
HTML屬性應(yīng)該按照特定的順序出現(xiàn)保證可讀性
除了固定的嵌套規(guī)則(如ul包含li,ol包含li等),一般遵循以下規(guī)則:
1.class
2.id、name.
3.data-*
4.src,for,tpye,href等
5.title,alt
6.role,aria-*
七.邏輯順序
盡量讓自己的網(wǎng)站按照先后順序 比如先寫頁頭,在寫頁體,最后寫頁腳
CSS書寫規(guī)范
一.聲明順序
1.positioning 定位
2.因為可使一個元素脫離文檔流,覆蓋盒模型相關(guān)的樣式
3.Box model盒模型
4.Typographic 排版
5.Visual 外觀
二.媒體查詢
盡量將媒體查詢的位置靠近他們的相關(guān)的規(guī)則。不要把他們放在一個獨立 文件當中,也不要寫在最底下,以免容易忘記
三.CLASS的命名
不但要自己能看懂代碼,也要別人能輕松讀懂自己的代碼。
1.規(guī)則命名中,一律采用小寫加中劃線的方式,不允許使用大寫字母或_
2.命名避免使用中文拼音,應(yīng)該采用更簡明有語義的英文單詞進行組合+
3.不允許通過1、2、3等序號進行命名;避免class與id重名
4.class用于標識某一個類型的對象,命名必須言簡意賅
5.盡可能提高代碼模塊的復用,樣式盡量用組合的方式
6.規(guī)則名稱中不應(yīng)該包含顏色(red/blue)、定位(left/right)等與具體顯示效果相關(guān)的信息。 應(yīng)該用意義命名,而不是樣式顯示結(jié)果命名
四.屬性簡寫
堅持限制屬性取值簡寫的使用,過度使用屬性簡寫往往會導致更混亂的代碼。 常見的屬性簡寫濫用包括: padding,margin,font,background等
實現(xiàn)多個標簽頁的通信?(就是localStorage和cookie)
在一個標簽頁里面使用 localStorage.setItem(key,value)添加(修改、刪除)內(nèi)容;
在另一個標簽頁里面監(jiān)聽 storage 事件。即可得到 localstorge 存儲的值,實現(xiàn)不同標簽頁之間的通信。將要傳遞的信息存儲在cookie中,每隔一定時間讀取cookie信息,即可隨時獲取要傳遞的信息。
在瀏覽器中輸入url到整個頁面顯示在用戶面前時,這個過程發(fā)生了什么?
①域名解析
②發(fā)起請求
③相應(yīng)請求
④瀏覽器解析
常見的http請求方式,以及區(qū)別?
GET:從服務(wù)器獲取數(shù)據(jù)(給的少拿的多)
POST:向服務(wù)器推送數(shù)據(jù)(給的多拿的少)
DELETE:刪除服務(wù)器的一些內(nèi)容
PUT:向服務(wù)器存放一些內(nèi)容
HEAD:只請求頁面的頭部
TRACE(或OPTIONS):發(fā)送一個探測性請求,如果返回了信息說明建立了連接
記住幾個常用的狀態(tài)碼(200,400,401,404,500)
200,服務(wù)器成功處理請求。400,錯誤請求。401,服務(wù)器未授權(quán),先驗證身份。
201,404,服務(wù)器找不到請求的頁面。500,服務(wù)器內(nèi)部錯誤。
Es6你用過什么?具體說下
(1)let/const 特性:let定義的變量只能在代碼塊{}里面使用,形成一個{}塊級作用域,var作用于函數(shù)作用域。let不允許重復聲明,它是一個封閉空間,解決了i問題。const用來定義常量,一旦定義了,后面就不能修改了。
(2)箭頭函數(shù):沒有this、super、arguments和new.target綁定;不能通過new關(guān)鍵字調(diào)用;沒有原型;不可以改變this的綁定;不支持arguments對象;不支持重復的命名參數(shù)。
(3)解構(gòu)賦值:左右兩邊結(jié)構(gòu)一樣;右邊必須是合法結(jié)構(gòu);聲明和賦值寫在一句話中。
(4)模板字符串:用反引號()標識,它可以當作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量,還支持插入、字符串連接、表達式、換行。
(5)模塊化:
exprot default // 導出
import modA from ‘./a.js’ // 引入模塊
(6)參數(shù):rest參數(shù):ES6 引入 rest 參數(shù)(形式為…變量名),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用arguments對象了。rest 參數(shù)搭配的變量是一個數(shù)組,該變量將多余的參數(shù)放入數(shù)組中。
(7)Map:Map 是一個可以存儲鍵值對的對象。其中鍵和值都可以是對象。
Map對象基本方法:
set(‘屬性’,‘屬性值’) 添加操作
has(‘屬性’)
get(‘屬性’) 通過屬性來獲去屬性值
clear() 清空
delete() 刪除
(8)Set:Set跟數(shù)組很像,集合中的數(shù)據(jù)是唯一的。
Set中的方法:
- add() 添加數(shù)據(jù)
- clear() 清空集合
- has() 檢車集合中是否存在制定的數(shù)據(jù)
- forEach() 遍歷
- delete() 刪除成員
(9)for Each:可以使用foreach進行循環(huán),然后再執(zhí)行一個函數(shù),函數(shù)的第一個參數(shù)是數(shù)組的每一項,第二個參數(shù)是數(shù)組的索引(index),第三表示改元素所在數(shù)組的全部數(shù)據(jù)(整個數(shù)組數(shù)據(jù))。
(10)filter方法: 過濾篩選的作用,數(shù)組filter后,返回的結(jié)果為新的數(shù)組。
你對前端工程師的理解是什么?在代碼方面有什么難度?
前端開發(fā)工程師,是從事Web前端開發(fā)工作的工程師。主要進行網(wǎng)站開發(fā),優(yōu)化,完善的工作。不過,現(xiàn)階段的網(wǎng)站開發(fā)已經(jīng)不同于早年的網(wǎng)頁設(shè)計,當時主要是以圖片和文字為主,用戶使用網(wǎng)站的行為也以瀏覽為主,這些的東西html就可以辦到。而現(xiàn)在的前端開發(fā)使得現(xiàn)代網(wǎng)頁更加美觀,交互效果顯著,功能更加強大。所以現(xiàn)在的前端開發(fā),能做到的更多,運用到的知識面更加廣泛,要學習到的知識也就更多,三大基礎(chǔ)技能html、CSS和JavaScript是少不了的。
45.變量命名規(guī)則
變量名首字母必須為字母(a-z A-Z),下劃線(),或者美元符號($)開始。
變量名只能是字母(a-z A-Z),數(shù)字(0-9),下劃線()的組合,并且之間不能包含空格,數(shù)字不能放在變量名首位。
變量名不能使用編程語言的保留字。比如在javascript中不能使用true,false,while,case,break保留字等等。
三階段面試題:
你對MVC、MVVM的理解?
M、V、C
Model(模型):是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分。
View(視圖):是應(yīng)用程序中處理數(shù)據(jù)顯示的部分。
Controller(控制器):是應(yīng)用程序中處理用戶交互的部分。
M、V、VM
· 模型層 (Model):負責從各種數(shù)據(jù)源中獲取數(shù)據(jù);
· 視圖層 (View):在 Android 中對應(yīng)于 Activity 和 Fragment,用于展示給用戶和處理用戶交互,會驅(qū)動 ViewModel 從 Model 中獲取數(shù)據(jù);
· ViewModel 層:用于將 Model 和 View 進行關(guān)聯(lián),我們可以在 View 中通過 ViewModel 從 Model 中獲取數(shù)據(jù);當獲取到了數(shù)據(jù)之后,會通過自動綁定,比如 DataBinding,來將結(jié)果自動刷新到界面上。
你知道哪些htlm5的移動端框架。
1.jquery mobile框架
2.bootstrap框架
3.ionic框架
4.Mobile Angular UI框架
5.Intel XDK框架
6.Appcelerator Titanium框架
7.Sencha Touch框架
8.Kendo UI框架
9.PhoneGap框架
知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優(yōu)點和缺點么?
angular、backbone、knockout都是完整的MV*框架
angular是雙向數(shù)據(jù)綁定的,backbone、knockout是單向數(shù)據(jù)綁定的
React只是單純地View層
常使用的庫有哪些?常用的前端開發(fā)工具?開發(fā)過什么應(yīng)用或組件?
常使用的js庫:jQuery Bootstrap.js vue.js react.js
常用的前端開發(fā)工具:webstorm sublime vs code
開發(fā)過的應(yīng)用:歡樂上墻、微信小程序“信息加密”
你怎么看待Web App 、hybrid App、Native App?
Native App
Native App是一種基于智能手機本地操作系統(tǒng)如iOS、Android、WP并使用原生程式編寫運行的第三方應(yīng)用程序,也叫本地app。
常用語言當然就是
iOS :Objective-C swift
Android :JAVA
Windowsphone :C++
優(yōu)點:
(1)打造完美的用戶體驗
(2)性能穩(wěn)定
(3)操作速度快,上手流暢
(4)訪問本地資源(通訊錄,相冊)
(5)設(shè)計出色的動效,轉(zhuǎn)場,
(6)擁有系統(tǒng)級別的貼心通知或提醒
(7)用戶留存率高
缺點:
(1)分發(fā)成本高(不同平臺有不同的開發(fā)語言和界面適配)
(2)維護成本高(例如一款App已更新至V5版本,但仍有用戶在使用V2, V3, V4版本,需要更多的開發(fā)人員維護之前的版本)
(3)更新緩慢,根據(jù)不同平臺,提交–審核–上線 等等不同的流程,需要經(jīng)過的流程較復雜
Web App
Web App,顧名思義是指基于Web的應(yīng)用,基本采用Html5語言寫出,不需要下載安裝。類似于現(xiàn)在所說的輕應(yīng)用。基于瀏覽器運行的應(yīng)用,基本上可以說是觸屏版的網(wǎng)頁應(yīng)用。
優(yōu)點
(1)開發(fā)成本低,
(2)更新快,
(3)更新無需通知用戶,不需要手動升級,
(4)能夠跨多個平臺和終端。
缺點:
(1)臨時性的入口
(2)無法獲取系統(tǒng)級別的通知,提醒,動效等等
(3)用戶留存率低
(4)設(shè)計受限制諸多
(5)體驗較差
比如我們經(jīng)常使用的日歷工資計算器、網(wǎng)頁地圖等等
Hybrid App(混合模式移動應(yīng)用)
Hybrid APP指的是半原生半Web的混合類App,兼具“Native App良好用戶交互體驗的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”。
需要下載安裝,看上去類似Native App,但只有很少的UI Web View,訪問的內(nèi)容是 Web 。
混合式 APP 目前有越來越火的趨勢,一大原因是可以進行“熱更新”,不再受限于審核、上線等等繁復的流程。
AppStore里的電商類、新聞類APP,視頻類APP普遍采取的是Native的框架,Web的內(nèi)容。如淘寶、騰訊新聞等等。
Hybrid App 極力去打造類似于Native App 的體驗,但仍受限于技術(shù),網(wǎng)速,等等很多因素。
Hybrid App按網(wǎng)頁語言與程序語言的混合,又分為四種類型:
多View混合型
即Native View和Web View獨立展示,交替出現(xiàn)。
這種應(yīng)用混合邏輯相對簡單。即在需要的時候,將WebView當成一個獨立的View(Activity)運行起來,在WebView內(nèi)完成相關(guān)的展示操作。這種移動應(yīng)用主體通常是Native App,Web技術(shù)只是起到補充作用。開發(fā)難度和Native App基本相當。
單View混合型
即在同一個View內(nèi),同時包括Native View和Web View,互相之間是覆蓋(層疊)的關(guān)系。
這種Hybrid App的開發(fā)成本較高,開發(fā)難度較大,但是體驗較好。
如百度搜索為代表的單View混合型移動應(yīng)用,既可以實現(xiàn)充分的靈活性,又能實現(xiàn)較好的用戶體驗。
Web主體型
即移動應(yīng)用的主體是Web View,主要以網(wǎng)頁語言編寫,穿插Native功能的Hybrid App開發(fā)類型。
這種類型開發(fā)的移動應(yīng)用體驗相對而言存在缺陷,但整體開發(fā)難度大幅降低,并且基本可以實現(xiàn)跨平臺。
Web主體型的移動應(yīng)用用戶體驗的好壞,主要取決于底層中間件的交互與跨平臺的能力。
國外的appMobi、PhoneGap和國內(nèi)的WeX5、AppCan和Rexsee都屬于Web主體型移動應(yīng)用中間件。
其中Rexsee不支持跨平臺開發(fā)。
appMobi和PhoneGap除基礎(chǔ)的底層能力更多是通過插件(Plugins)擴展的機制實現(xiàn)Hybrid。
AppCan除了插件機制,還提供了大量的單View混合型的接口來完善和彌補Web主體型Hybrid App體驗差的問題,接近Native App的體驗。
而WeX5則在揉合PhoneGap和Bootstrap等主流技術(shù)的基礎(chǔ)上,對性能進一步做了深度優(yōu)化,不但完全具備Native App對本地資源的調(diào)用能力,性能體驗也不輸原生;WeX5所開發(fā)出來的app具備完全的跨端運行能力,可以無需任何修改直接運行在各種前端環(huán)境上。
從分析可見,Hybrid App中的Web主體型只要能夠解決用戶體驗差的問題,就可以變成最佳Hybrid App解決方案類型。
多主體共存型(靈活型)
這是一種新型的開發(fā)模式,即支持Web主體型的應(yīng)用,又支持以Native主體的應(yīng)用,也支持兩者混合的開發(fā)模式。
比如kerkee框架,它具有跨平臺、用戶體驗好、性能高、擴展性好、靈活性強、易維護、規(guī)范化、具有Debug環(huán)境、徹底解決跨域問題等特點。用戶體驗與Native App媲美。功能方面,開發(fā)者可隨意擴展接口。
你移動端前端開發(fā)的理解?(和 Web 前端開發(fā)的主要區(qū)別是什么?)
pc端的網(wǎng)頁開發(fā)要考慮更多樣式兼容性的問題,ie,火狐,chrome等各大瀏覽器內(nèi)核不一,使用到新特性的時候需要給樣式加上最基礎(chǔ)的兼容前綴,所以最好的做法還是盡量避免使用新樣式屬性來完成預期的效果。在移動端開發(fā)網(wǎng)頁就基本不用考慮這種瀏覽器間的兼容問題了,手機上的瀏覽器絕大部分是webkit內(nèi)核的,所以在移動端網(wǎng)頁開發(fā)的時候能用到很多新的特性,像是極大簡便了頁面布局的flex布局,還有各種語義化的標簽等。
平時如何管理你的項目?
先期團隊必須確定好全局樣式(globe.css),編碼模式(utf-8)等;
編寫習慣必須一致(例如都是采用繼承式的寫法,單樣式都寫成一行);
標注樣式編寫人,各模塊都及時標注(標注關(guān)鍵樣式調(diào)用的地方);
頁面進行標注(例如 頁面 模塊 開始和結(jié)束);
CSS跟HTML 分文件夾并行存放,命名都得統(tǒng)一(例如style.css);
JS 分文件夾存放 命名以該JS功能為準的英文翻譯。
圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理
說說最近最流行的一些東西吧?常去哪些網(wǎng)站?
Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。 網(wǎng)站:w3cfuns,sf,hacknews,CSDN,慕課,博客園,InfoQ,w3cplus等
簡單描述一下你做過的移動APP項目研發(fā)流程?
第一階段:需求策劃。
在需求階段產(chǎn)品經(jīng)理內(nèi)部進行需求討論:討論下版本需求重點是什么,做什么功能,怎么做。通過反復調(diào)研、討論、輸出交互方案。
確認需求可行性:產(chǎn)品在輸出交互方案后找相應(yīng)的開發(fā)討論需求方案是否可行,這個討論階段產(chǎn)品和開發(fā)的思維方式不同,往往會擦出新火花、新驚喜;但討論控制不好或者會演化為產(chǎn)品和程序員的撕逼大戰(zhàn),呵呵。
UI設(shè)計:設(shè)計師將產(chǎn)品的交互方案變得更生動精美,不過精美的設(shè)計稿不見得都能實現(xiàn)出來。在這個過程中產(chǎn)品經(jīng)理需要協(xié)調(diào)設(shè)計師和前端人員的溝通,制 定設(shè)計規(guī)范。同時保證設(shè)計稿的質(zhì)量,出稿進度。需求宣講:產(chǎn)品經(jīng)理將交互方案和實現(xiàn)邏輯完善以及將上版本的bug、其他優(yōu)化需求等整合出完整的版本需求文 檔后,拉上項目所有成員宣講。宣講目的主要讓項目成員清楚新版本需求的重點是什么,做什么功能,為什么做(重點講);簡單介紹怎么做,講解交互方案或設(shè)計 稿,給大家有一個整體的印象,讓大家都了解版本功能的意義。
第二階段:需求研發(fā)。
項目啟動:需求宣講后,開發(fā)根據(jù)產(chǎn)品需求文檔進行需求評審,評估出研發(fā)周期、提測時間、預發(fā)布時間點、正式發(fā)布時間點。
產(chǎn)品根據(jù)評審結(jié)果發(fā)送項目啟動郵件。研發(fā):需求研發(fā)過程中,產(chǎn)品跟進研發(fā)進度,保持與開發(fā)溝通確保需求被正確理解,及時解決研發(fā)過程中發(fā)現(xiàn)的新問題。測試用例:產(chǎn)品、測試、開發(fā)共同確認版本測試用例,并同步研發(fā)過程中變更的需求和細節(jié)。
提測:產(chǎn)品驗收開發(fā)輸出的功能模塊,并輸出體驗回歸文檔;測試根據(jù)用例驗證需求邏輯,提bug、優(yōu)化給開發(fā)。內(nèi)網(wǎng)環(huán)境測試通過后,測試繼續(xù)驗證預發(fā)布環(huán)境、正式環(huán)境。
第三階段:版本發(fā)布。
客服培訓:測試驗證的過程中,版本發(fā)布前,產(chǎn)品提前給客服培訓新版本內(nèi)容。
發(fā)布:后端開發(fā)、運維人員將代碼發(fā)布外網(wǎng)環(huán)境,前端輸出外網(wǎng)正式包。產(chǎn)品運營將正式包上傳各大安卓市場或ios -appstore提審。
升級:所有安卓渠道包更新好,或者appsore審核通過,新版本也沒有發(fā)現(xiàn)什么問題時,后端開發(fā)和運營人員打開升級配置,并發(fā)送升級通知。運營報 告:版本發(fā)布完畢還未算完呢,運營人員在新版本發(fā)布后,收集用戶反饋,進行數(shù)據(jù)監(jiān)測、數(shù)據(jù)分析;評估新版本功能效果和影響,驗證新版本功能以及輸出下版本 需求開發(fā)和優(yōu)化建議。
你認為怎樣才是全端(全棧式)工程師(Full Stack developer)?
懂得配置服務(wù)器、懂得UI設(shè)計、懂得HTML、CSS、JS還有后端語言比如python,java等,懂得測試,懂得產(chǎn)品兼容PC與安卓IOS以及后期服務(wù)器優(yōu)化
介紹一個你最得意的作品吧?
可以介紹自己的項目過程困難解決方法等等。
項目中遇到國哪些印象深刻的技術(shù)難題,具體是什么問題,怎么解決?
前后端交互出現(xiàn)問題,前端請求不到數(shù)據(jù),與后端討論問題是在哪,ie低版本瀏覽器兼容問題,添加兼容指令或運用插件,移動客戶端操作系統(tǒng)問題,利用虛擬機模擬
最近在學什么?能談?wù)勀阄磥?,5年給自己的規(guī)劃嗎?
vue.js,react.js,Node.js、Mongodb、當產(chǎn)品經(jīng)理或者開發(fā)小組長
模塊化開發(fā)如何理解的。
.什么是模塊化?
模塊化就是講js文件按照功能分離,根據(jù)需求引入不同的文件中。源于服務(wù)器端。
在前段開發(fā)中,最先出現(xiàn)在node.js中,commne.js中(module.exports和require)隨著web應(yīng)用的模塊化,在瀏覽器端頁是需要進行模塊化開發(fā),早期AMD,CMD規(guī)范,代表Require.js和sea.js。在es6中,提出了原生模塊呼哈的解決方案,就是export和import但是瀏覽器并沒有完全支持,需要借助一些工具,–babel,實現(xiàn)這個轉(zhuǎn)換的有browserify和webpack。
在node.js中,模塊就是一個文件,通常js、json文件,包是多個模塊的集合,類似文件夾。
模塊化通俗點的理解就是這樣:就像我們小時候拼積木一樣。我們想拼一個房子出來,我們不是一下子從低到頂逐漸的拼出來。而是我們把一個橫條,豎條,圓圈等拼湊在一起,形成一個窗戶,一面墻,房頂?shù)鹊炔考_@些部件就如同是一個個模塊一樣。具備一定的功能,可以單獨分開使用。不同的框架和庫的模塊,有很多功能類似,可以理解為你的積木是塑料的,他的是木頭的,只要接口Api可以對的上,那么也可以通用。
如何提高網(wǎng)站性能
1…瀏覽器訪問優(yōu)化
2.減少http請求
3.使用瀏覽器緩存
4.啟用壓縮
5.CSS放在頁面最上面,JavaScript放在頁面最下面
6.減少Cookie傳輸
7.CDN加速
8.反向代理
9.應(yīng)用服務(wù)器性能優(yōu)化
10.分布式緩存
11.異步操作
12.使用集群
13.代碼優(yōu)化
怎么實現(xiàn)js的模塊化編程?
在沒有全局污染的情況下,更好的組織項目代碼
你有上線項目嗎?
有,具體介紹自己參與過的項目,著重把設(shè)計思路、開發(fā)過程,難題簡述出來
對React的理解
react把用戶界面抽象成一個個組件,如按鈕組件button,對話框組件Dialog,日期組件Calendar,開發(fā)者通過組合這些組件,最終得到功能豐富、可交互的頁面,通過引用jsx語法,復用組件變得非常容易,同時也能保證組件結(jié)構(gòu)清晰,有了組件這層抽象,react把代碼和真實渲染目標隔離開來,除了可以在瀏覽器端渲染到DOM來開發(fā)網(wǎng)頁外,還能用于開發(fā)原生移動應(yīng)用。
react的特點有:
1.聲明式設(shè)計 ?React采用聲明范式,可以輕松描述應(yīng)用(自動dom操作)。
2.高效 ?React通過對DOM的模擬(虛擬dom),最大限度地減少與DOM的交互。
3.靈活 ?React可以與已知的庫或框架很好地配合。
4.JSX ? JSX 是 JavaScript 語法的擴展。
5.組件 ? 通過 React 構(gòu)建組件,使得代碼更加容易得到復用,能夠很好的應(yīng)用在大項目的開發(fā)中。
6.單向響應(yīng)的數(shù)據(jù)流 ? React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流,從而減少了重復代碼,這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。
React的核心是組件,精髓是函數(shù)式編程,組件的設(shè)計目的是提高代碼復用率、降低測試難度和代碼復雜度
對Vue的理解
· vue的語法很簡單,很容易上手,可以說就是對著模板來填充內(nèi)容.想要動態(tài)綁定的數(shù)據(jù),那么就在data中填充內(nèi)容.想要具體的method,那么就在methods屬性中填充內(nèi)容.想要顯示變量就用雙花括號.可以說是很簡單了.
· vue使用的是MVVM模式,并且使用簡單的命令加數(shù)據(jù)來進行DOM操作,讓我避開了進行繁雜的獲取,創(chuàng)建和刪除DOM元素的操作.
· 借助vue的vue-router插件,可以很方便的實現(xiàn)單頁面應(yīng)用的搭建.并且可以實現(xiàn)瀏覽器中的回退效果.
· vue的組件化開發(fā)可以說很方便的就實現(xiàn)了組件的復用.之前想要寫復用組件的時候,一方面要寫重復的html,另一方面把對應(yīng)的CSS文件和JS文件獨立開來,需要的時候進行引入.但是vue把三者放在同一個文件中,可以說非常的貼心,修改也很方便.
對面向?qū)ο蟮睦斫?/p>
面向?qū)ο蟮娜筇卣?繼承,封裝,多態(tài)
一 繼承
繼承概念:一個類繼承另一個類,則稱繼承的類為子類,被繼承的類為父類。
目的:實現(xiàn)代碼的復用。
理解:子類與父類的關(guān)系并不是日常生活中的父子關(guān)系,子類與父類而是一種特殊化與一般化的關(guān)系,是is-a的關(guān)系,子類是父類更加詳細的分類。如 class dog 繼承于 animal,就可以理解為dog is a animal.注意設(shè)計繼承的時候.
結(jié)果:繼承后子類自動擁有了父類的屬性和方法,子類可以寫自己特有的屬性和方法,目的是實現(xiàn)功能的擴展,子類也可以復寫父類的方法即方法的重寫。
二 封裝
概念:封裝也稱為信息隱藏,是指利用抽象數(shù)據(jù)類型將數(shù)據(jù)和基于數(shù)據(jù)的操作封裝在一起,使其構(gòu)成一個不可分割的獨立實體,數(shù)據(jù)被保護在抽象數(shù)據(jù)類型的內(nèi)部,盡可能地隱藏內(nèi)部的細節(jié),只
保留一些對外接口使之與外部發(fā)生聯(lián)系。系統(tǒng)的其他部分只有通過包裹在數(shù)據(jù)外面的被授權(quán)的操作來與這個抽象數(shù)據(jù)類型交流與交互。也就是說,用戶無需知道對象內(nèi)部方法的實現(xiàn)細節(jié),但可以根據(jù)對象提供的外部接口(對象名和參數(shù))訪問該對象。
好處:(1)實現(xiàn)了專業(yè)的分工。將能實現(xiàn)某一特定功能的代碼封裝成一個獨立的實體后,各程序員可以在需要的時候調(diào)用,從而實現(xiàn)了專業(yè)的分工。(2)隱藏信 息,實現(xiàn)細節(jié)。通過控制訪問權(quán)限可以將可以將不想讓客戶端程序員看到的信息隱藏起來,如某客戶的銀行的密碼需要保密,只能對該客戶開發(fā)權(quán)限。
三、多態(tài)
概念:相同的事物,調(diào)用其相同的方法,參數(shù)也相同時,但表現(xiàn)的行為卻不同。
理解:子類以父類的身份出現(xiàn),但做事情時還是以自己的方法實現(xiàn)。子類以父類的身份出現(xiàn)需要向上轉(zhuǎn)型(upcast),其中向上轉(zhuǎn)型是由JVM自動實現(xiàn)的, 是安全的,但向下轉(zhuǎn)型(downcast)是不安全的,需要強制轉(zhuǎn)換。子類以父類的身份出現(xiàn)時自己特有的屬性和方法將不能使用。
“面向過程”和“面向?qū)ο蟆钡膮^(qū)別
面向過程就是分析出解決問題所需要的步驟,然后用函數(shù)把這些步驟一步一步實現(xiàn),使用的時候一個一個依次調(diào)用就可以了;面向?qū)ο笫前褬?gòu)成問題事務(wù)分解成各個對象,建立對象的目的不是為了完成一個步驟,而是為了描敘某個事物在整個解決問題的步驟中的行為。
總結(jié)
以上是生活随笔為你收集整理的史上最全最新前端面试题(不定期更新,有问题欢迎评论区对线)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 超详细的CentOS7.4下载与图文安装
- 下一篇: 谷歌浏览器驱动国内镜像下载地址