亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

超實(shí)用前端面試題整理(小結(jié))

  發(fā)布時(shí)間:2019-12-19 16:46:48   作者:前端迷弟   我要評(píng)論
這篇文章主要介紹了超實(shí)用前端面試題整理(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

本內(nèi)容收集的面試題適用于初級(jí)、中級(jí)、中高級(jí)所用,均為本坑多年跳槽面試經(jīng)驗(yàn)總結(jié),實(shí)用性超強(qiáng)已實(shí)際幫助多人,但之前均為口述,經(jīng)過最近多位坑友要求下特做此撰寫此真經(jīng),當(dāng)然若有看不爽或者想補(bǔ)充者歡迎來撩哈!

CSS篇:

1、CSS3的新特性
實(shí)現(xiàn)圓角(border-radius)
陰影(box-shadow)
文字加特效(text-shadow)
線性漸變(gradient)
旋轉(zhuǎn)(transform)
媒體查詢,多欄布局

2、CSS中 link 和@import 的區(qū)別
link屬于HTML標(biāo)簽,而@import是CSS提供的;
頁面被加載的時(shí),link會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁面被加載完再加載;
import只在IE5以上才能識(shí)別,而link是HTML標(biāo)簽,無兼容問題;
link方式的樣式的權(quán)重 高于@import的權(quán)重.

3、介紹一下CSS的盒子模型
通過css3新增的屬性 box-sizing: content-box | border-box分別設(shè)置盒模型為標(biāo)準(zhǔn)模型(content-box)和IE模型(border-box)詳細(xì)介紹
兩種盒模型:標(biāo)準(zhǔn)W3C盒模型、IE盒模型。
區(qū)別對(duì)比:(注意藍(lán)色背景區(qū)域大小)
標(biāo)準(zhǔn)盒模型元素寬度width=content=100px,高度計(jì)算相同
IE模型元素寬度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。

4、CSS 選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算?CSS3新增偽類有那些?
選擇符
1.id選擇器( # myid)
2.類選擇器(.myclassname)
3.標(biāo)簽選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.后代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = “external”])
9.偽類選擇器(a: hover, li:nth-child)

繼承

可繼承的樣式: font-size font-family color, text-indent;
不可繼承的樣式:border padding margin width height;
新增偽類
p:first-of-type 選擇屬于其父元素的首個(gè)
元素。
p:last-of-type 選擇屬于其父元素的最后

元素。
p:only-of-type 選擇屬于其父元素唯一的

元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)

元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)

元素。
:enabled :disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
優(yōu)先級(jí)算法規(guī)則:優(yōu)先級(jí)就近原則,同權(quán)重情況下樣式定義最近者為準(zhǔn);
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高,但內(nèi)聯(lián)比 id 要高

5、為什么要清除浮動(dòng)?如何清除?
引起的問題:
(1)父元素的高度無法被撐開,影響與父元素同級(jí)的元素
(2)與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
(3)若非第一個(gè)元素浮動(dòng),則該元素之前的元素也需要浮動(dòng),否則會(huì)影響頁面顯示的結(jié)構(gòu)

解決方法:
1、利用clear清除浮動(dòng)

.son {
        clear: left | right | both | auto
    }

2、在父元素后面額外添加標(biāo)簽

<div class="parent">
    ...
    <div style="clear:both;"></div>
</div>
父元素上使用after偽類
#parent:after {
    content: '';
    clear: both;
    height: 0;
    display: block;
}
利用overflow清除浮動(dòng)
#parent {
    overflow: auto;
    display: inline-block;
}
 

6、實(shí)現(xiàn)垂直居中的幾種方法

<div class="parent">
    <div class="son"></div>
</div>
margin: auto
.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absoulte;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
}
margin-left、margin-top負(fù)值法(需知道子元素width、height)
.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absolute;
        width: 100px;
        height: 160px;
        left: 50%;
        top: 50%;
        //margin-top: translateY(-50%);
        //margin-left: translateX(-50%);
        margin-top: -80px;
        margin-left: -50px;
    }
}
flex
.parent{
    display: flex;
    align-items: center;
    justify-content: center;
}
table-cell(未脫離文檔流)
.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

HTML篇:

1.html5有哪些新特性、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分 HTML 和 HTML5?

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲(chǔ),多任務(wù)等功能的增加
繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語意化更好的內(nèi)容元素,比如 article、footer、header、nav、section
表單控件,calendar、date、time、email、url、search
新的技術(shù)webworker, websocket, Geolocation
移除的元素:
純表現(xiàn)的元素:basefont,big,center,font, s,strike,tt,u
對(duì)可用性產(chǎn)生負(fù)面影響的元素:frame,frameset,noframes
支持HTML5新標(biāo)簽:
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽
瀏覽器支持新標(biāo)簽后,還需要添加標(biāo)簽?zāi)J(rèn)的樣式
當(dāng)然也可以直接使用成熟的框架、比如html5shim

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->

