[網頁設計]前端優化還能夠這麼優化！

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

    首先了，跟着個人思惟一塊兒走，用戶打開網頁的這個動做，能夠理解爲 涉及到以下 兩個大項    瀏覽器 和服務端 。

    我先談談服務器端 ，如圖

    上圖能夠看出 訪問頁面動做(客戶端) 在服務端拿HTTP 。既然是拿東西那就好說了，(求更合適的比喻)

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

           二:夠輕，前端能作的事情有不少，好比壓縮圖片 壓縮css js文件 html+css高效使用 (避免 table tr td  和  .div ul  li  span div{} 等等相似的代碼出現)  ，json數據交互(比

           三:次數少， 好比合成圖片 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