1，css sprite,如何使用

為了節省圖片資源加載，將多張圖片整合到到一張圖片上，利用background屬性進行添加，background： #000 url("")? no-repeate fix 50% 50%

2，封裝事件監聽

function addEventHandle（target,type,fn） {

　　if(target.addEventListener) {

　　　　target.addEventLister(type, fn)

　　} else {

　　　　target.addEvent("on"+type,? fn)

　　}

}

3，移除監聽事件

function removeEventHandle（target,type,fn） {

　　if(target.addEventListener) {

　　　　target.removeEventLister(type, fn)

　　} else {

　　　　target.detachEvent("on"+type,? fn)

　　}

}

4，事件委托（提高性能，減少內存占用）

document.onclick = function(event) {

　　event = event || window.even;

? ? ? ?var target = event.target || event.srcElement;?

　　if(target.id === "saveBtn")?{

　　　　alert("把子元素的click事件委托給docment去執行")

　　}

}

5，事件綁定的防范

html中綁定;dom.onclick();利用時間監聽綁定時間

6，js中的定時器有哪些？

?setTimeOut() 只執行一次? -----clearTimeOut()

setInterval()會一直重復執行 --- clearInterval()

var t =?setTimeOut(fn,1000)

clearTimeOut(t);

7，數據存儲

cookie：存儲小；設置有效期限內不會被自動刪除；和服務器之間可以互相傳輸數據。

localStorage: 有限制，比cookie大；除非手動，瀏覽器關閉不丟數據；只是通過api本地存儲數據。

sessionStorage:有限制，比cookie大；瀏覽器關閉，數據丟失；只是本地數據存儲。

8，計算數組元素的和

function add (arr){arr.reduce(function(a,y){return x+y})}

9，性能優化

?頁面級別優化

（1）???? 減少http請求數（從設計層面減少請求，設置緩存減少請求，資源合并壓縮，

（2）???? 框架只引入核心模塊

（3）???? 將外部腳本在頁面加載完成之后進行引入

（4）???? Css放在head中

?代碼級別優化

（1）減少dom操作

（2）避免使用eval

（3）減少作用鏈查找，局部變量全局化

（4）字符串拼接使用join，not “+”

（5）圖片壓縮

10，實現鏈式繼承

function Super() {

　　this.a = 0;

　　this.b = 0;

}

Super.prototype.add = function(a,b){

　　this.a +=? a;

　　this.b += b;

}

?function Sub () {super.call(this)} // call supre constuctor

Sub.prototype = Object.create(Supre.prototype)；

Sub.prototype.constructor = Sub;

轉載于:https://www.cnblogs.com/angel1254/p/10720813.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的重学前端（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。