前端最佳化還可以這麼最佳化！，最佳化還最佳化!

前端最佳化還可以這麼最佳化！，最佳化還最佳化!

    做了將近兩年的前端工作，我也來總結總結一下在工作中學到的經驗 。

    首先了，跟著我的思維一起走，使用者開啟網頁的這個動作，可以理解為 涉及到如下 兩個大項    瀏覽器 和服務端 。

    我先談談伺服器端 ，

    可以看出 訪問頁面動作(用戶端) 在服務端拿HTTP 。既然是拿東西那就好說了，(求更合適的比喻)

　　　　一:速度要快,前端能做的就是使用CDN服務了。

           二:夠輕，前端能做的事情有很多，比如壓縮圖片 壓縮css js檔案 html+css高效使用 (避免 table tr td  和  .div ul  li  span div{} 等等類似的代碼出現)  ，json資料互動(比xml txt 輕n多倍啊)。

           三:次數少， 比如合成圖片 css  js檔案整合 ， 緩衝 (cookie,緩衝重要的東西即可 ,因為緩衝是以檔案的方式存在用戶端的，若是太大會影響瀏覽器讀取檔案的效率)

     下面了我們就來看看瀏覽器和用戶端之間的關係了，同樣先看圖

           

          一: 瀏覽器解析頁面的順序是從上到下的，而js是瀏覽器中的霸主(因為瀏覽器在執行javascript時 是不能同時做其他動作的javascript執行完後瀏覽器才能繼續渲染頁面。)，

               所以css放在 頭部,js放在底部。

          二:Repaint(重繪) Reflow(重排)  重繪就是一個元素的外觀被改變，但是沒有改變布局(寬高)的情況  如改變 outline 顏色 背景色等等。 重排就是DOM的變化影響到了元素

              的寬高，瀏覽器會重新計算元素的寬高，會影響頁面的排版，這也是reflow低效的原因，如改變視窗大小 改變文字大小  內容改變等等。解決方案是儘可能避免reflow，難以

               避免的話盡量將元素定位成fixed和absolute。

          三: css的效率 id>class>tag>偉類 。這個不做多的解釋。

          四:DOM的操作。js和DOM可以看成兩個島，js每操作一次DOM元素便要經過一次橋，操作的次數越多那麼過橋的次數越多 效率就低了 所以盡量減少次數。而且修改DOM元素

               會造成重繪和重排，迴圈操作DOM元素那就是更大的罪惡了。

          五:另外就是cookie了。大家都懂的。

     一總結髮現最佳化就是這麼回事兒，不過我總覺得我的比喻不是很恰當，大家要是有好的比喻的話 一定要告訴我，方便大家一起學習和理解。我的QQ是523463345