[网页设计]前端优化还能够这么优化！

    作了将近两年的前端工做，我也来总结总结一下在工做中学到的经验 。

    首先了，跟着个人思惟一块儿走，用户打开网页的这个动做，能够理解为 涉及到以下 两个大项    浏览器 和服务端 。

    我先谈谈服务器端 ，如图

    上图能够看出 访问页面动做(客户端) 在服务端拿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