2.HTML5的離線儲(chǔ)存怎么使用,工作原理能不能解釋一下?

在用戶沒有與因特網(wǎng)連接時(shí),可以正常訪問站點(diǎn)或應(yīng)用,在用戶與因特網(wǎng)連接時(shí),更新用戶機(jī)器上的緩存文件
原理:HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù)),通過這個(gè)文件上的解析清單離線存儲(chǔ)資源,這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí),瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示

3.瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢?

在線的情況下,瀏覽器發(fā)現(xiàn)html頭部有manifest屬性,它會(huì)請(qǐng)求manifest文件,如果是第一次訪問app,那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲(chǔ)了,那么瀏覽器就會(huì)使用離線的資源加載頁面,然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件,如果文件沒有發(fā)生改變,就不做任何操作,如果文件改變了,那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。
離線的情況下,瀏覽器就直接使用離線存儲(chǔ)的資源。

4.請(qǐng)描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別?

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端(Client Side)上的數(shù)據(jù)(通常經(jīng)過加密)
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要),記會(huì)在瀏覽器和服務(wù)器間來回傳遞
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存
存儲(chǔ)大小:
cookie數(shù)據(jù)大小不能超過4k
sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制,但比cookie大得多,可以達(dá)到5M或更大
有期時(shí)間:
localStorage 存儲(chǔ)持久數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除
cookie 設(shè)置的cookie過期時(shí)間之前一直有效,即使窗口或?yàn)g覽器關(guān)閉

5.iframe有那些缺點(diǎn)?

iframe會(huì)阻塞主頁面的Onload事件
搜索引擎的檢索程序無法解讀這種頁面,不利于SEO
iframe和主頁面共享連接池,而瀏覽器對(duì)相同域的連接有限制,所以會(huì)影響頁面的并行加載
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe,最好是通過javascript動(dòng)態(tài)給iframe添加src屬性值,這樣可以繞開以上兩個(gè)問題

6.Label的作用是什么?是怎么用的?

label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件

7.HTML5的form如何關(guān)閉自動(dòng)完成功能?

給不想要提示的 form 或某個(gè) input 設(shè)置為 autocomplete=off。

8.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信? (阿里)

WebSocket、SharedWorker
也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式

9.webSocket如何兼容低瀏覽器?(阿里)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發(fā)送 XHR 、
基于長輪詢的 XHR

10.頁面可見性(Page Visibility API) 可以有哪些用途?
通過 visibilityState 的值檢測(cè)頁面當(dāng)前是否可見,以及打開網(wǎng)頁的時(shí)間等;
在頁面被切換到其他后臺(tái)進(jìn)程的時(shí)候,自動(dòng)暫停音樂或視頻的播放

JavaScript篇:

1.閉包理解

父函數(shù)將子函數(shù)作為返回值,再將子函數(shù)賦值給一個(gè)變量,所以子函數(shù)會(huì)存在于內(nèi)存中,而子函數(shù)依賴于父函數(shù)存在,所以父函數(shù)也會(huì)存在于內(nèi)存中,也就不會(huì)被垃圾回收機(jī)制回收。

 let val = 7
function createAdder() {
 function addNumbers(a, b) {
  let ret = a + b
  return ret
   }
return addNumbers
 }
 let adder = createAdder()
 let sum = adder(val, 8)
console.log('example of function returning a function: ', sum)

2.繼承鏈的理解(原型鏈)

每一個(gè)對(duì)象都有一個(gè)“proto”指針,指向?qū)嵗搶?duì)象的構(gòu)造函數(shù)的原型對(duì)象,當(dāng)該對(duì)象沒有你想拿到的屬性時(shí),解釋器會(huì)順著指針不斷向上找。
每一個(gè)構(gòu)造你函數(shù)都有一個(gè)“prototype”屬性,指向該構(gòu)造函數(shù)的原型對(duì)象。
每一個(gè)原型對(duì)象都有一個(gè)“constructor”屬性,指向該原型對(duì)象的構(gòu)造函數(shù)。
任何對(duì)象(全局對(duì)象除外)向上查找的終點(diǎn)都是全局對(duì)象下的Object構(gòu)造函數(shù)的原型對(duì)象。
對(duì)像合并?數(shù)組去重過濾?
對(duì)象合并:Object.assign(form, obj)----->Object.assign(目標(biāo)對(duì)象, 被合并的對(duì)象)、$.extend、
數(shù)組去重:Set、filter、Map

