1.數據類型:
可變的引用類型:object(array ,function,正則);
不可變的原始類型:null, undefined, number, string, boolean, symbol(es6)
//引用類型
var arr1 = [1,2];
var arr2 = arr1
arr2.push(3)
console.log(arr1) //[99]
//原始類型
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頭
-------------------------------------------未完待續--------------------------------------------
原文出處：https://www.cnblogs.com/1234wu/p/10475454.html