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