3.http狀態(tài)碼有哪幾種?常用的狀態(tài)碼表示什么?
200(“OK”)
一切正常。實(shí)體主體中的文檔(若存在的話)是某資源的表示。
400(“Bad Request”)
客戶端方面的問題。實(shí)體主題中的文檔(若存在的話)是一個(gè)錯(cuò)誤消息。希望客戶端能夠理解此錯(cuò)誤消息,并改正問題。
500(“Internal Server Error”)
服務(wù)期方面的問題。實(shí)體主體中的文檔(如果存在的話)是一個(gè)錯(cuò)誤消息。該錯(cuò)誤消息通常無濟(jì)于事,因?yàn)榭蛻舳藷o法修復(fù)服務(wù)器方面的問題。
301(“Moved Permanently”)
當(dāng)客戶端觸發(fā)的動(dòng)作引起了資源URI的變化時(shí)發(fā)送此響應(yīng)代碼。另外,當(dāng)客戶端向一個(gè)資源的舊URI發(fā)送請(qǐng)求時(shí),也發(fā)送此響應(yīng)代碼。
404(“Not Found”) 和410(“Gone”)
當(dāng)客戶端所請(qǐng)求的URI不對(duì)應(yīng)于任何資源時(shí),發(fā)送此響應(yīng)代碼。404用于服務(wù)器端不知道客戶端要請(qǐng)求哪個(gè)資源的情況;410用于服務(wù)器端知道客戶端所請(qǐng)求的資源曾經(jīng)存在,但現(xiàn)在已經(jīng)不存在了的情況。
409(“Conflict”)
當(dāng)客戶端試圖執(zhí)行一個(gè)”會(huì)導(dǎo)致一個(gè)或多個(gè)資源處于不一致狀態(tài)“的操作時(shí),發(fā)送此響應(yīng)代碼。
跨域的理解?常見的跨域處理有哪一些?
瀏覽器為隔離潛在的惡意文件,限制了從同一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互,所以,是瀏覽器的基于安全考慮的同源策略導(dǎo)致的跨域
解決一:
JSONP,script的src屬性不受限制,但是只能進(jìn)行g(shù)et請(qǐng)求,
jQuery將jsonp封裝進(jìn)了ajax,首先jsonp只支持get請(qǐng)求,所以所有傳入的參數(shù)都是 http://xxx.xxx.xxx/xxx/xxx?xxx=1&&yyy=2 這種形式;其次在dataType屬性必須設(shè)置為jsonp,jquery是支持jsonp的。

$.ajax("http://xxx.xxx.xxx/xxx/xxx", { 
    type: 'get',
    dataType: "jsonp",
   data : reqData
   success: function(data) {
        console.log(data);
        },
    error: function(xhr, type, errorThrown) {
            console.log(xhr.statusText);
                plus.nativeUI.toast("fail");  
          }  
        });
 

解決二:直接在服務(wù)器端設(shè)置跨域資源訪問 CORS(Cross-Origin Resource Sharing),設(shè)置Request Header頭中Access-Control-Allow-Origin為指定可獲取數(shù)據(jù)的域名(常用)
解決三:使用Nginx反向代理
解決四:webpack代理(只適用于本地環(huán)境)
解決五:nodejs反向代理

7.seo優(yōu)化的理解?(加分項(xiàng))

