[小技巧] JavaScript Cross Browser Best Practices

标签: Browser Chrome Firefox IE JavaScrpt | 发表时间:2013-04-12 02:50 | 作者:appleboy
分享到:
出处:http://blog.wu-boy.com

先前寫了一篇 modern.IE 的使用方式及介紹,今天在 Facebook 上看到 Eric Shangkuan 說已經有了 中文介面,如果你的瀏覽器是中文版,應該就可以直接看到中文介面了,裡面有篇文章非常重要,寫 Web 的工程師都必須注意,那就是 Cross Browser Best Practices,這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧,這些技巧也不只用在 IE 上,更是教您在實做 CSS,JavaScript 的注意事項。我們來看看 Javascript 的小技巧。

不要再使用 navigator.userAgent

為了知道使用者 Browser 資訊,之前有寫篇 jQuery 偵測瀏覽器版本, 作業系統(OS detection),內容使用 navigator.userAgent 來取得使用者瀏覽器及裝置資訊,開發者為了 IE 各版本的相容,所以透過此方式來知道 IE 各版本,進而在 JS 做處理,但是有時候並不是這麼準確,因為目前市面上裝置實在是太多種了,手機,平板,電視一堆等等,為了支援各種裝置,請不要再用 navigator.userAgent 來判斷了,現在取而代之的就是用 Modernizr,用來偵測您的 Browser 有無任何您所想要的功能,像是 Html5 的 Canvas,利用 Modernizr 來判斷是否支援,這時候各種裝置就不會因為 JS 沒有判斷到而產生錯誤 ,尤其是在電視介面或 Android 平板,踩到很多雷阿。詳細資訊可以參考此 連結

簡單來說 Canvas 在 IE9 才有支援,所以針對 IE 部份,我們使用 navigator.userAgent 來判斷

<script type="text/javascript">
    functiongetInternetExplorerVersion()
    // Returns the version of Internet Explorer or a -1 for other browsers.
    {
        var rv = -1;
        if(navigator.appName == 'Microsoft Internet Explorer')
        {
            var ua = navigator.userAgent;
            varre    = newRegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if(re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
        }
        return rv;
    }
    functiononLoad()
    {
        var version = GetInternetExplorerVersion()
        if (version < 9 && version > -1)
        {
            // Code to run in Internet Explorer 9 or earlier.
        }
    }
</script>

但是如果遇到 Safari, Chrome, Android, IPad, IPhone 版本呢,也很好解決,就是一直些判斷式,那為什麼不換個角度去想,直接判斷有無 Cnavas 功能即可,透過 Modernizr 套件可以簡單做到。另外 jQuery 在 1.9 版也直接捨棄了 jQuery.browser API 功能,取而代之的也是推薦 Modernizr

if (Modernizr.canvas) {
  console.info('Your browser support canvas');
}

在 document ready 內不要執行大量 script

現在大部分的網站缺少不了的就是 jQuery,jQuery 提供了 $(document).ready() 在 html load 完成後可以快速執行 JavaScript,在大多的狀況下都可以正確執行的,但是如果在 $(document).ready() 寫入大量及複雜的 Script,只會讓瀏覽器呆滯而不能使用,所以盡可能減少執行的程式碼,等到使用者真正要執行功能的時候在進行呼叫即可。通常像是 tooltip 或 dialog 可以延遲等到要出現的時候在初始化即可。

網頁開始先優先執行 AJAX

由於執行 AJAX 需要一段時間,所以請在 html load 之前就開始執行,並不需要等到 $(document).ready() 後才執行,另外在 AJAX 完成執行後的 Complete function 加入 $(document).ready() 函式確保 html 已載入完成。

延遲載入 social button(Facebook Like, Google +1, Twitter)

現在大多網站都有一大堆分享機制(social networks),像是 Facebook Like、Twitter 等等,但是這些 JS 的載入,都大大影響到網頁的載入時間,其實最主要的解決方式就是務必思考哪些頁面才需要這些 button,能減少載入外部 JS 就是提昇網頁載入速度,在以前載入外部 JS 的作法就是底下

<script>
(function(d, s) {
  var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.src = url; js.id = id;
    fjs.parentNode.insertBefore(js, fjs);
  };
  load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1', 'fbjssdk');
  load('https://apis.google.com/js/plusone.js', 'gplus1js');
  load('//platform.twitter.com/widgets.js', 'tweetjs');
}(document, 'script'));
</script>

現在請改寫成底下

由於各瀏覽器相容問題,所以判斷是否支援 addEventListener 或 attachEvent,在 onload 後才開始執行。更多詳細內容可以參考 requesting these scripts

相关 [javascript cross browser] 推荐:

[小技巧] JavaScript Cross Browser Best Practices

- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
我們來看看 Javascript 的小技巧. 不要再使用 navigator.userAgent. 簡單來說 Canvas 在 IE9 才有支援,所以針對 IE 部份,我們使用 navigator.userAgent 來判斷. 但是如果遇到 Safari, Chrome, Android, IPad, IPhone 版本呢,也很好解決,就是一直些判斷式,那為什麼不換個角度去想,直接判斷有無 Cnavas 功能即可,透過 Modernizr 套件可以簡單做到.

HTML5 Boilerplate 不再支援 legacy browser

- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
HTML5 Boilerplate 在 V5.0 版本將不支援舊有瀏覽器,包含 IE6/7. Firefox 3.6 (Mozilla 已經不再維護) 及 Safari 4,詳細資料可以參考 V5.0 的 Milestone ( Drop legacy browser support) 下一版本會有哪些改變呢.

红十字少女 THE RED CROSS 第一~三话

- llpazxj - FeedzShare
来自: LastAngel&apos;s AT Field - FeedzShare  . 发布时间:2011年06月26日,  已有 3 人推荐.

红十字少女 THE RED CROSS 第四~六话

- Duke13 - LastAngel&amp;apos;s AT Field

【新鲜上架】中文应用:海豚浏览器(Dolphin Browser)

- 阳阳猪 - 爱Apps - www.iapps.im
精选限时免费应用,由 AppPusher 为您送达. 无限精彩,尽在 爱Apps - www.iapps.im. 本站原创内容,转载时请务必注明出处,谢谢. 中国区 美国区 价格: 免费. 大小: 3.6 MB 系统: 4.0+. 前阵子在 Android 平台上较为红火的一款国人应用:海豚浏览器,今晚终于登陆了iOS平台.

Browser和Server持续同步的几种方式(jQuery+tornado演示)

- mrluanma - 残阳似血的博客
在B/S模型的Web应用中,客户端常常需要保持和服务器的持续更新. 这种对及时性要求比较高的应用比如:股票价格的查询,实时的商品价格,自动更新的twitter timeline以及基于浏览器的聊天系统(如GTalk)等等. 由于近些年AJAX技术的兴起,也出现了多种实现方式. 本文将对这几种方式进行说明,并用jQuery+tornado进行演示,需要说明的是,如果对tornado不了解也没有任何问题,由于tornado的代码非常清晰且易懂,选择tornado是因为其是一个非阻塞的(Non-blocking IO)异步框架(本文使用2.0版本).

Smart Browser Chooser 依網路速度自動切換Android瀏覽器

- Eastar Lee - 電腦玩物
Android上有很多不錯的瀏覽器選擇. 例如「Opera Mini」功能與體積都很輕省,會幫你自動壓縮網頁內容來達到在低速頻寬下還能保持高速瀏覽的需求;而像是「Opera Mobile」、「Dolphin Browser HD」則是功能豐富,支援更多網頁技術,可以在高速頻寬下呈現出又棒又順暢的瀏覽體驗.

【转载】从Mozilla的HTML5游戏Browser Quest看代码漏洞

- - HTML5研究小组
声明:作弊并不是什么好事,我不提倡作弊. 我也不想讽刺Mozilla的代码质量(实际上其代码糟透了). 我不是超级黑客,也不想在此唱高调. 只是想演示一下我在Mozilla新游戏上是如何作弊的,以后大家在编写HTML5游戏时要注意避免这些问题. 为了将Bard’s Tale游戏通过磁盘编辑器进行编辑并存入我的Apple 2e,我不得不学习16进制.

WEB已死? HTTP将死?还是Browser会死?—— 一篇迟来的脚注

- cgeek - It Talks--上海魏武挥的博客
网易科技《数字与人》专栏供稿,得到网易科技的许可,在此同步发出. 《连线》的这篇东西,不无商业目的. 文章很明显带有站在苹果(以及facebook)这一边向google叫板的味道,毕竟google是web的最大玩家(昨儿还传言说要推出google的平板电脑以及web应用商店). 巨头们的竞争,不是市场这个层面上的,更不是什么应用层面上的,而是标准、规则、接入方式等.

Browser 與 Server 持續同步的作法介紹 (Polling, Comet, Long Polling, WebSocket)

- Cary - 這樣做就對了!
記得兩年多前,第一次看到 Gmail 中的 GTalk 覺得很好奇:「咦. 線上聊天且是 Google 的熱門系統,只用傳統的 AJAX 應該會操爆伺服器吧. 」很幸運的,當時前公司內部的 Tech Talk 就有位同事分享這個叫 Comet 的技術、是種「為了讓瀏覽器與伺服器頻繁溝通所使用的技術、主要的瓶頸在於 WWW 伺服器上.