網站優化讓客戶快速找到您!進而產生交易機會

最新消息

 
JS優化方式
 
如果你問我網站中最影響網站打開速度的是什麼?我會告訴是網站中的javascript,簡稱JS。其實JS是一種客戶端腳本語言,現在的網站其實都有加統計代碼、分享工具、評論列表、相關文章外掛程式等工具,而要實現強大的功能,必須使用JS檔,正是這些JS外掛程式,再增強了網站功能的同時,也給影響了網站速度。
今天,我們就來介紹幾個比較常用的JS優化方式。
首先,把不重要的JS放在頁面最底部,其實這是最簡單,也是效果最好的優化方法,把不重要的JS通通放到頁面的最下面body的上面,實現異步加載,也就是等網頁都加載完了,最後在加載這些不重要的JS,這樣就不影響網頁速度了。
如低調與華麗範本中公共的util.js公共檔,默認效果為,瀏覽網頁時會在網頁中出現「回頂部、寫評論」特效。
現在把wumii(外掛程式JS)和jiathis(分享工具JS)統一整合到util.js文件中了。其次就是合併JS檔,合併JS,也就是減少HTTP請求,少給服務器請求一次就加快一點速度,而合併兩個原本獨立的JS就需要點技術了,
這裡我們給大家一個最簡單的方法:
就是不管三七二十一,先把A檔直接貼到B檔中,合併後刪除網頁中的A檔,如果網頁運行正常,就OK;如果一些特效失效,那就還原,換C文件合併。總會有兩個不衝突的JS文件的。
比如百度管家,有10個廣告位,默認情況是要進行10次HTTP請求的,因為是協力廠商JS,一次請求最快要花234ms,
而10次請求就就需要花3秒,也就是說因為這個廣告管家打開網頁就要額外增加3秒。第二段JS就是把10個請求變成了1個
按照官方教程把JS合併後,10個廣告位的廣告請求合併為1次請求,大幅降低js請求次數,這樣就可以有效減少頁面渲染被阻塞的情況,提升廣告加載速度。
最後,還有一個很常用的方法就是給JS檔減肥(其實用gulp打包工具就行了,或者用在線的打包工具)我們不討論什麼三目運算符、減少對象查找、如何讓JS簡潔,咱就用「JS減肥工具」。通常這類工具會把JS檔中幾百行的代碼壓縮成一行,使體積變小。推薦工具:http://javascriptcompressor.com/
因為空行等問題,有時候使用這類工具會使JS功能失效,而最簡單的辦法是用Dreamweaver,把壓縮後的JS放入DW中,DW會自動提示你那裡有誤,把錯誤的地方另起一行,或還原回去即可。
另外,我們還需要瞭解幾個關於JS優化的原則性問題。
1.確保代碼盡量簡潔:不要什麼都依賴JavaScript。不要編寫重複性的腳本。要把JavaScript當作糖果工具,只是起到美化作用。別給你的網站添加大量的JavaScript代碼。只有必要的時候用一下。只有確實能改善用戶體驗的時候用一下。
2.盡量減少DOM訪問:使用JavaScript訪問DOM元素很容易,代碼更容易閱讀,但是速度很慢。介紹幾個要點:限制使用JavaScript來修飾網頁佈局,把針對訪問元素的引用緩存起來。有時,當你的網站依賴大量的DOM時,就應該考慮限制你的標記。這是改用HTML5、捨棄那些原來的XHTML和 HTML4的一個理由。你可以查看DOM元素的數量,只要在Firebug外掛程式的控制台中輸入:document.getElementsByTagName('*').length。
3.壓縮代碼:要提供經過壓縮的JavaScript頁面,最有效的辦法就是先用JavaScript壓縮工具對你的代碼壓縮一下,這種壓縮工具可以壓縮變量和參數名稱,然後提供因而獲得的代碼,使用了gzip壓縮。
4.使用適當的CDN:現在許多網頁使用內容分發網路(CDN)。它可以改進你的緩存機制,因為每個人都可以使用它。它還能為你節省一些頻寬。你很容易使用ping檢測或使用Firebug調試那些服務器,以便清楚可以從哪些方面加快網站速度。選擇CDN時,要照顧到你網站那些訪客的位置。記得盡可能使用公共儲存庫。
隨著Ajax越來越普遍,Ajax引用的規模越來越大,Javascript代碼的性能越來越顯得重要,我相信你們在看了以上的介紹,你們能夠更靈活地運用JS,並增加你們所服務的網站功能與速度,給客戶帶來良好的網路體驗。