• 前端性能优化


    1、减少HTTP请求

    基本原理

    在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其在网络情况比较糟糕的情况下

    方法:

      合并图片(精灵图)

      合并css和js文件

      图片较多的也米娜也可以使用lazyLoad等技术进行优化

    2、正确理解Repaint和Reflow

    repaint和relow也就是重绘和重排

    基本原理

    repaint就是在一个元素的外观别改变 但是灭有改变布局的i情况下发生,如改变visibility背景等

    reflow 如果在reflow的过于频繁 CPU使用率会死命的网上飙

    减少性能影响的方法

    如果通过好色之style改变节点的样式 每设置一次就会导致一次reflow 所以最好通过设置class的样式

    有动画效果的元素 他的position数星星应当设为flex货absolute 这样不会影响其他元素的布局

    3、减少对DOM的操作

    基本原理

    对DOM访问次数越多 与js的连接次数越多 简介次数越多就需要更多的时间

    解决办法

    合理使用js变量储存内容 考虑大量DOM元素中循环的性能开销 在循环结束时 一次性写入 减少DOM元素的查询和修改

    查询时可以将其复制给局部变量

    注意:在IE中hover会降低相应的速度

    4、使用json格式进行数据交换

    基本原理

    json是一种轻量级的数据减缓格式,采用完全独立于语言的文本格式 是理想的数据交换格式

    json也是js原生格式 也就是说明js处理json数据时不需要任何特殊的API或者工具包

    json序列化后一般比XML序列化后数据体积小

    5、高效使用HTML标签和CSS样式

    6、使用CDN家督(内容分发网络)

    不足:实用性不太好

    解决方法:在网络内容发生变化时将新的网络内容从服务器直接传送到缓存器 或者当对网络的内容访问增加时

    将数据源服务器的网络内容尽可能实时的复制到缓存服务器

    7、将css和js放到外部文件中引用 css放头 js放尾(即使用外部样式引用文件而非直接使用内部样式)

  • 相关阅读:
    mysql数据库操作
    django
    django-rest framwork
    Maven项目POM文件错误,提示“Plugin execution not covered by lifecycle configuration”的解决方案
    [Flutter] FFI之生成Ansi字符串指针
    多label实现准确率和召回率
    pickle.dump()和pickle.load()
    numpy.take()
    通俗易懂的lambda表达式,不懂来找我!
    collections(python常用内建模块)
  • 原文地址:https://www.cnblogs.com/WoAiZmm/p/8459725.html
Copyright © 2020-2023  润新知