摘要:而通過加載的文件內(nèi)容是能夠被客戶端獲取到的,所以必須遵循同源策略,否則被引入文件的內(nèi)容會(huì)泄漏或者存在其他風(fēng)險(xiǎn)此處可以是服務(wù)端的數(shù)據(jù)接口直接返回需要的信息的美妙之處值在不同的頁面甚至不同域名加載后依舊存在,并且可以支持非常長(zhǎng)的值。
一 分頁優(yōu)化
首次查詢的時(shí)候緩存結(jié)果。這樣情況就變得簡(jiǎn)單了,無論是結(jié)果條目的數(shù)量,總共的頁面數(shù)量,還是取出其中的部分條目。
不顯示總共有多少條目。Google搜索結(jié)果的分頁顯示就用了這個(gè)特性。很多時(shí)候你可能看了前幾頁,就夠了。那么我可以這樣,每次我都把結(jié)果限制在500條(這個(gè)數(shù)據(jù)越大 資源消耗越大)然后你每次查詢的時(shí)候,都查詢501條記錄,這樣,如果結(jié)果真有501個(gè),那么我們就顯示鏈接 “顯示下500條記錄”。
不顯示總頁面數(shù)。只給出“下一頁”的鏈接,如果有下一頁的話。(如果用戶想看上一頁的話,他會(huì)通過瀏覽器來回到上一頁的)。那你可能會(huì)問我“不顯示總頁面數(shù)”怎么知道是不是有下一頁呢?這里有一個(gè)很好的小技巧:你在每次顯示你當(dāng)前頁面條目的時(shí)候你都多查詢一條,例如你要顯示第11-20個(gè)條目時(shí),你就取出11-21條記錄(多取一條,并不顯示這多取的內(nèi)容),那么當(dāng)你發(fā)現(xiàn)第21條存在的時(shí)候就顯示“下一頁的鏈接”,否則就是末頁了。這樣你就不用每次計(jì)算總頁面數(shù)量了,特別是在做緩存很困難的時(shí)候這樣做效率非常好。
估算總結(jié)果數(shù)。Google就是這么做的,事實(shí)證明效果很好。用EXPLAIN 來解釋你的SQL,然后通過EXPLAIN的結(jié)果來估算。EXPLAIN結(jié)果有一列”row”會(huì)給你一個(gè)大概的結(jié)果。(這個(gè)辦法不是處處都行,但是某些地方效果是很好的)這些辦法可以很大程度上減輕數(shù)據(jù)庫(kù)的壓力,而且對(duì)用戶體驗(yàn)不會(huì)有什么影響。
二 為什么跨域怎么解決 1 動(dòng)態(tài)創(chuàng)建script標(biāo)簽為什么script標(biāo)簽引入的文件不受同源策略的限制?因?yàn)閟cript標(biāo)簽引入的文件內(nèi)容是不能夠被客戶端的js獲取到的,不會(huì)影響到被引用文件的安全,所以沒必要使script標(biāo)簽引入的文件遵循瀏覽器的同源策略。而通過ajax加載的文件內(nèi)容是能夠被客戶端js獲取到的,所以ajax必須遵循同源策略,否則被引入文件的內(nèi)容會(huì)泄漏或者存在其他風(fēng)險(xiǎn)
function loadScript(url, func) { var head = document.head || document.getElementByTagName("head")[0]; var script = document.createElement("script"); script.src = url; script.onload = script.onreadystatechange = function() { if(!this.readyState || this.readyState == "loaded" || this.readyState == "complete") { func(); script.onload = script.onreadystatechange = null; } }; head.appendChild(script); } window.baidu = { sug: function(data) { console.log(data); } } loadScript("http://suggestion.baidu.com/su?wd=w", function() { console.log("loaded") }); //此處可以是服務(wù)端的數(shù)據(jù)接口直接返回需要的信息 // loadScript("http://localhost:8080/resteasyDemo/rest/echo/test?test=1", function() { // console.log("loaded") // console.log(name) // });2 window.name+iframe
window.name 的美妙之處:name 值在不同的頁面(甚至不同域名)加載后依舊存在,并且可以支持非常長(zhǎng)的 name 值(2MB)。
步驟 1 創(chuàng)建包含獲取和創(chuàng)建iframe代碼的A域名下a.html
步驟 2 創(chuàng)建A域名下的空頁面b.html
目的是當(dāng)iframe設(shè)置跨域后的頁面后立即重新src到同源的b.html頁面,從而完成加載的是跨域頁面而實(shí)際src是同源頁面,用來實(shí)現(xiàn)同源獲取值
a.html頁面寫如下代碼
function proxy(url, func) { var isFirst = true, ifr = document.createElement("iframe"), loadFunc = function() { if(isFirst) { ifr.contentWindow.location = "http://10.149.4.6:8020/b.html"; isFirst = false; } else { func(ifr.contentWindow.name); ifr.contentWindow.close(); document.body.removeChild(ifr); ifr.src = ""; ifr = null; } }; ifr.src = url; ifr.style.display = "none"; if(ifr.attachEvent) ifr.attachEvent("onload", loadFunc); else ifr.onload = loadFunc; document.body.appendChild(ifr); }
調(diào)用跨域頁面
proxy("http://10.149.4.10:8080/c.html", function(data) { console.log(JSON.stringify(data)); });
c頁面設(shè)置window.name
3 postMessage HTML5中 XMLHttpRequest level2中的 API
a.com/index.html
b.com/index.html
4 jsonP不用多說..js標(biāo)簽執(zhí)行回調(diào)
5 web socketsvar socket = new WebSockt("ws://www.baidu.com");//http->ws; https->wss socket.send("hello WebSockt"); socket.onmessage = function(event){ var data = event.data; }三 事件委托
需要了解的是 對(duì)象的 冒泡事件和捕獲事件(true)
1 針對(duì)同一個(gè)元素來說捕獲事件和冒泡事件的執(zhí)行順序取決于對(duì)這個(gè)元素綁定事件的先后聲明
2 對(duì)于除去本身點(diǎn)擊元素外的父元素來說,捕獲事件優(yōu)先于冒泡事件觸發(fā)
e.target和e.currentTarget區(qū)別是 前者是事件觸發(fā)的元素,后者是事件綁定的觸發(fā)元素
四 實(shí)現(xiàn)extend對(duì)淺拷貝的一次遞歸實(shí)現(xiàn)了深拷貝
function cloneOriginal(obj) { if(typeof obj != "object" && obj != null || obj == null) return obj; var temObj = obj.constructor === Array?[]:{}; for(var key in obj) { temObj[key] = cloneOriginal(obj[key]); } return temObj; } function extend() { if(arguments.length < 2) return arguments; var temObj = cloneOriginal(arguments[0]); for(var i = 1;i而其中json解析的方法對(duì)于序列化的簡(jiǎn)單的拷貝來說可以,但是對(duì)于很大沒有完全序列化的對(duì)象來說是不行的
例:var a = {name:111,b:function() {}}
五 Event Loop上圖中,主線程運(yùn)行的時(shí)候,產(chǎn)生堆(heap)和棧(stack),棧中的代碼調(diào)用各種外部API,它們?cè)?任務(wù)隊(duì)列"中加入各種事件(click,load,done)。只要棧中的代碼執(zhí)行完畢,主線程就會(huì)去讀取"任務(wù)隊(duì)列",依次執(zhí)行那些事件所對(duì)應(yīng)的回調(diào)函數(shù)。
執(zhí)行棧中的代碼(同步任務(wù)),總是在讀取"任務(wù)隊(duì)列"(異步任務(wù))之前執(zhí)行
六 同一幀數(shù)管理頁面當(dāng)頁面動(dòng)畫非常繁多,并且需要不斷的刷新不同動(dòng)畫數(shù)據(jù)的時(shí)候,瀏覽器每次收到從Server端發(fā)來的消息,js腳本都會(huì)將消息的內(nèi)容作為一個(gè)新的文本節(jié)點(diǎn)添加到頁面中去。這樣做,會(huì)立刻導(dǎo)致HTML文檔的部分DOM樹重構(gòu),部分渲染樹重構(gòu),部分渲染樹重排,已經(jīng)部分渲染樹重繪。也就是說,每當(dāng)瀏覽器收到一條消息,都會(huì)執(zhí)行上面的4個(gè)步驟。這樣一來,處理每條消息時(shí),瀏覽器畫在更新渲染頁面上的時(shí)間大大超出了js腳本運(yùn)行所需的時(shí)間。于是我們看到的結(jié)果就是頁面變得非常卡,用戶體驗(yàn)極差。
通過setTimeout遞歸調(diào)用自己,并且是每隔16ms調(diào)用一次,大約一秒60次。每次被調(diào)用的時(shí)候,該函數(shù)都會(huì)挨個(gè)檢查頁
七 promise詳解具體API都在這里了
知識(shí)點(diǎn):偏函數(shù)應(yīng)用偏函數(shù)應(yīng)用 閉包應(yīng)用的一種
實(shí)例:function joinWords(a,b) { return [a,b].join(" "); } function prefixer(word) { return function(b) { return joinWords(word,b); } } var prefixWithHate = prefixer("Hate"); console.log(prefixWithHat("Java"));prefixer函數(shù)授受一個(gè)詞作為參數(shù),返回一個(gè)函數(shù)并預(yù)先填入這個(gè)詞作為第一個(gè)參數(shù),這是利用閉包,word 對(duì)于內(nèi)部函數(shù)是可以訪問的,
學(xué)習(xí)點(diǎn),
偏函數(shù)中的閉包 參數(shù)對(duì)于子函數(shù)永遠(yuǎn)可見
函數(shù)內(nèi)用retrurn 返回函數(shù)的寫法
用一個(gè)變量獲得成為一個(gè)函數(shù),
偏函數(shù)設(shè)置默認(rèn)的是值,并不變量,類似閉包實(shí)現(xiàn)
八 基本類型和引用類型ECMAScript 中,所有函數(shù)的參數(shù)都是按值來傳遞的。基本類型值的傳遞和基本類型變量復(fù)制一致(采用在棧內(nèi)新建值),引用類型值的傳遞和引用類型變量的復(fù)制一致(棧內(nèi)存空間的復(fù)制,棧內(nèi)存放的是指針,指向堆中同一對(duì)象
九 bindFunction.prototype.bind_ = function() { var t = this, param = Array.prototype.slice.call(arguments), fn = param.shift(), content = param; return function() { return t.apply(fn, content.concat(Array.prototype.slice.call(arguments))); } } //賦值默認(rèn)值 var fuzhi = function() { var t = this, param = Array.prototype.slice.call(arguments), fn = param.shift(), content = param; return function() { return fn.apply(this,content.concat(Array.prototype.slice.call(arguments))) } } function test(n,name) { setTimeout(function() { console.log(name); },n) } var test_ = fuzhi(test,2000); test_("hahah"); }十 關(guān)于new運(yùn)算符這是在書中看到的,拿來總結(jié)下
當(dāng)一個(gè)函數(shù)對(duì)象被創(chuàng)建時(shí),F(xiàn)unction構(gòu)造器產(chǎn)生的函數(shù)對(duì)象會(huì)運(yùn)行這樣的一段代碼:Function.prototype = {constructor:this}
new的實(shí)際意義:
Function.prototype.method = function(name,fn) { if(this.prototype[name]) return this; this.prototype[name] = fn; return this; } Function.method("new",function() { var that = Object.create(this.prototype); var other = this.apply(that,arguments); return (typeof other === "object" && other) || that; }) }簡(jiǎn)單應(yīng)用例子
//簡(jiǎn)單的偽類繼承 Function.method("jc",function(jcObj) { this.prototype = new jcObj(); return this; }) var people = function() { this.name = "people"; }.method("getName",function() { console.log(this.name); }) var man = function() { this.manName = "man"; } .jc(people) .method("detail",function() { console.log("my father`s name is: "+this.name); console.log("my name is: "+this.manName); }) var obj = new man(); obj.detail() }實(shí)際簡(jiǎn)單總結(jié)下就是如下代碼
step1 :創(chuàng)建構(gòu)造函數(shù)function A() { this.name = "a"; } var a = new A();step2 創(chuàng)建a實(shí)例使用new經(jīng)歷了以下四個(gè)步驟
1 var obj = {};2 obj.__proto__ = A.prototype;
3 A.call(obj);
4 return obj;
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/89861.html
摘要:而通過加載的文件內(nèi)容是能夠被客戶端獲取到的,所以必須遵循同源策略,否則被引入文件的內(nèi)容會(huì)泄漏或者存在其他風(fēng)險(xiǎn)此處可以是服務(wù)端的數(shù)據(jù)接口直接返回需要的信息的美妙之處值在不同的頁面甚至不同域名加載后依舊存在,并且可以支持非常長(zhǎng)的值。 一 分頁優(yōu)化 首次查詢的時(shí)候緩存結(jié)果。這樣情況就變得簡(jiǎn)單了,無論是結(jié)果條目的數(shù)量,總共的頁面數(shù)量,還是取出其中的部分條目。 不顯示總共有多少條目。Googl...
摘要:而通過加載的文件內(nèi)容是能夠被客戶端獲取到的,所以必須遵循同源策略,否則被引入文件的內(nèi)容會(huì)泄漏或者存在其他風(fēng)險(xiǎn)此處可以是服務(wù)端的數(shù)據(jù)接口直接返回需要的信息的美妙之處值在不同的頁面甚至不同域名加載后依舊存在,并且可以支持非常長(zhǎng)的值。 一 分頁優(yōu)化 首次查詢的時(shí)候緩存結(jié)果。這樣情況就變得簡(jiǎn)單了,無論是結(jié)果條目的數(shù)量,總共的頁面數(shù)量,還是取出其中的部分條目。 不顯示總共有多少條目。Googl...
摘要:我對(duì)知乎前端相關(guān)問題的十問十答張?chǎng)涡駨場(chǎng)涡翊笊駥?duì)知乎上經(jīng)典的個(gè)前端問題的回答。作者對(duì)如何避免常見的錯(cuò)誤,難以發(fā)現(xiàn)的問題,以及性能問題和不好的實(shí)踐給出了相應(yīng)的建議。但并不是本身有問題,被標(biāo)準(zhǔn)定義的是極好的。 這一次,徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制,如果讀完本文還不懂,可以揍我。 不論你是javascript新手還是老...
閱讀 2793·2021-10-11 10:57
閱讀 2402·2021-08-27 16:20
閱讀 1384·2019-08-30 13:03
閱讀 1563·2019-08-30 12:50
閱讀 3336·2019-08-29 14:16
閱讀 1561·2019-08-29 11:12
閱讀 1613·2019-08-28 17:53
閱讀 2893·2019-08-27 10:58