重学前端（二）
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年技術見證，附贈技術全景圖總結
- 上一篇： 微信浏览器的html5页面显示配置等问题
- 下一篇： 2017年html5行业报告,云适配发布