摘要:最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問(wèn)到的是語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。參考網(wǎng)站面試題圖片過(guò)多的時(shí)候如何優(yōu)化圖標(biāo)很多的時(shí)候可以用雪碧圖圖片過(guò)大時(shí)候可以壓縮一下。
最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問(wèn)到的是ES6語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。有助于下次面試。
1.HTML HTML5新特性,語(yǔ)義化HTML5新增了許多標(biāo)簽
SEO(搜索引擎優(yōu)化);結(jié)構(gòu)更加清晰,方便維護(hù).
瀏覽器的標(biāo)準(zhǔn)模式和怪異模式在W3C還沒(méi)有制定出標(biāo)準(zhǔn)之前,不同的瀏覽器有屬于自己一套標(biāo)準(zhǔn).不同瀏覽器會(huì)根據(jù)自己的規(guī)則渲染頁(yè)面.那么渲染出來(lái)的頁(yè)面就不同,為怪異模式。那么W3C制定出一系列標(biāo)準(zhǔn)規(guī)則之后。瀏覽器按這套規(guī)則渲染頁(yè)面那就是標(biāo)準(zhǔn)模式
xhtml和html的區(qū)別1.xhtml里面的標(biāo)簽必須閉合。
2.xhtml里面的標(biāo)簽必須小寫(xiě)。
3.xhtml里面必須嵌套元素是正確的。
1.自定義屬性可以統(tǒng)一化。
2.以后維護(hù)更加的方便,頁(yè)面結(jié)構(gòu)清晰
3.element.dataset.獲取信息
var main = document.querySeletor("div"); console.log(div.dataset.main); //mainmeta標(biāo)簽
meta標(biāo)簽一般表述當(dāng)前文檔的屬性.例如作者關(guān)鍵字等等信息。
詳細(xì)了解參考https://www.cnblogs.com/reaf/...
canvas是一個(gè)HTML5提供的繪圖API,通過(guò)getContent()方法獲取畫(huà)筆才可繪圖。與svg的最大差別是svg使用一個(gè) XML 文檔來(lái)描述繪圖.
HTML廢棄的標(biāo)簽 IE6 bug,和一些定位寫(xiě)法1.雙邊距bug:當(dāng)元素使用float過(guò)后,使用margin都會(huì)有兩倍邊距,需要明確其元素類型來(lái)解決邊距問(wèn)題. display:inline或display:block;
2.相對(duì)父容器絕對(duì)定位bug
ie6很多bug可以通過(guò)觸發(fā)layout來(lái)解決。無(wú)論設(shè)置zoom:1或者設(shè)置寬高都能觸發(fā)。
參考鏈接
IE6中的常見(jiàn)BUG
IE6相對(duì)父容器絕對(duì)定位的bug及其解決辦法
一般來(lái)說(shuō)css和js都是通過(guò)外部引入的。這樣方便維護(hù)管理。
由于瀏覽器的加載順序,css放在head標(biāo)簽中,js會(huì)阻塞html加載。我建議頁(yè)面效果顯示的js放在body之前,交互,事件的js可以放在后面。
瀏覽器的渲染:過(guò)程與原理
What is progressive rendering?
一般平常的數(shù)據(jù)渲染,需要用字符串與數(shù)據(jù)一個(gè)個(gè)拼接而成,但后期維護(hù)很麻煩。于是有了html模板。不同的html模板可以寫(xiě)法也不同。es6有一種是叫模板字符串 數(shù)據(jù)通過(guò)#{}并接而成.
meta viewportmeta介紹參考
常用的meta
css3增加了很多新的特性,但兼容的話一般在IE9+,例如box-sizing,CSS選擇器,背景background-size,邊框陰影,圓角等等.
偽類一個(gè)冒號(hào): 偽元素兩個(gè)冒號(hào):: 權(quán)重級(jí)別不一樣
:first-child :hover :active
::before ::after 兼容性不好
偽類偽元素
一般用于真正的內(nèi)容用偽類,但偽元素用于比如圖標(biāo)之類的沒(méi)有什么實(shí)質(zhì)的內(nèi)容。
偽類與偽元素差別
display:none元素隱藏.頁(yè)面寬高不顯示.不占頁(yè)面位置.
opactiy: 0 只是將透明度設(shè)置為0,但占頁(yè)面位置.
visibilty: hidden 也是隱藏元素
link標(biāo)簽引用在head標(biāo)簽里面,@import 引用于在CSS樣式表中。
加載順序問(wèn)題.link是在頁(yè)面加載的時(shí)候可以同時(shí)加載CSS ,@import需要在加載頁(yè)面內(nèi)容之后才加載
link兼容性比@import好些。
一般使用于移動(dòng)端和高級(jí)瀏覽器.運(yùn)用了彈性布局那么float,clear,vertical-align都會(huì)失效。
有分主軸和交叉軸。
1.float方法實(shí)現(xiàn)
2.flex布局實(shí)現(xiàn)
一般以引用的樣式來(lái)說(shuō) 內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式(就近原則)
權(quán)重級(jí)別
important 最高級(jí)
行內(nèi) +1000
id +100
屬性選擇器,類,偽類 +10
元素,偽元素 +1
通用符* 0
CSS權(quán)重
基本類型: null,undefined,number,string,boolean
引用類型: object => function,(number,string,boolean)包裝對(duì)象,Date等等。
基本類型屬于棧
引用類型屬于堆
null和undefined的區(qū)別
null是訪問(wèn)一個(gè)尚未存在的對(duì)象時(shí)所返回的值。 轉(zhuǎn)換成數(shù)值類型為 0
undefined是訪問(wèn)一個(gè)未初始化的變量時(shí)返回的值。 轉(zhuǎn)換數(shù)值類型為NaN.
包裝對(duì)象與基本類型的區(qū)別
無(wú)法在基本類型上添加方法屬性。
包裝對(duì)象可以添加屬性。
輕松理解JS基本包裝對(duì)象
判斷是否是Array類型
1.通過(guò)instanceof 判斷原型對(duì)象是否指向Array構(gòu)造對(duì)象
arr instanceof Array // true
2.對(duì)象的constructor屬性
arr.constructor = Array // true
解釋一下事件冒泡和事件捕獲
一般一個(gè)事件觸發(fā)時(shí)候會(huì)進(jìn)行事件流,而事件流有兩個(gè)階段一個(gè)就是從外到里為捕獲階段,從里到外是冒泡階段。
阻止冒泡方法
function stop(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } }
對(duì)閉包的理解?什么時(shí)候構(gòu)成閉包?閉包的實(shí)現(xiàn)方法?閉包的優(yōu)缺點(diǎn)
閉包是外部能訪問(wèn)內(nèi)部變量的函數(shù)。一般來(lái)說(shuō)內(nèi)部定義的函數(shù)能訪問(wèn)到外部的變量。但外部無(wú)法訪問(wèn)內(nèi)部函數(shù)里面定義的變量。
function a(){ var i = 0; function b(){ console.log(i) return b; } }
這樣就形成了閉包,當(dāng)外部定義個(gè)變量時(shí)候,接收a函數(shù)的返回值,執(zhí)行這個(gè)函數(shù)就能獲取到這個(gè)變量。
優(yōu)點(diǎn) 解決外部無(wú)法獲取內(nèi)部函數(shù)的值
缺點(diǎn) 閉包會(huì)使得這個(gè)變量一直占據(jù)內(nèi)存中。
this 指向用于三種場(chǎng)景
1.在構(gòu)造函數(shù)中方法使用this,這this指向?qū)嵗?br>2.事件中使用this,這this指向?qū)?yīng)的dom元素
3.全局方法使用this。會(huì)執(zhí)行window.如果是node環(huán)境下。指向global
call,apply 都是改變函數(shù)執(zhí)行上下文。
call與apply就一個(gè)區(qū)別就是傳入?yún)?shù)的問(wèn)題。call是一個(gè)個(gè)傳入,apply是以數(shù)組的形式傳入。
而bind是返回一個(gè)函數(shù)副本。他不會(huì)執(zhí)行函數(shù)。需要自己手動(dòng)執(zhí)行函數(shù)。
聊一聊call、apply、bind的區(qū)別
顯示原型和隱式原型,手繪原型鏈,原型鏈?zhǔn)鞘裁矗繛槭裁匆性玩?br>http://www.cnblogs.com/wangfu...
創(chuàng)建對(duì)象的多種方式1.直接用字面量創(chuàng)建
var obj = {}
2.構(gòu)造函數(shù)創(chuàng)建
function obj(){} var obj1 = new obj;
3.直接通過(guò)new object()創(chuàng)建
4.工廠函數(shù)創(chuàng)建
JS創(chuàng)建對(duì)象幾種不同方法詳解
變量提升在Javascript中,變量聲明和函數(shù)聲明會(huì)最先執(zhí)行。
函數(shù)聲明大于變量聲明
例如
function a(){} var a; console.log(a) // function a(){}
函數(shù)聲明
function a(){}
函數(shù)表達(dá)式
var a = function(){} 等同于 var a = 1;
宿主對(duì)象和原生對(duì)象(內(nèi)部對(duì)象)的區(qū)別
宿主對(duì)象 是瀏覽器提供的對(duì)象 BOM如Window和Document等 DOM對(duì)象
原生對(duì)象(內(nèi)部對(duì)象)是指JS內(nèi)置的對(duì)象 String Number Boolean Date
還有自己定義的對(duì)象 自定義對(duì)象。
document DOMContentLoaded是DOM加載完畢會(huì)執(zhí)行這個(gè)函數(shù) 等同于JQ中的$(function(){})
document load 是JS加載完成才執(zhí)行這個(gè)函數(shù)
"number"、"string"、"boolean"、"object"、"function" 和 "undefined"
注意 typeof null , array,{} 都檢測(cè)出object
好處: 1.使得JS語(yǔ)法更加規(guī)范化。目前的ES6是嚴(yán)格模式。2.能早點(diǎn)發(fā)現(xiàn)代碼的錯(cuò)誤問(wèn)題,提高代碼的安全性。
壞處: 一般網(wǎng)站都會(huì)將JS代碼進(jìn)行壓縮,但是有些JS代碼有嚴(yán)格模式,而有些代碼沒(méi)有嚴(yán)格模式。當(dāng)他們合并在一起,會(huì)浪費(fèi)字節(jié)。
函數(shù)作用域是函數(shù)里面有作用域,比如在函數(shù)體中定義個(gè)變量,在外部訪問(wèn)不到這個(gè)變量的。
JS作用域中有三種。全局作用域,函數(shù)作用域,塊級(jí)作用域。es6語(yǔ)法才支持塊級(jí)作用域。
弄懂JavaScript的作用域和閉包
數(shù)組常用API 字符串a(chǎn)piArray
增: arr.push() arr.unshift()
刪: arr.pop() arr.shift()
改: arr.reverse() arr.sort() arr.concat() arr.join() arr.slice() arr.splice() arr.toString()
查: arr.indexOf() arr.lastIndexOf()
數(shù)組常用API
String
字符串常用API
http://www.jb51.net/article/9...
編寫(xiě)一個(gè)通用的事件監(jiān)聽(tīng)函數(shù)https://blog.csdn.net/github_...
web端cookie的設(shè)置和獲取 原生事件綁定(跨瀏覽器),dom0和dom2的區(qū)別?dom0
ele.onclick = handler;ele.onclick=null;最古老的一種方式
優(yōu)點(diǎn):全瀏覽器兼容
缺點(diǎn):同一事件只能綁定/解綁一個(gè)事件處理器
ele.add/removeEventListener(eventType, handler, catch);
和IE方式:ele.attach/detachEvent(‘on’+eventType, handler);
優(yōu)點(diǎn):支持綁定/解綁多個(gè)事件處理器
缺點(diǎn):需要做兼容性判斷。
JS原生事件處理(跨瀏覽器)
如何實(shí)現(xiàn)圖片滾動(dòng)懶加載懶加載原理是圖片還沒(méi)到可視區(qū)域時(shí)先用一張很小的圖片來(lái)當(dāng)背景,如果滾動(dòng)到可視區(qū)域時(shí),再加載圖片路徑。
滾動(dòng)加載圖片(懶加載)實(shí)現(xiàn)原理
https://blog.csdn.net/qiqingj...
DOM事件的綁定的幾種方式三種綁定事件的方式
1.直接在DOM 上面綁定
2.通過(guò)腳本里面綁定
3.通過(guò)監(jiān)聽(tīng)事件綁定
https://www.cnblogs.com/mylov...
工廠模式 Factory Pattern,
單例模式 Singleton Pattern,
模塊模式,
發(fā)布訂閱模式,
中介者模式 Mediator Pattern,
代理模式 Proxy Pattern
https://www.cnblogs.com/tugen...
4.ES6 談一談 promisepromise對(duì)象主要處理回調(diào)函數(shù)的對(duì)象。實(shí)例化一個(gè)promise對(duì)象之后有三種狀態(tài) pending: 初始狀態(tài),既不是成功,也不是失敗狀態(tài)。
fulfilled: 意味著操作成功完成,rejected: 意味著操作失敗。
實(shí)例化promise對(duì)象有兩個(gè)參數(shù) resolve 和 reject 。
promise實(shí)例化生成之后可以通過(guò)then() 和catch()鏈?zhǔn)秸{(diào)用自定義方法。
參考網(wǎng)站
1.圖標(biāo)很多的時(shí)候可以用雪碧圖
2.圖片過(guò)大時(shí)候可以壓縮一下。
3.小圖標(biāo)如果不用雪碧圖可以考慮用base64編碼
4.圖片緩存
function aaa(str){ return str.split("").join(" "); } aaa("123"); // 1 2 3怎么獲取checkbox的元素,用JS怎么寫(xiě)
document.getElementsByName("") 獲取所有name屬性的元素
其次還有document.getElementsByTagName() 獲取標(biāo)簽元素
document.getElementById 獲取ID
document.getElementsByClassName 獲取類名
JS
createElement //創(chuàng)建一個(gè)元素
createTextNode //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
JQ
$("
添加,移除,插入
JS
insertBefore() // 被選元素的前面插入
appendChild() // 被選元素的后面插入
removeChild() // 刪除
JQ
append() //被選元素插入內(nèi)容
prepend()
remove()
insertAfter() //被選元素的前面插入
instetBefore()
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/93744.html
摘要:個(gè)人也建議不要滿足于自己當(dāng)下所知道的,多去拓展自己,多去學(xué)新的東西。作為一個(gè)面試者來(lái)說(shuō),知識(shí)點(diǎn)的記憶準(zhǔn)備為的是更好的應(yīng)對(duì)面試中技術(shù)面中問(wèn)到的各種問(wèn)題。 你好,是我琉憶——PHP程序員面試筆試系列圖書(shū)的作者。 隨著越來(lái)越多的人開(kāi)始邁入PHP開(kāi)發(fā)工程師的隊(duì)列,不管是一個(gè)PHP新手還是一個(gè)有一兩年開(kāi)發(fā)經(jīng)驗(yàn)的PHPer都不得不去面對(duì)找工作前面試這件事。 我現(xiàn)在以個(gè)人對(duì)面試的經(jīng)歷和見(jiàn)解來(lái)全面的對(duì)...
摘要:獲取的對(duì)象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對(duì)象即使沒(méi)有代碼,也會(huì)把默認(rèn)的祖宗八代都顯示出來(lái)而只能獲取元素屬性中的樣式。因此對(duì)于一個(gè)光禿禿的元素,方法返回對(duì)象中屬性值如果有就是據(jù)我測(cè)試不同環(huán)境結(jié)果可能有差異而就是。 花了很長(zhǎng)時(shí)間整理的前端面試資源,喜歡請(qǐng)大家不要吝嗇star~ 別只收藏,點(diǎn)個(gè)贊,點(diǎn)個(gè)star再走哈~ 持續(xù)更新中……,可以關(guān)注下github 項(xiàng)目地址 https:...
摘要:好不容易在月號(hào)這天中午點(diǎn)左右接到了來(lái)自阿里的面試電話。這里會(huì)不斷收集和更新基礎(chǔ)相關(guān)的面試題,目前已收集題。面試重難點(diǎn)的和的打包過(guò)程多線程機(jī)制機(jī)制系統(tǒng)啟動(dòng)過(guò)程,啟動(dòng)過(guò)程等等掃清面試障礙最新面試經(jīng)驗(yàn)分享,此為第一篇,開(kāi)篇。 2016 年末,騰訊,百度,華為,搜狗和滴滴面試題匯總 2016 年未,騰訊,百度,華為,搜狗和滴滴面試題匯總 各大公司 Java 后端開(kāi)發(fā)面試題總結(jié) 各大公司 Jav...
閱讀 2968·2023-04-25 19:45
閱讀 2690·2021-11-19 09:40
閱讀 690·2021-10-14 09:49
閱讀 2668·2021-09-30 09:47
閱讀 2201·2021-09-26 09:55
閱讀 1220·2021-09-22 16:01
閱讀 2809·2019-08-30 14:19
閱讀 706·2019-08-29 16:44