1.專案背景
圖1
圖2
2.問題
當內容很少的時候，沒出現什麼問題，當內容變多（大概乙個頁面長到差不多100屏左右的時候），iphone端會出現閃退bug，andorid端則正常顯示，桌面端也沒出現什麼效能問題。
3.原因
仔細的檢查了**，排查問題出現的原因：
1.http請求過多
2.手工模板效率問題
3.做移動適配時候，js操作dom使得瀏覽器發生過多的重繪和重排（當前元素重排引發後面一系列相關元素的重排），引發閃退
4.分析
做了許多實驗來測試蘋果手機閃退的原因，發現剛才提到的原因3是主要的原因。原因1和原因2都是專案中可以優化的地方。
原因3，
3.1 實驗排查發現，產生閃退的原因在操作外層dom 寬度時候引起的
$(".main").css("width", 700 * zoom + "px");.....
4.解決方案
就是要解決原因3.1，暫時想到了乙個方法，繞過縮放.main：
因為.page元素在頁面上看已經縮放到了適當的大小，我給wrap設定了乙個overflow:hidden， .main寬度不用縮，剛剛好。
要徹底**其原因，就得去了解下各種瀏覽器處理css重繪和重排的機理了。
重繪和重排
重繪是乙個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility outline 背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計算 儘量減少重排次數和縮小重排的影響範圍 1.dom...
重排和重繪
當dom的變化影響了元素的幾何屬性 寬或高 瀏覽器需要重新計算元素的幾何屬性，同時其他元素的幾何屬性和位置也會受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹，這個過程稱為重排。完成重排後，瀏覽器會重新繪製受到影響的部分到螢幕，這個過程稱為重繪。由於瀏覽器的流布局，對渲染樹的計算通常...
重繪和重排
構建dom樹 渲染引擎解析html文件，將所有標籤轉換為dom樹中的dom節點生成內容樹 構建渲染樹 解析對應的css樣式檔案資訊，樣式樹與dom樹結合構建成渲染樹 布局渲染樹 從根節點遞迴呼叫，計算每乙個元素的大小 位置等，給出每個節點所應該在螢幕上出現的精確座標 繪製渲染樹 遍歷渲染樹，使用ui...