zoukankan      html  css  js  c++  java
  • 前端性能优化

    1.减少HTTP请求

    在浏览器(客户端)和服务器发生通信时,就已经消耗了大量时间,尤其是在网络情况比较糟糕的时候,这个问题尤其突出。

    一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。

    而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。

    网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快。所以,请减少HTTP请求。

    解决办法:

    合并图片(css sprites),合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。

    2.请正确理解 Repaint 和 Reflow

    Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。

    Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。

    上面提到通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow,所以最好通过设置class的方式; 有动画效果的元素,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute,那么就权衡速度的平滑性。

    总之,因为 Reflow 有时确实不可避免,所以只能尽可能限制Reflow的影响范围。

    3.请减少对DOM的操作

  • 相关阅读:
    0-完全开源的 Vue.js 入门级教程:HelloVue,发车啦!
    [Java 开源项目]一款无需写任何代码,即可一键生成前后端代码的工具
    用 Java 做个“你画手机猜”的小游戏
    PowerJob 从 0 到 1.9k star 的经历
    最后一篇:结束不想说再见,那就扬帆再次起航!
    shell 常用快捷键
    微服务网关评测对比
    Docker加入自定义iptables规则链
    CentOS.7防火墙firewalld属性
    bash和shell的差别
  • 原文地址:https://www.cnblogs.com/quan-quanquan/p/5459876.html
Copyright © 2011-2022 走看看