前言
最近碰到幾個惡心問題，也發現一點優化技巧，以及對Hybrid知識的一些整理，這裡便一并拿出來做分享了，關于Hybrid的調試，會是我今後一個重點
我的部落格首先是學習筆記，友善自己做知識沉澱，以後好查閱，其次才是分享，是以其中有誤請提出，覺得亂是很有可能的~~~~~~
我們在工作中一般會有這麼一個流程：發現問題->定位問題->解決問題
其中最難就是定位問題，有時候我們會花上幾天時間定位問題，而解決問題卻隻需要幾秒......
是以定位問題的能力非常重要，這也是經驗的展現，所謂高手其實就是坑踩得多而又善于總結罷了
我這裡首先分享一個坑爹的問題，然後由此問題展開今天的學習
JSON.stringify出BUG啦！
沒錯，這個我最近碰到最為惡心的一個問題！！！
所有頁面，本來在手機上好好的，就算所有手機、奇葩機都測試通過了，最後Hybrid聯調時總會出兩個莫名其妙的BUG
PS：不知道Hybrid各位聽過麼？沒有聽過的前端需要好好補補課了，最近2年這個可能是一大趨勢，在與Hybrid的戰鬥中，Hybrid表現出了移動開發萬惡之源的應有素質，配合索尼小米三星組成了一個難以逾越的障礙牆（UC我們就不提了）
問題的現象是，一個伺服器下發的資料對象被存到了localstorage中，拿出來後其中的小數變成null了
該問題暫時發現發生于Hybrid 三星S3 Sony L39H中，應該還有不少其它低端機型有問題。
幾經定位發現現象如下：
var testObject1 = {
OrderAmount: 0.11
};
JSON.stringify(testObject1) => OrderAmount: null
① 進頁面便觸發這段代碼不會出問題~~
② click事件中執行上面代碼在60%的機率中便中招了！
最初我當然不相信原生的JSON.stringify會出問題，便反複測試，反複定位，最後頁面的代碼删到隻有幾行的時候，我不得不承認是他出了問題~~~~~~Hybrid就是讓你料想不到
一旦定位問題後，這裡的解決方案也便出來了：
在Hybrid中判斷useAgent，重寫掉JSON.stringify的邏輯即可，這裡貼一段參考代碼：
View Code
當然，我這裡其實挖掘的不夠徹底，我隻是定位到了JSON.stringify有問題，卻不能再定位裡面哪個環節有問題了......
更加優雅的做法：
複制代碼
var stringifyFunc = JSON.stringify
JSON.stringify = function () {
if (arguments.length == 1) {
return stringifyFunc.call(this, arguments[0], function (k, v) {
if (!isNaN(v)) return v + '';
else return v;
})
}
else {
stringifyFunc.apply(this, arguments);
}
localstorage讀取失效
上面說到了localstorage，這裡正好将它拿出來說下，首先有幾個必須要牢記的規則
① localstorage最大字元為500多萬（5M）
各個手機有所差異，但是不會太大，是以使用localstorage一定要記得清理，不清理可能導緻
讀取localstorage效率下降，localstorage滿了會引發業務邏輯錯誤
② localstorage讀取檔案的
是以其性能沒有記憶體讀取快，firefox更是會一次性将資料導入記憶體，想想就覺得吓人啊
③ localstorage不被爬蟲識别，是以與SEO相關的關鍵資訊需要避免使用localstorage，否則後續會被坑死
上面說了幾個localstorage需要注意的地方，事實上localstorage對性能提升還是有一些作用的
存儲不太重要的資料，比如城市資訊；存取1分鐘内有用的資料也是可以減少請求的
但是在android Hybrid中有一個神奇的後退按鈕，此按鈕一旦按下會回到上一個頁面，這個時候裡面的localstorage可能會讀取失效！！！一個簡單不靠譜的解決方案是在webapp中加入：
window.onunload = function () { };//不要問我為什麼，我也不知道！
最後在開啟隐私模式下時，safari的localstorage讀寫是不可用的，但是qq浏覽器卻可以，至于原因我就不知道了......
消除連結失效時safari alert框
該問題的使用場景首先出現在這裡：
http://www.cnblogs.com/yexiaochai/p/3439179.html
導緻alert框的出現的原因是我點選了一個無效連結，這個時候Safari便會彈框提示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<a href="taobao://wireless">測試無效URL</a>
</body>
</html>
前段時間，小钗的一個同僚找到了解決方案，大緻做法如下：
http://sandbox.runjs.cn/show/h3ec96kr
核心代碼在此：
1 $('a').click(function (e) {
2 var el = $(e.target);
3 var url = el.attr('href');
4 if (url.indexOf('taobao') != -1) {
5 var ifm = document.createElement('iframe');
6 ifm.onload = function () {
7 ifm.contentWindow.document.write('<script>location.href="' + url + '"</' + '' + 'script>');
8 }
9 ifm.src = 'about:blank';
10 document.body.appendChild(ifm);
11 } else {
12 window.location = url;
13 }
14 e.preventDefault();
其原理就是iframe中url解析錯誤的話，Safari不太理睬~~~~~~
延遲加載·性能與體驗
以延遲加載來說，最常見的便是圖檔延遲加載，但是很多朋友卻不知道為什麼要做延遲加載
浏覽器能同時請求的并發數是有限的，對于手機來說一般是4-6之間，不同型号的手機或者浏覽器會有所不同，差距不會太大
這個請求數限制存于浏覽器，是以一處請求卡死，就算新開标簽也會受到影響（手機一般不考慮tab），下面有一個場景：
一個頁面打開，裡面有N多圖檔，并且有幾個js待加載，這個時候若是圖檔先加載的話，圖檔會占用js的并發數，進而阻塞頁面的加載~~~~~~
舉個webapp的例子，我們進一個清單頁，加載了15個圖檔，使用者點選清單項booking頁子產品js開始加載（requireJS規則），這個時候業務js需要等待前面圖檔加載結束後才能加載，至少需要空閑并發數
是以，圖檔是有可能堵塞JS的，這個也是我們做圖檔延遲加載的主要原因
首屏載入速度
延遲加載是提升首頁載入速度的一大手段，對于webapp來說，操作會有所不同
webapp中一個個業務view都是一個獨立的js檔案，我們能控制第二個view在首頁是否加載
或者說，頁面中用到的元件，我們皆可以按需加載，但這裡就有一個情況需要取舍
首屏快，操作慢VS首屏慢操作快
說得多不如親身操作：
第一個便是首屏快的代碼，其它元件全部采用按需加載的手段，但是事實上這類做法會導緻後續操作十分卡！！因為每一個操作可能引發一次請求！
第二個便是首屏将UI與View業務代碼全部打包一起了，這樣首屏加載會比較慢，他的效果時後續操作的無縫性
當然，是否需要将js全部打包，這會是一場口水戰，直接有一個閥值，有一個區間，隻要做到這個區間便好
統計代碼導緻10px白屏
很多大型網站都會具有統計代碼，而此類統計代碼一般是以img做請求發出，但是他可以導緻10px白屏你知道嗎？
會出現10px左右的白屏區域，這個問題導緻的原因是：
獨立的inline元素出現時，會為他建立一個line boxes，這個就是傳說中的文字框
一行文字有一個line boxes，line boxes的高度由line-height控制而不是行内元素的width height控制
是以，img的高度與line boxes沒有關系
下面那一行白屏空間其實就是一個匿名line boxes，這個時候給body設定line-height他便會消失，或者讓img脫離文檔流即可
結語
依舊這句話，問題的定位才是難點，若能定位一個問題，其解決方案往往是分分鐘的事情......
這裡記錄這些奇怪的知識點，以便今後查閱，也希望對各位有所幫助！
本文轉自葉小钗部落格園部落格，原文連結http://www.cnblogs.com/yexiaochai/p/3858994.html，如需轉載請自行聯系原作者
![javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)