提高頁面加載速度。能用css解決的不用背景圖片,背景圖片也盡量壓縮大小,可以幾個(gè)icons放在一個(gè)圖片上,使用background-position找到需要的圖片位置??梢詼p少HTTP請(qǐng)求數(shù),提高網(wǎng)頁加載速度。
結(jié)構(gòu)、表現(xiàn)和行為的分離。另外一個(gè)重要的拖慢網(wǎng)頁加載速度的原因就是將css和JS都堆積在HTML頁面上,每次看到有人直接在頁面上編寫CSS和JS我都很痛心疾首。通過外鏈的方式能大大加快網(wǎng)頁加載速度的,css文件可以放在head里,JS文件可以放置在body的最下方,在不影響閱讀的情況下再去加載JS文件。
優(yōu)化網(wǎng)站分級(jí)結(jié)構(gòu)。在每個(gè)內(nèi)頁加面包屑導(dǎo)航是很有必要的,可以讓蜘蛛進(jìn)入頁面之后不至于迷路,有條件的話,最好能單獨(dú)加個(gè)Sitemap頁面,將網(wǎng)站結(jié)構(gòu)一目了然地展示在蜘蛛面前,更有利于蜘蛛抓取信息。
集中網(wǎng)站權(quán)重。由于蜘蛛分配到每個(gè)頁面的權(quán)重是一定的,這些權(quán)重也將平均分配到每個(gè)a鏈接上,那么為了集中網(wǎng)站權(quán)重,可以使用”rel=nofollow”屬性,它告訴蜘蛛無需抓取目標(biāo)頁,可以將權(quán)重分給其他的鏈接。
文本強(qiáng)調(diào)標(biāo)簽的使用。當(dāng)著重強(qiáng)調(diào)某個(gè)關(guān)鍵詞需要加粗表示,選用strong標(biāo)簽比使用b標(biāo)簽要更有強(qiáng)調(diào)作用。
a標(biāo)簽的title屬性的使用。在不影響頁面功能的情況下,可以盡量給a標(biāo)簽加上title屬性,可以更有利于蜘蛛抓取信息。
圖片alt屬性的使用。這個(gè)屬性可以在圖片加載不出來的時(shí)候顯示在頁面上相關(guān)的文字信息,作用同上。
H標(biāo)簽的使用。主要是H1標(biāo)簽的使用需要特別注意,因?yàn)樗詭?quán)重,一個(gè)頁面有且最多只能有一個(gè)H1標(biāo)簽,放在該頁面最重要的標(biāo)題上面,如首頁的logo上可以加H1標(biāo)簽。

8.對(duì)象深拷貝、淺拷貝
淺拷貝:當(dāng)拷貝完一個(gè)對(duì)象的時(shí)候,其中一個(gè)對(duì)象的數(shù)據(jù)發(fā)生了變化,另一個(gè)對(duì)象的數(shù)據(jù)也會(huì)發(fā)生變化。

因?yàn)樯羁截惪截惖氖撬饕?/p>

深拷貝:當(dāng)拷貝完一個(gè)對(duì)象的時(shí)候,其中一個(gè)對(duì)象的數(shù)據(jù)發(fā)生了變化,另外一個(gè)對(duì)象的數(shù)據(jù) 不會(huì)發(fā)生變化,因?yàn)闇\拷貝拷貝的是數(shù)值

9.js 異步加載的方式

a.

b.onload時(shí)的異步加載(這種方法只是把插入script的方法放在一個(gè)函數(shù)里面,然后放在window的onload方法里面執(zhí)行,這樣就解決了阻塞onload事件觸發(fā)的問題。)

c.$(document).ready(function() {alert(“加載完成!”) })

d.

10.babel原理

ES6、7代碼輸入 -> babylon進(jìn)行解析 -> 得到AST(抽象語法樹)->
plugin用babel-traverse對(duì)AST樹進(jìn)行遍歷轉(zhuǎn)譯
得到新的AST樹->用babel-generator通過AST樹生成ES5代碼

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 2020前端面試題之HTML篇(推薦)

    一場(chǎng)疫情過后,又要經(jīng)歷一次次面試,今天小編給大家分享2020前端面試題之HTML篇,非常不錯(cuò),對(duì)大家有所幫助,需要的朋友參考下吧
    2020-03-25
  • 2019大廠前端面試題小結(jié)

    這篇文章主要介紹了2019大廠前端面試題小結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2020-03-05
  • css的面試題目(前端常見面試題)

    隨著疫情的不斷好轉(zhuǎn),各地都開始逐步的復(fù)工,當(dāng)然對(duì)我們來說,也馬上迎來所謂的金三銀四跳槽季。今天小編給大家分享前端常見面試題,需要的朋友跟隨小編一起看看吧
    2020-02-27
  • Web前端面試筆試題總結(jié)

    這篇文章主要介紹了Web前端面試筆試題總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2020-02-18
  • 80道前端面試經(jīng)典選擇題匯總

    這篇文章主要介紹了80道前端面試經(jīng)典選擇題匯總,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2020-01-08
  • 面試官常問的web前端問題大全

    這篇文章主要介紹了面試官常問的web前端問題大全,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-01-03
  • 前端十幾道含答案的大廠面試題總結(jié)

    這篇文章主要介紹了前端十幾道含答案的大廠面試題總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2020-01-02
  • 每個(gè)前端工程師都應(yīng)該去了解的前端面試題小結(jié)(推薦)

    面試對(duì)于我們每個(gè)程序員來說都是非常重要的環(huán)節(jié),掌握一些面試題技巧是非常有必要的,今天小編給大家分享幾個(gè)js有關(guān)的面試題,需要的朋友參考下吧
    2020-04-15

最新評(píng)論