前端面试题--重要基础知识回顾(一)
1.數據類型:
可變的引用類型:object(array ,function,正則);
不可變的原始類型:null, undefined, number, string, boolean, symbol(es6)
//引用類型var arr1 = [1,2];var arr2 = arr1arr2.push(3)console.log(arr1) //[1,2,3] //原始類型var str1 = "111";var str2 = str1;str2 = "222"console.log(str1) //111?
2.if的真和假:
以下情況會被認為返回false:(反之為真)
-
- " "?空的字符串
- 為 0 的數字
- 為 null 的對象
- 為 undefined 的對象
- 布爾值 false
?
3.事件冒泡,默認行為:
1).DOM2級事件規定的時間流包括 三個階段：
- 事件捕獲階段
- 處于目標階段
- 事件冒泡階段
事件冒泡: 當一個元素接收到事件的時候,會把她接收到的事件依次向上傳遞,一直到window.
默認行為: 觸發事件動作發生后的表現,比如點擊鏈接會跳轉,點擊提交按鈕會提交并刷新頁面.
?2）阻止事件冒泡
w3c:event.stopPropagation()
ie:event.canleBubble = true;
window.event? window.event.cancelBubble = true : e.stopPropagation(); //兼容的寫法寫法:
document.getElementById("button").addEventListener("click",function(event){alert("button");event.stopPropagation(); },false);?
3）取消默認事件
w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;·
//假定有鏈接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a> var a = document.getElementById("testA"); a.onclick =function(e){if(e.preventDefault){e.preventDefault();}else{window.event.returnValue == false;} }return false;
<div id='div' onclick='alert("div");'><ul onclick='alert("ul");'><li id='ul-a' onclick='alert("li");'><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li></ul> </div> var a = document.getElementById("testB"); a.onclick = function(){return false; };?
5.閉包:
? 閉包: 就是能夠讀取到其他函數內部變量的函數(通俗點講就是函數a的內部函數b,被函數a外部的一個變量引用的時候, 就產生了一個閉包)
function a() {n = 99;function b () {alert(n);} retrun b; } var result = a (); result(); //99?
6.$().ready()和window.onload
區別:
1) 運行時間
window.onload必須等到頁面內包含圖片的全部元素載入完成后才運行。
$(document).ready()是DOM結構繪制完成后就運行，不必等到載入完成。
2) 編寫個數不同
window.onload不能同一時候編寫多個，假設有多個window.onload方法，僅僅會運行一個。
$(document).ready()能夠同一時間編寫多個。而且都能夠得到運行。
? 如何用js實現ready()方法;
function ready(fn){if(document.addEventListener){ //標準瀏覽器document.addEventListener('DOMContentLoaded',function(){//注銷時間，避免重復觸發document.removeEventListener('DOMContentLoaded',arguments.callee,false);fn(); //運行函數},false);}else if(document.attachEvent){ //IE瀏覽器document.attachEvent('onreadystatechange',function(){if(document.readyState=='complete'){document.detachEvent('onreadystatechange',arguments.callee);fn(); //函數運行}});} }?
7,px和em和rem的區別？
px:像素大小
em:如果自己有font-size的像素，如果自己標簽沒有設置font-size就繼承父級的。
rem:是繼承html標簽的font-size的像素
?
8.DOM節點的增刪改查?
查:getElementByIsd()....等等
增;appendChild():末尾插入;
insertbeforer():特定位置插入;
改:replaceChild():接受兩個參數,第一個為要插入的節點,第二個為要替換的節點;
刪:removeChild();
創建:createElement()
復制:cloneNode(true|false) ; //默認是 false。克隆節點本身;?為 true，克隆節點及其屬性，以及后代;
?
?
?
9,JSONP的原理?
根據瀏覽器同源策略，所謂同源就是協議、主機、端口號都相同時成為同源。a 域的js不能直接訪問 b域名的信息，但是script 標簽的src屬性可以跨域引用文件，jsonp是請求之后后臺包裝好一段json，并且把數據放在一個callback函數，返回一個js文件，動態引入這個文件，下載完成js之后，會去調用這個callback,通過這樣訪問數據。
?
10,如何判斷一個數組和類數組?
Object.prototype.toString.call()
?
11,什么是事件委托，jquery和原生js怎么去實現?
事件委托:利用事件冒泡的原理(不清楚請看3.1)當一個子級沒有綁定事件時他會一直向上尋找,此時父級綁定的事件就是事件委托.
具體實現:
原生js:
?
//原生的實現方法 //情景:為父級綁定事件,點擊子級時分別顯示子級自己的html內容 farter.onclick = function(ev){var ev = ev || window.event; //兼容var target = ev.target || ev.srcElement; //target是獲取當前的元素節點if(target.nodeName.toLowerlase == "child"){arert(target.innerHTML) ;} }?
jq:
delegate("選擇器","事件",回調函數)
?
12,web前端開發，如何提高頁面性能優化？(請參考雅虎軍規)
內容:
1.盡量減少HTTP請求數
2.減少DNS查找
3.避免重定向
4.讓Ajax可緩存
5.延遲加載組件
6.預加載組件
7.減少DOM元素的數量
8.跨域分離組件
9.盡量少用iframe
10.杜絕404
css部分:
11.避免使用CSS表達式
12.選擇<link>舍棄@import
13.避免使用濾鏡
14.把樣式表放在頂部
js部分:
15.去除重復腳本
16.盡量減少DOM訪問
17.用智能的事件處理器
18.把腳本放在底部
CSS && JS:
19.把JavaScript和CSS放到外面
20.壓縮JavaScript和CSS
img:
21.優化圖片
22.優化CSS Sprite
23.不要用HTML縮放圖片
24.用小的可緩存的favicon.ico（P.S. 收藏夾圖標）
cookie:
25.給Cookie減肥
26.把組件放在不含cookie的域下
移動端:
27.保證所有組件都小于25K
28.把組件打包到一個復合文檔里
服務器:
29.Gzip組件
30.避免圖片src屬性為空
31.配置ETags
32.對Ajax用GET請求
33.盡早清空緩沖區
34.使用CDN（內容分發網絡）
35.添上Expires或者Cache-Control HTTP頭
?
-------------------------------------------未完待續--------------------------------------------
總結
以上是生活随笔為你收集整理的前端面试题--重要基础知识回顾(一)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 广发银行是国企还是民营
- 下一篇： 前端数据的加密和解密--对象解密的坑