javascript
JavaScript 总结几个提高性能知识点（转）
?
具體看連接吧：
JavaScript 總結(jié)幾個(gè)提高性能知識(shí)點(diǎn)
http://www.cnblogs.com/ys-ys/p/5132013.html
前段時(shí)間花時(shí)間看了大半的《High Performance JavaScript》這本書啊，然后就開(kāi)始忙項(xiàng)目了，慶幸最忙的一周已經(jīng)熬過(guò)去了。由于空不出時(shí)間，這個(gè)月寫的學(xué)習(xí)筆記也不多，忙完最苦X的一周，這兩 天晚上也算是挑燈夜讀了...終于是在殘血之際將這本書shut down了...
既然讀完了，總歸是要學(xué)到些什么的。說(shuō)說(shuō)對(duì)這本書的看法先吧，整體的來(lái)說(shuō)，內(nèi)容還是不錯(cuò)的，就是感覺(jué)有點(diǎn)老了（作為前端小白，也可能是自身水平有 限，未能體會(huì)到其中真意）?？催@本書的過(guò)程中也是寫了挺多代碼用以測(cè)試的，并且對(duì)本書提倡的寫法和原先大眾的寫法的執(zhí)行分別進(jìn)行了斷點(diǎn)跟蹤，對(duì)于能實(shí)際測(cè) 出的問(wèn)題進(jìn)行理解，當(dāng)然，下斷點(diǎn)跟著執(zhí)行也看不出的那也沒(méi)辦法咯。對(duì)于書中的知識(shí)點(diǎn)，這里只是簡(jiǎn)單的整理出個(gè)人所推崇的一部分，當(dāng)然~ 不喜勿噴。
針對(duì)js文件的加載位置
在HTML文件中，<script>標(biāo)簽是可以加在<head>區(qū)域和<body>區(qū)域的。這里鑒于 JavaScript執(zhí)行和UI渲染的單線程原因，如果js文件載入會(huì)阻塞后面對(duì)于頁(yè)面的解析過(guò)程，頁(yè)面會(huì)等到j(luò)s文件完全加載并運(yùn)行后才繼續(xù)執(zhí)行該做的 操作。那么問(wèn)題就來(lái)了，這樣可能會(huì)出現(xiàn)頁(yè)面空白o(hù)r卡頓現(xiàn)象。作為一名前端開(kāi)發(fā)，重要的不僅僅止于實(shí)現(xiàn)了需求，應(yīng)該還有優(yōu)質(zhì)的用戶體驗(yàn)。那么我們就需要消 除用戶枯燥的等待，針對(duì)這個(gè)問(wèn)題，這里有本獸想到的兩種解決方案：
1. ?如果js文件沒(méi)有特殊要求指明需要在頁(yè)面渲染之前載入及編譯完成的，那么選擇將js文件放 到</body>標(biāo)簽前(既所有的頁(yè)面所呈現(xiàn)內(nèi)容的后面)，css文件還是放到<head>區(qū)域(誰(shuí)也不愿意看一個(gè)布局雜亂無(wú)章 的頁(yè)面)。這樣做就能先讓用戶看到有布局的頁(yè)面而不是空白頁(yè)了，那么也會(huì)有人指出：那數(shù)據(jù)得通過(guò)js請(qǐng)求加載進(jìn)來(lái)啊，怎么辦呢？可以對(duì)數(shù)據(jù)的加載做排序， 急需呈現(xiàn)的接口放前面執(zhí)行，不是那么需要的可以延后執(zhí)行，同時(shí)做個(gè)簡(jiǎn)單的載入動(dòng)畫or提示。
2. ?如果這些js文件有指明需要先執(zhí)行了，才能更好的展示頁(yè)面內(nèi)容，那么就在第一個(gè)js或者頁(yè)面上先放個(gè)載入小動(dòng)畫，可以一些有趣的或者萌萌的動(dòng)畫場(chǎng)景。這樣也是能較好的避免用戶等待的無(wú)聊，說(shuō)不定人家還對(duì)這個(gè)載入動(dòng)畫更感興趣呢，這樣可提升項(xiàng)目的用戶體驗(yàn)感。
最終推薦：將<script>標(biāo)簽盡可能的放到</body>標(biāo)簽前面加載，以提升用戶體驗(yàn)。
針對(duì)js文件的合并
在 很多團(tuán)隊(duì)開(kāi)發(fā)中，我們可能會(huì)將不同功能的代碼塊分別放置在不同的js文件中，以便于開(kāi)發(fā)過(guò)程中眾人合作寫代碼會(huì)更加方便，畢竟只需要找對(duì)應(yīng)文件夾或文件而 不是在一個(gè)很長(zhǎng)的文件中找一個(gè)方法。這確實(shí)是會(huì)提高團(tuán)隊(duì)開(kāi)發(fā)效率及新人加入后的更容易進(jìn)行二次開(kāi)發(fā)及維護(hù)。那么將這個(gè)問(wèn)題放到頁(yè)面性能里呢？這正是問(wèn)題所 在，在這本書中指出：Each HTTP request brings with it additional performance overhead,so downloading one single 100 KB file will be faster than downloading four 25 KB files.
下載1個(gè)100KB的文件比下載4個(gè)25KB的文件要快，而開(kāi)發(fā)過(guò)程中區(qū)分開(kāi)各個(gè)文件又有很大的好處，那么合并這個(gè)問(wèn)題也就放在開(kāi)發(fā)完后再處理咯，相信這個(gè)操作大家都不會(huì)陌生吧，現(xiàn)在的前端工具這么豐富，各位習(xí)慣用什么壓縮就用什么壓縮吧~
這里簡(jiǎn)單提出下，在載入文件方面還可以用到defer和async屬性，用于延遲加載和異步加載，在現(xiàn)代瀏覽器中，大多數(shù)是已經(jīng)支持defer屬性了，還沒(méi)習(xí)慣用這個(gè)額，也不知道具體會(huì)不會(huì)存在什么問(wèn)題。有興趣的朋友可自行g(shù)oogle該知識(shí)點(diǎn)，這里件簡(jiǎn)單提下吧。
現(xiàn)在的框架也大多配合懶加載和按需加載了。
更快速的數(shù)據(jù)訪問(wèn)
對(duì)于瀏覽器來(lái)說(shuō)，一個(gè)標(biāo)識(shí)符所處的位置越深，去讀寫他的速度也就越慢(對(duì)于這點(diǎn)，原型鏈亦是如此)。這個(gè)應(yīng)該不難理解，簡(jiǎn)單比喻就是：雜貨店離你家越遠(yuǎn)，你去打醬油所花的時(shí)間就越長(zhǎng)... 熊孩子，打個(gè)醬油那么久，菜早燒焦了 -.-~
如果我們需要在當(dāng)前函數(shù)內(nèi)多次用到一個(gè)變量值，那么我們可以用一個(gè)局部變量先將其存儲(chǔ)起來(lái)，
轉(zhuǎn)載于:https://www.cnblogs.com/rechen/p/5132061.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript 总结几个提高性能知识点（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： web端功能测试总结（一）
- 下一篇： HDU5150 Sum Sum Sum