Ⅰ 了解主流的前端開發編輯工具至少3種 ,寫出其各自優缺點
vscode：
微軟出廠的高顏值編輯器
載入大文件幾乎秒開，運行速度很快
跨平台的文本編輯器，內置了對許多主流語言的支持
非常方便的管理插件，可以快速找到適合自己的前端插件
完全免費（非常推薦）
webstorm
集成了許多強大的功能
快速查找文件，快速搜索
對js的開發全面支持，對主流行語言的支持
集成了多版本版本控制工具
HBuilder X（免費）
HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。 [
HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。
它基於Eclipse，所以順其自然地兼容了Eclipse的插件。
Ⅱ Web前端性能優化的實用技巧匯總
今天小編要跟大家分享的文章是關於Web前端性能優化的實用技巧匯總。javascript在瀏覽器中運行的性能，可以認為是開發者所面臨的最嚴重的可用性問題。這個問題因為javascript的阻塞性而變得復雜，事實上，多數瀏覽器使用單一進程來處理用戶界面和js腳本執行，所以同一時刻只能做一件事。js執行過程耗時越久，瀏覽器等待響應的時間越長。
一.提高載入性能
1.IE8,FF,3.5,Safari4和Chrome都允許並行下載js文件，當script下載資源時不會阻塞其他script的下載。但是js下載仍然會阻塞其他資源的下載，如圖片。盡管腳本下載不會互相影響，但頁面仍然必須等待所有塌塵岩js代碼下載並執行完才能繼續。因兄雹此仍然存在腳本阻塞問題.推薦將所有js文件放在body標簽底部以減少對整個頁面的影響。
2.減少頁面外鏈腳本文件的數量將會提高頁面性能：
http請求會帶來額外的開銷，因此下載單個300k的文件將比下載10個30k的文件效率更高。
3.動態腳本載入技術：
無論何時啟動下載，文件的下載和執行都不會阻塞頁面其他進程。
functionlaodScript(url,callback){
varscript=document.createElement('script');_
_cript.type='text/javascript'__f(script.readyState){//ie
____cript.onreadystatechange=function(){_____
if(script.readyState=='loaded'||script.readyState=='complete'){_______
_cript.onreadystatechange=null;_______
callback()_____
____
__
}else{//其他瀏覽器___
script.onload=function(){_____
_allback()
___}_
}_
script.src=url;_
document.getElementsByTagName('head')[0].appendChild(script);
}
//使用
loadScript('./a.js',function(){_
loadScript('./b.js',function(){___
loadScript('./c.js',function(){_____
console.log('載入完成')___
})_
})
})
4.無阻塞載入類庫——LABjs,使用方法如下：
//鏈式調用時文件逐個下載，.wait()用來指定文件下載並執行完畢後所調用的函數
$LAB.script('./a.js')_
.script('./b.js')_
.wait(function(){__
_pp.init();
})
//為了保證執行順序，可以這么做,此時a必定在b前執行
$LAB.script('./a.js').wait()_
.script('./b.js')_
.wait(function(){___
_pp.init();
})
二.數據存取與JS性能
1.在js中，數據存儲的位置會對代碼整體性能產生重大影響。數據存儲共有4種方式：字面量，變數，數組項，對象成員。他們有著各自的性能特點。
2.訪問字面量和局部變數的速度最快，相反，訪問數組和對象相對較慢
3.由於局部變數存在於作用域鏈的起始位置，因此訪問局部變數的比訪問跨域作用變數更快
4.嵌套的對象成員會明顯影響性能，應盡量避免
5.屬性和方法在原型鏈位置越深，訪問他的速度越慢
6.通常我們可以把需要多次使用的對象成員，數組元素，跨域變數保存在局部變數中來改善js性能
三.DOM編程
1.訪問DOM會影響瀏覽器性能，修改DOM則更耗費性能，因為他會導致瀏覽器重新計算頁面的幾何變化。<通常的做法是減少訪問DOM的次數，把運算盡量留在JS這一端。
注團御：如過在一個對性能要求比較高的操作中更新一段HTML，推薦使用innerHTML，因為它在絕大多數瀏覽器中運行的都很快。但對於大多數日常操作而言，並沒有太大區別，所以你更應該根據可讀性，穩定性，團隊習慣，代碼風格來綜合決定使用innerHTML還是createElement()
2.HTML集合優化
HTML集合包含了DOM節點引用的類數組對象，一直與文檔保持連接，每次你需要最新的信息時，都會重復執行查詢操作，哪怕只是獲取集合里元素的個數。
①_優化一——集合轉數組collToArr
functioncollToArr(coll){_
for(vari=0,a=[],len=coll.length;i
a._ush(coll[i]);
__
returna
}
②緩存集合length
③訪問集合元素時使用局部變數（即將重復的集合訪問緩存到局部變數中，用局部變數來操作）
3.遍歷DOM
①使用只返回元素節點的API遍歷DOM,因為這些API的執行效率比自己實現的效率更高：
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性名
被替代屬性
children
childNodes
childElementCount
childNodes.length
firstElementChild
firstChild
lastElementChild
lastChild
nextElementSibling
nextSibling
previousElementSibling
previousSibling
_諮≡衿_PI——querySelectorAll()
querySelectorAll()方法使用css選擇器作為參數並返回一個NodeList——包含著匹配節點的類數組對象，該方法不會返回HTML集合，因此返回的節點不會對應實時文檔結構，著也避免了HTML集合引起的性能問題。
let_rr=_ocument.querySelectorAll('div.warning,_iv.notice>_')
4.重繪和重排
瀏覽器在下載完頁面的所有組件——html,js,css,圖片等之後，會解析並生成兩個內部數據結構——_OM樹，渲染樹.一旦DOM樹和渲染樹構建完成，瀏覽器就開始繪制頁面元素（paint）.
①重排發生的條件：
添加或刪除可見的DOM元素位置變化元素尺寸改變內容改變頁面渲染器初始化瀏覽器窗口尺寸變化出現滾動條時會觸發整個頁面的重排_嘏瘧囟ㄖ鞀
5.渲染樹變化的排列和刷新
大多數瀏覽器通過隊列化修改並批量執行來優化重排過程，然而獲取布局信息的操作會導致隊列強制刷新。
offsetTop,offsetWidth...
scrollTop,scrollHeight...
clientTop,clientHeight...
getComputedStyle()
一些優化建議：將設置樣式的操作和獲取樣式的操作分開：
//設置樣式
body.style.color='red'
body.style.fontSize=པpx'
//讀取樣式
letcolor=body.style.color
let_ontSize=_ody.style.fontSize
另外，獲取計算屬性的兼容寫法：
functiongetComputedStyle(el){_
varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,'');_
returncomputed
}
6.最小化重繪和重排
①.批量改變樣式
/*使用cssText
*/el.style.cssText='border-left:1px;_order-right:2px;_adding:20px'
②.批量修改dom的優化方案——使元素脫離文檔流-對其應用多重改變-把元素帶迴文檔
functionappendDataToEl(option){
vartargetEl=option.target||document.body,___
createEl,___
data=option.data||[];_//讓容器脫離文檔流，減少重繪重排_
vartargetEl_display=targetEl.style.display;_
targetEl.style.display='none'
_
//*****創建文檔片段來優化Dom操作****_
varfragment=document.createDocumentFragment();_//給元素填充數據_
for(vari=0,max=data.length;i
createEl=
document.createElement(option.createEl);___
for(varitemindata[i]){_____
if(item.toString()==='text'){_______
createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________
_f(item.toString()==='html'){_______
createEl.innerHTML=item,data[i][item];_______
continue;_____
}_____
_reateEl.setAttribute(item,data[i][item]);_______
//****將填充好的node插入文檔片段****___
fragment.appendChild(createEl);___
//****將文檔片段統一插入目標容器****_
targetEl.appendChild(fragment);_
//顯示容器，完成數據填充_
targetEl.style.display=
targetEl_display;
}
//使用
varwrap=document.querySelectorAll('.wrap')[0];
vardata=[_
_name:'xujaing',text:'選景',title:'xuanfij'},_
{name:'xujaing',text:'選景',title:'xuanfij'},_
{name:'xujaing',text:'選景',title:'xuanfij'}];
appendDataToEl({_
target:wrap,_
createEl:'div',
_ata:data
});
上面的優化方法使用了文檔片段:_蔽頤前鹽牡燈尾迦氳澆詰闃惺保導噬媳惶砑擁鬧皇歉悶蔚淖詠詰悖皇瞧偽舊懟？梢允溝_om操作更有效率。
②.緩存布局信息
//緩存布局信息
letcurrent=el.offsetLeft;
current++;
el.style.left=current+'px'
if(current>300){_
stop();
}
④.慎用:hover
如果有大量元素使用:hover,那麼會降低相應速度，CPU升高
⑤.使用事件委託（通過事件冒泡實現）來減少事件處理器的數量，減少內存和處理時間
functiondelegation(e,selector,callback){_
e=e||window.event;_
vartarget=e.target||e.srcElement;
_if(target.nodeName!==selector||
target.className!==selector||target.id!==selector){___
return;
_}_
if(typeofe.preventDefault==='function'){__
_.preventDefault();___
e.stopPropagation();
}else{___
e.returnValue=false;
e.cancelBubble=true;_
}
__allback()}
四.演算法和流程式控制制
1.循環中減少屬性查找並反轉(可以提升50%-60%的性能)
//for循環
for(vari=item.length;i--){_
process(item[i]);
}
//while循環
varj=item.length;
while(j--){_
process(item[i]);
}
2.使用Duff裝置來優化循環（該方法在後面的文章中會詳細介紹）
3.基於函數的迭代（比基於循環的迭代慢）
items.forEach(function(value,index,array){__rocess(value);})
4.通常情況下switch總比if-else快，但是不是最佳方案
五.字元串和正則表達式
1.除了IE外，其他瀏覽器會嘗試為表達式左側的字元串分配更多的內存，然後簡單的將第二個字元串拷貝到他的末尾，如果在一個循環中，基礎字元串位於最左側，就可以避免重復拷貝一個逐漸變大的基礎字元串。2.使用[sS]來匹配任意字元串3.去除尾部空白的常用做法：
if(!String.prototype.trim){_
String.prototype.trim=function(){___
returnthis.replace(/^s+/,'').replace(/ss*$/,'')_
}
}
六.快速響應的用戶界面
1.瀏覽器的UI線程：用於執行javascript和更新用戶界面的進程。
2.在windows系統中定時器解析度為15毫秒，因此設置小於15毫秒將會使IE鎖定，延時的最小值建議為25ms.
3.用延時數組分割耗時任務：
functionmultistep(steps,args,callback){_
vartasks=steps.concat();
__etTimeout(function(){___
vartask=tasks.shift();___
task.apply(null,args||[]);_//調用Apply參數必須是數組
___
if(tasks.length>0){_____
setTimeout(arguments.callee,25);
___else{_____
_allback();___
__
},25);
}
4.記錄代碼運行時間批處理任務：
functiontimeProcessArray(items,process,callback){_
vartodo=item.concat();__etTimeout(function(){___
varstart=+newDate();
__o{_____
_rocess(todo.shift());___
}while(todo.length>0&&(+newDate()-start<50));
____f(todo.length>0){_____
_etTimeout(arguments.callee,25);
___else{____
_allback(items);_
}_
_,25)
}
5.使用WebWorker：它引入了一個介面，能使代碼運行且不佔用瀏覽器UI線程的時間。一個Worker由如下部分組成：
①一個navigator對象，包括app
Ⅲ 從「等等」到「秒開」再到「直開」，是什麼讓閑魚社區相見恨晚
閑魚前端頁面的性能常常被人念叨，凡跳轉、必跳魚的印象深入人心，部分頁面甚至需要跳四五下才能打開，最近我們對閑魚前端頁面系統性的做了些優化，由於閑魚前端技術棧相對多元，不同棧技術原理各不相同，優化方案也陪隱嫌有所差異，本文主要介紹目前閑魚佔比較重的 Weex 頁面的優化過程。
閑魚 Weex 頁面多以前端渲染為主，其打開過程與 Web 頁面略微相近，大致分為以下幾個階段：
我們將「從開始載入（navigationStart）到屏幕首次 paint（繪制）像素內容」的這段時間稱為白屏時間（FP） ，將「從開始載入（navigationStart）到首屏內容全部渲染完成」的這段時間稱為 首屏時間（FSP） ，受限於統計口徑，目前 Weex 下的首屏時間是不包含圖片下載及後續過程的。
我們拿閑魚的直播頻道頁和玩家頻道頁作為參考，通過錄屏的方式看下優化前後的對比：
通過錄屏分幀的方式我們統計了下這兩個頻道頁在不同系統不同機型下的首攜族屏時長：
可以看到，優化前 iOS、Android 主流機型上的首屏時間都要超過 2s，低端機甚至要 3-5s，優化後各機型的首屏時間均大幅下降，低端機首屏時長控制到了 2s 內，中高端機近乎直開。
確定優化方案前我們對現有的 Weex 頁面做了拆解分析，從結果來看，以下幾個因素對首屏時間的影響較大：
基於上面的分析調研，我們初步把優化方案定為蘆手四層：
按照預期優化效果，Weex 頁面的打開過程是這樣的：
體現在上述的四層結構中，主要包含以下幾個優化點：
具體實現是將 Weex Bundle 以資源包為單位、以 URL 前綴為索引，通過一定的更新策略離線到客戶端本地，之前的更新策略主要有訪問後安裝、啟動安裝 兩種，對應的更新時機如下：
這套機制在容器層有統一的方案支撐，但是包命中率一直不高（25% - 55%），導致最終效果差強人意，分析後發現默認的更新策略（訪問後安裝）與頁面回訪率強相關，閑魚的前端頁面大都是頻道導購型的頁面，回訪率天然不高，所以包命中率相對應也不會高。
本次優化主要是對更新策略進行了擴展，增加了 「 閑時安裝 」 的更新策略：會在定時更新期間主動安裝，如果安裝後未使用，則會在一周之後淘汰；如果一周內使用過，則進入常規的更新淘汰機制（一個月未使用淘汰）。
在 「閑時安裝」 的更新策略上線後，包命中率大幅提升（穩定後 90% 左右），頁面性能也得到了顯著提升：
不依賴首屏介面渲染的頁面甚至可以達到「直開」：
傳統的首屏數據請求都是在 Bundle 解析完以後發起的，首屏數據返回後渲染頁面，是個典型的串列過程。
本次優化中我們把這個串列的過程並行化了：
時序圖如下：
特殊情況下的時序圖：
具體的技術細節本文不再贅述，數據預取的優化策略上線後，首屏時間也得到了一定程度的提升，如下（iOS 側由於各優化策略並行上線，沒能做到單一變數採集性能數據，暫以 Android 側為參考）：
Bundle 離線、數據預取的優化策略上線後，部分頁面在中高端機型上逼近「直開」：
漸進式首屏
漸進式首屏解決的是「最後一公里」的問題，因為在上了「離線包」和「數據預取」的方案後，我們發現： 頁面首屏時間一定程度上還是受限於首屏介面請求耗時 ，該方案就是為了降低用戶側的白屏等待時長，具體從以下三個方面著手：
以介面請求配置生成的索引對介面數據進行緩存
低端機降級方案
為了用戶體驗能夠更好，在此我們嘗試了低端機降級優化方案。以直播頻道為例：
圖片渲染效果優化
漸進式首屏帶來的一個問題是界面更新時的閃動（特別是圖片佔大篇幅的時候），為了優化此問題，我們將圖片從載入到出現的過程改為了漸顯過渡，一定程度上消除了圖片閃動的生硬感。
渲染頁面作為首屏鏈路中的一環，不同技術棧、不同設備環境下，在頁面首屏時間中也會有不同的佔比。類Weex、RN 通過前端腳本映射原生組件的技術方案，渲染路徑總結起來是：渲染前端 Virtual DOM -> 映射為 Native 指令 -> 將指令傳輸到 Native 側 -> Native 執行指令完成渲染。在前三個步驟上，較重的業務邏輯或不合理的代碼通常會帶來較長的 計算 、 通信 耗時，中低端機器上尤為明顯。通過按需渲染可以有效解決這一問題。
按需渲染主要思路是通過只渲染首屏可見視圖來最小化首屏渲染耗時。本次優化中，主要針對以下幾個場景做了按需渲染：
優化上線後，魚塘廣場頁中低端機型的首屏性能有了部分數據上的提升：
低端機上優化前端渲染階段對比：
Bundle 體積一方面直接影響 Bundle 下載時間，另一方面也會影響 Android 端的渲染性能（耗時隨 Bundle 體積增加 1-2ms/KB），我們在 Bundle 體積上的優化方案較為常規，包括：
閑魚前端的性能優化暫時告一段落，優化過程中沉澱了較多的通用能力，像 Bundle 離線、數據預取、漸進式首屏等等，這些能力在後續會有更大的發揮空間，一些能力也會變得更加智能，譬如目前的數據預取是在 navigationStart 的時候發起的，這個時機已經比傳統的頁面載入時的時機提前了許多，但其實還可以更加提前，譬如可以在閑魚客戶端中常駐個 TaskSchele，專門用來處理數據預取的 Task，同時可以結合用戶的訪問習慣做智能數據預取。
在前端性能要求越來越高的背景下，傳統的 Web 載入流程已無法再滿足性能優化的需要，所以出現了各種新興容器 + 配套能力，所以下一代容器的標准形態應該是什麼樣的？
Ⅳ 前端匯流排頻率5.0GT/s換算成多少MHz
1.
數據傳輸最大帶寬取決於所有同時傳輸的數據的寬度和傳輸頻率，即數據帶寬＝（匯流排頻率×數據位寬）÷8。目前PC機上所能達到的
前端匯流排頻率
有266MHz、333MHz、400MHz、533MHz、800MHz、1333MHz幾種，前端匯流排頻率越大凱核，代表著CPU與
北橋晶元
之間的數據傳輸能力越大，更能充分發揮出CPU的功能。
2.
1GT/S就是每秒傳輸十的
九次方
次數據，如果一次傳輸
8bit
的數據，
數據傳輸速率
是6.4GT/s，那麼帶寬就是51.2Gb/s
。1333MHz
FSB，其禪兄數據傳輸速盯襲掘率則是
1333MT/s，或者說1.333GT/s
Ⅳ 如何提高前端工作效率
1. 保證界面及用戶體驗的前提下，寫代碼的速度是第一要務
不要拘泥於什麼技術可用，什麼技術不可用。讓它在最短的時間內跑起來，在用戶體驗的過程中完成迭代升級。利用高速的開發流程，為項目創造競爭優勢。有些可以用CSS實現的東西，沒必要掛JS。然後還跑過來問「我不想用CSS，這段JS為啥不能隱藏滾動條?」這種開發者，不僅是自虐，還是在虐待訪客的電腦。
針對某些要求1小時上線的變態項目，大可以用PS直接生成html，什麼是標准?什麼是規則?這些都是輔助我們製作網站的建議，當我們有實際需求的時候，大可以打破這種標准。標準是人制定的，前端開發者的追求目標，應該是去做制定標準的人，而不要被標准所束縛。當我們有實際需求的時候，當伺服器被拖慢速度的時候，不用誰來指揮，自然會去想如何降低帶寬壓力。讓你的團隊自發思考，勝過於你拿各種標准來壓迫執行。
負面影響：招聘的難度會大大增加，除非每個員工都有股份、或者是你親自教出來的。不然，拿同樣多的薪水，很少有人會自發思考公司的業務。另外，迭代的開發成本也會很高，純靜態展示頁還好，載入程序的頁面進行結構調整，會增大員工的工作壓力。注意僅在合適的項目上玩速度。
2. 開發人員和業務人員盡可能天天都在一起工作
在團隊內部，最具有效果並富有效率的溝通方式，就是面對面交談。
QQ或者MSN，沒有任何的語氣語調，無法更直接的表述業務的著重點在哪裡。容易產生誤會。
開發過程中，要避免晦澀的文檔及專業術語。每次溝通帶上紙筆，說不明白就畫，畫不明白就抓一個業務坐你身邊，讓他看著做。領導層要給他們提供所需的環境和支持，有可能的話，抓一個領導坐在身邊。減少交接的流程，簡化開發文檔。一個好的文檔，是讓開發人員明白每一步的要求是什麼。而不在於文檔字數的多少。沒有文檔更好，只要你能給團隊講清楚。
3. 即時響應，高效開發
在某些領域，為什麼一些很小的網站可以戰勝大的公司?
他們不遵循守則，他們無需層層審批，他們發現什麼好的技術可以直接應用到自己的網站上。說服經理，即使很順利，也需要一個說服的過程。況且有很多計劃會夭折在領導層的審批上。用人不疑，如果你有一個不大的項目，如果你有一個可以信任的人，放手讓他去做。這個有執行力的人，一定要選好。做正確的事情比做錯誤的事情要困難很多。
Ⅵ 前端如何提升開發效率
來具體聊一聊提高前端工程師開發效率的那些方法！
當然除了以上5點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。希望以上幾點能夠給初識前端的同學帶來啟發並能夠親自實踐。
Ⅶ 如何提升前端開發速度和效率
時間管理
不同的時間段做不同的事。頭腦清醒的時候，做一些難的事情；狀態欠佳的時候，做一些簡單的事，或乾脆出去走走，休息休息。
做事時要專注。在我們專注做事時，要減少外界的干擾，比如帶上耳機，將手機開靜音。如果此時有人來打擾，稍後來處理他的事情；如果事情比較緊急，則記錄下當前的狀態，方便切換回來的時候，能迅速進入狀態。我們可以嘗試使用番茄工作法：在一段時間內（一般是25分鍾），只做一件事情，結束後，休息一會，繼續做事，以此循環。
實現不靠譜的需求。拒絕不靠譜的需求。
理解需求出現偏差。對於不理解的需求，要及時和 PM 溝通，不要自己揣測。
做與整個項目風格不一致的頁面。如果設計師的設計的和當前項目的風格不一致，與其溝通，看是否能用項目中統一的風格（樣式）。
想清楚實現思路後，再開始編碼。有時候一個好的演算法比一個差的，會簡單很多。
重復造輪子。
一拿到項目就開始編碼。應該熟悉當前項目所用的技術。避免重復實現項目已經實現過的功能。
重復的事情讓程序來做。
項目腳手架生成器。基於此快速搭建一個項目。主流的框架都有 xx-cli 項目。也可以用 Yo 自己搭建一個。
自動添加瀏覽器前綴。可以用 AutoPrefix。
自動生成圖片精靈。可以用 Compass。
一鍵切圖。可以用 Cutterman。
代碼改變時，瀏覽器自動刷新。
代碼發布前做的一些事情。代碼壓縮，合並等。
選用合適的框架和第三方庫。
用好軟體。
安裝一些代碼補全插件。如 Emmet， Bootstrap Snippents 等
設置一些命令的簡寫。如，git 可以配置一些簡寫。
快速定位到項目中的某文件；某方法。
全局搜索，替換。
等等。
熟悉常用快捷鍵。
敲更少的代碼。
能快速啟動常用軟體。
減少查找的時間。
保持工作環境的整潔。丟掉不用的東西，刪除不用的文件。
常用鏈接的導航。
常用第三方組件整理。我積累了一些，見這里。
自己寫的代碼參考示例。
文檔聚合網站。devdocs。
其他
兩個顯示屏。
保持身體健康。
做事時，保持一個積極的心態。
不做不必要做的事
優化做事的方式
Ⅷ 如何正確衡量前端開發工程師的工作效率
1、一般的公司前後端完全分工明確，前端只需修改js、css、html，在本地靜態頁面上調試，然後提交代碼即可。
2、在前後端分工不明確的情況下，前端雖然仍然只需關注css、js、html的修改，但是卻必須在項目可運行的伺服器環境中調試，相對麻煩且效率低下，特別是一些需要部署編譯執行的項目，如不在項目中開發，則會出現兩份甚至多份代碼的問題，會導致多份代碼同步難的問題產生。
Ⅸ 前端匯流排速率MT/s和前端匯流排頻率MHZ的換算
2000MT/S就是－每秒鍾傳輸2000兆次數據；
但是這個HT1.0的頻率好像沒有這么快吧。
HT匯流排技術在AMD的K8時代顫和備引入的當時是HT1.0頻率是800MHZ；
HT匯流排只是一個通道負責CPU到主板的數據傳輸，
帶寬的演算法是棚行：
16bit/8*2*2*800MHz(匯流排頻率）=帶寬
從K8時代AMD已經把內存控制器集成到CPU當中去了，CPU可以直接訪問內存；茄毀
在個人電腦中HT匯流排的傳輸帶寬一般不會成為系統性能的瓶頸沒必要太糾結。
:)
Ⅹ 前端如何計算網頁的打開時間
1. Web performance APIs ，可以得到各種時間比如dns解析時間、連接時間、跳轉時間、載入時間等指標，具體請自行查資料，不贅述。
2. 瀏覽器的私有API，比如 chrome.loadTimes()。
3. DOM ready/load 事件。
4. 白屏時間（first paint time）。
5. 首屏時間（Above-the-fold time）。
4和5尚無公認的確定方法和對應api。特別是5，怎麼定義首屏沒有統一的標准。因此需要自行確定，並用一些相對hack的方式獲取。前一段時間網路和騰訊都有人分享過他們的做法，可以參考，具體鏈接等回頭找到了再補。
如果只是要大致了解網站的性能，最簡單的辦法是使用Google Analytics，它包含了性能統計。如果要非常細致的數據（比如web performance api上的數據），可以自己寫，也可用我寫的這個庫：http://github.com/hax/WebPerf （有基本的兼容處理，但優化不夠，所以我們自己只取樣5%~10%的用戶載入這個腳本。下個月我還會抽時間改進）。