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