zoukankan      html  css  js  c++  java
  • 前端优化还可以这么优化!

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

        首先了,跟着我的思维一起走,用户打开网页的这个动作,可以理解为 涉及到如下 两个大项    浏览器 和服务端 。

        我先谈谈服务器端 ,如图

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

            

              

             

         

         

                

               

  • 相关阅读:
    Windows10 JDK1.8安装及环境变量配置
    Adobe Premiere Pro 2020破解教程
    如何消除任务栏系统更新失败的图标
    微服务架构-Gradle下载安装配置教程
    第十五次-语法制导的语义翻译
    第十四次——算符优先分析
    第09组 Alpha冲刺(4/4)
    第09组 Alpha冲刺(3/4)
    第09组 Alpha冲刺(2/4)
    第09组 Alpha冲刺(1/4)
  • 原文地址:https://www.cnblogs.com/brookwang/p/brook.html
Copyright © 2011-2022 走看看