javascript
前端优化方案-JavaScript 优化方案 收藏 此文于2010-06-04被推荐到CSDN首页
前端優(yōu)化方案-JavaScript 優(yōu)化方案 收藏 此文于2010-06-04被推薦到CSDN首頁
如何被推薦？
Author: 李麗媛
Date: 2010/6/2
Email: lly219#gmail.com
2?????? JavaScript 優(yōu)化方案
2.1????????? 測試驅(qū)動開發(fā)
為了編寫可維護的 JavaScript ，測試驅(qū)動是必不可少的。因為每個測試都起到質(zhì)量反饋的作用，給后期維護和修改創(chuàng)建了一個安全保護網(wǎng)并提供了一份可執(zhí)行的文檔。通過測試，我們可以保證所有的功能被覆蓋，也避免了重寫代碼后再進行測試的高昂代價。
解決方案 ：以后的開發(fā)中使用 JsUnit 和 JSMock 進行測試驅(qū)動。
?
2.2????????? 框架
現(xiàn)在已經(jīng)形成部分框架，但都不夠復(fù)用和抽象。并且缺少文檔說明，讓后期開發(fā)人員很難進行維護和使用。
解決方案 ：對框架進行封裝、抽象、改進，并且完善文檔。
?
2.3????????? 文件壓縮（ YUI Compressor ）
a)???????? 移除注釋
b)???????? 移除額外的空格
c)???????? 細微優(yōu)化
d)???????? 標(biāo)識符替換
解決方案 ：代碼發(fā)布時，使用以上壓縮工具進行壓縮。
?
2.4????????? 使用 JSON
JSON 是一種輕量級的數(shù)據(jù)格式，體現(xiàn)在它的結(jié)構(gòu)定義非常簡單，而且已成為當(dāng)今 Web 端的主流數(shù)據(jù)格式標(biāo)注。
解決方案 ：把能更改為 JSON 數(shù)據(jù)格式的數(shù)據(jù)盡量進行更改。
?
2.5????????? 瀏覽器兼容
Web 時代，主流瀏覽器兼容是必須的。而且當(dāng) IE 9 來到時，向下兼容可能會出現(xiàn)一些問題。時代在發(fā)展， Google 都擯棄了 IE6 ， 既然都有權(quán)要求用戶使用 IE 瀏覽器，為何不能要求用戶對瀏覽器升級，或滿足使用其它瀏覽器的用戶呢？
?????? 解決方案 ：更改代碼，使其兼容主流瀏覽器。
?
2.6????????? 使用一些提高 JavaScript 效率的基本常識方法
a)???????? 使用三元操作符代替 if…else… ；
b)???????? 減少 DOM 訪問；
c)???????? 盡量使用 switch ；
d)???????? 簡化常用對象定義（ var obj = {}; 代替 var obj = new Object(); ）；
e)???????? 避免使用 Eval ；
f)????????? 盡量使用語言本身的構(gòu)造和內(nèi)建函數(shù)；
g)???????? 對高級對象采用緩存；
h)???????? 避免過多的應(yīng)用層次和不必要的方法調(diào)用。
??? 解決方案 ：編寫代碼過程中遵循以上方法。
???
2.7????????? 代碼的可讀性
是程序員都可以寫出機器可讀的代碼，但是要做一名好的程序員就必須寫出人類可讀的代碼。
解決方案 ：在需要的地方增加注釋；降低代碼的層次嵌套；遵循代碼的重用規(guī)則；規(guī)范命名等等；。
?
2.8????????? 常量和全局變量
JavaScript 文件較多，里面的常量和全局變量過雜過亂。
解決方案 ：常量單獨放到一個 js 文件中進行定義和管理；全局變量應(yīng)有詳細的文檔說明。
?
2.9????????? 查找瓶頸
a)???????? 局域網(wǎng)不慢，互聯(lián)網(wǎng)慢則為加載慢；
b)???????? Chrome 不慢， IE 慢則為渲染慢；
c)???????? 越用越慢則為內(nèi)存泄露。
??????? 解決方案 ：針對 a) 可對文件進行壓縮；動態(tài)加載；加載提示。針對 b) 可緩存經(jīng)常用到的節(jié)點查詢結(jié)果；注意 DOM 的刷新；減少加載減少解析；晚加載晚解析。針對 b) 可參見： JS內(nèi)存泄露 。
?
2.10?????? split 應(yīng)使用 ascii 碼
看到分割的時候使用了一些常用的字符，這樣當(dāng)字符串中出現(xiàn)該字符時，就會產(chǎn)生影響。
??? 解決方案 ： split 分割時使用 ascii 碼。
?
2.11?????? 14 Rules for Faster-Loading Web Sites
解決方案 ：根據(jù)實際情況選擇適合的規(guī)則，逐一改進。
?
3 ．圖片優(yōu)化方案
3.1.???????? 規(guī)范命名
a)???????? 命名有意義，讓人一看便知；
b)???????? 按標(biāo)準(zhǔn)分類，放入相應(yīng)的文件夾中。
??? 解決方案 ：對圖片重新進行整理，重命名，重新分類，重新切片。牽扯到的 CSS ， JavaScript 也一律進行修改。
?
3.2.???????? 圖片壓縮
解決方案 ：由美工進行修改。
?
3.3.???????? 格式統(tǒng)一，可按照需求使用 gif 和 jpg
解決方案 ：由美工進行修改。
本文來自CSDN博客，轉(zhuǎn)載請標(biāo)明出處：http://blog.csdn.net/Vanessa219/archive/2010/06/03/5644683.aspx
總結(jié)
以上是生活随笔為你收集整理的前端优化方案-JavaScript 优化方案 收藏 此文于2010-06-04被推荐到CSDN首页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《大数据》第1期“研究”——大数据管理系
- 下一篇： javascript DOM 遍历