您現在的位置: 网站首頁 / 網站建設 / 正文

javascript如何做seo優化_前台javascript速度優化總結

作者: admin 发布: 2014-11-10 17:53:5 分类: 網站建設 閱讀: 次 查看評論

  兩個基本點

  1. 择重避轻,有所取舍。

  l 核心优先

  通常來講,系統是都是龐大的,不要太完美主義,先抓住重點,理解那些是我們的核心頁面,那些頁面對我們來說是最重要的,那些頁面訪問量最高,核心優先。

  l 主要问题在那,抓住瓶颈点。

  治病要醫本。優化前,需要進行細致的分析,抓住主要瓶頸點,對症下藥。優化那麽多的方子,別全采用,通常幾個就能達到效果

  2. 简单有效才是硬道理

  越是簡單的東西越容易控制,越不容易出錯,盡量避免將系統設計的過于龐大,過于複雜,記住,這是在做産品,而不是在搞研發。很多看似很蠢的方法,往往越是有效。

  新技術,新方法的引用是具備一定的風險的,要評估,要慎重。

  Js處理

  1. 尽量放到页面尾部

  Js的加載時阻塞頁面的,沒下載完畢後面的內容不會出來,所以盡量避免把JS放到頁面頭部,按照經驗估計,整個頁面中所用的JS邏輯,90%都是可以放到頁面尾部。

  2. 延迟加载(按需加载)

  很多的業務邏輯並非每次都使用也不是要立即使用,首次加載過程中僅僅加載那些必須的,只有當必要的條件觸發,才去加載請求必要的JS.比如說權限驗證通過,加載管理模塊。點擊發表文章按鈕,加載與發表文章有關的驗證和處理函數。

  如果寫過C++的肯定會接觸過動態庫和靜態庫,這個與之類似,什麽時候需要什麽時候再加載,首次打開頁面肯定會清淨了許多,而且業務邏輯也由此分離開來,管理和維護也會方便很多,畢竟減少了那麽多的耦合。

  按照BBS項目經驗估計,普通頁面的所有業務邏輯中需要在首次請求中加載的不到50%,我們的JS又由此砍掉了一半。

  3. 合并JS,减少请求

  请求多个小文件的效率远小于请求一个大文件的效率,因为需要多次DNS解析,多次连接,浏览器和server端也需要进行多次开启进程、权限验证和预处理,以及 http请求在数据包传递上的一些问题。

  所以尽量避免在页面中加载一堆的js 文件,需要先讲需要的小的JS合并成一个大的JS文件统一输出,页面因此被卡住的时间肯定会减少很多。

  爲了提高開發效率,合並建議不要每次都手動來進行,導致之後維護成本很大,相信些個XML配置文件,確定合並規則以及依賴關系後,用程序自動合並效率會高很多,後面有我附上的一個配置示例,僅作參考形式不重要

  4. JS压缩

  此手段屬前端特有,畢竟流量意味著速度,意味著金錢。是在降低代碼的可讀性爲前提。但事物的兩面性告訴我們,可讀性差也意味著安全,而且可讀性可以通過保存壓縮前的源文件來解決。

  所謂的壓縮,就是把場的變量名換成短的變量名,去掉沒用的空格和換行符,從而節省我們JS程序的長度,不過目前這種處理已經很成熟,通過搜索可以搜出很多相關的工具。不再細說

  經驗值,能壓縮50%以上,視程序與壓縮工具而論。

  5. 尽量少用第三方库

  在我的印象中,很多框架都是很龐大20K以上,雖然很強大很方便,但如果不是做企業級應用,不要用,因爲我們也許只可能用到其中很少的一部分功能卻加載了整個框架。

  不過框架中的很多方法是可以提取出來滴,或者精簡成一個輕量級的框架,比如說trimPath,完全可以精簡到4k.

  6. 合并ajax请求

  Ajax請求的數據,如果涉及請求多種數據,盡量考慮到將其合並。

  7. 合理的使用缓存

  緩存視乎是server端的事,但是js中也是經常用的。

  一種是緩存在一個全局變量中,一些很複雜的計算和查找操作可以這樣做。如果大家在使用模板類trimPath經常是需要對模板進行預處理,這種預處理的結果是可以被緩存的。這種緩存的缺點是頁面刷新後數據就會失效。

  另外一種是緩存在window.name或cookie裏面,經常用來緩存一些AJAX調用的結果,避免反複請求server端,比如一些用戶的權限驗證信息,就沒必要總是調用server端接口,緩存了也就減少了請求,提高了性能,但cookie大家要慎用,存于一些數據比較小的還行,每次http請求他是占用上行帶寬的。

  還有一種緩存的實現是借助于flash或其他的第三方組件,特點是可以緩存超大的數據,但是適應場景優先,需要特殊的平台支持,不過FLASH目前已經很通用了。

  8. 能静态化输出,尽量少用JS渲染输出

  頁面制作

  1. 素材合并

  尽量把页面中的图片合并在一起,利用css sprite切割。这样减少了请求的次数。通常合并成3长大的图片,一张是有固定宽高的(比如说按钮),另外两张是分别横向或纵向平铺的1像素的小图,用来做背景用。

  2. CSS压缩处理

  道理同JS壓縮,也是有很多工具實用的可用。

  3. 图片背景切割与平铺

  切圖是很有講究的,很多區域能切成用1像素平鋪,盡量用1像素小圖平鋪,盡量用一個較大的圖片設置成背靜。

  4. 少用iframe和frameset

  首先一點frame會阻塞頁面,第二,産生額外的請求,第三,如果涉及交互,增加開發維護成本,第四對搜索引擎優化不好

  5. CSS尽量放到页面头部

  浏覽器只有等CSS下載完畢後,才會真正的顯示頁面,所以爲了讓頁面盡快有所輸出,把CSS放到頭部,而且浏覽器對CSS的處理時並行的,不會像JS那樣會阻塞頁面。

  Server處理

  1. 启用gzip压缩,约能压缩70%~80%

  2. js,css,图片添加过期头,让浏览器能缓存。能减少1/3以上的请求。

  3. 静态页面、js、css等静态文件单独迁移

  第一, 可以针对静态文件做专门优化,比如说squid反向代理,nginx代替apache做静态server。

  第二, 便于管理和维护,以后迁移和拓展方便。

  4. js、css、图片等静态文件与当前应用放到不同的域名下。

  不再傳遞那些無必要的cookie,減少傳輸。

  5. 图片服务器分多域名。

  浏覽器對同一域名的只允許使用2個並發,如果頁面圖片過多,會由于並發排隊從而阻塞頁面。但域名也不能太多,會消耗DNS解析的時間,建議4個爲佳。

  附加

  1. JS合并配置文件示例

  <?xml version="1.0" encoding="gb2312" ?>

  <root>

  <include>

  <list><![CDATA[qStandBottom_static]]></list>

  </include>

  <js>

  <list><![CDATA[/lib/postJs.obj.js]]></list>

  <list><![CDATA[/lib/JSON.obj.js]]></list>

  <list><![CDATA[/qmeditor/qmeditor/qmeditor/editor.js]]></list>

  <list><![CDATA[/control/subjectList/subjectWriteLib.js]]></list>

  <list><![CDATA[/control/subjectList/subjectWriteVote.obj.js]]></list>

  <list><![CDATA[/control/subjectList/naviFilter.obj.js]]></list>

  <list><![CDATA[/control/subject/checkDomain.js]]></list>

  <list><![CDATA[/control/subjectList/subjectWriteBottomGlobal.js]]></list>

  <list><![CDATA[/control/subjectList/subjectWriteBottom_asyncDeclare.js]]></list>

  <list><![CDATA[/control/subjectList/subjectWriterEditor.js]]></list>

  <list><![CDATA[/control/subjectList/subjectWriteBottom.obj.js]]></list>

  <list><![CDATA[/control/subjectList/subjectWritePhoto.js]]></list>

  </js>

  </root>

  2. 常见分析与调试工具

  IE Httpwatch

  Firefox firebug

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: seo  Javascript  代碼優化  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表