zoukankan      html  css  js  c++  java
  • 关于 Web 前端的各种优化

    web性能优化,主要分为前端和后台两个部分性能优化,后台性能优化决定了web能不能用,前端优化决定了其好不好用,也就是牵涉到前端用户体验和web易用性等情况,所以前端性能与用户体验是有着极大的关联的。

    HTTP 请求优化:
    
    减少多余不必要的HTTP请求,能大大缩短页面响应和渲染的时间。
    减少不必要的重定向:
    
    重定向对于浏览器和服务器来说,需要多次的交互和判断,是一个耗费时间和性能的操作,能减少就减少。
    代码编写的压缩和精简:
    
    尽量少的使用不必要的标签,减少整体代码量,删除多余的空格和空行。
    编写高质量的JS代码,能封装的就封装,能复用的就复用。
    防抖和节流:
    
    使用防抖和节流代码技术,可以让一些可能会被经常点击的功能,少一些内存消耗,属于性能优化。
    减少对DOM操作,避免太多重排重绘:
    
    尽量不要在布局信息改变时做查询(会导致渲染队列强制刷新)
    同一个DOM的多个属性改变可以写在一起(减少DOM访问,同时把强制渲染队列刷新的风险降为0)
    如果要批量添加DOM,可以先让元素脱离文档流,操作完后再带入文档流,这样只会触发一次重排(fragment元素的应用)
    将需要多次重排的元素,position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
  • 相关阅读:
    Mac 终端自动补全忽略大小写
    AtCoder ABC 155F Perils in Parallel
    AtCoder ABC 155E Payment
    AtCoder ABC 155D Pairs
    AtCoder ABC 154F Many Many Paths
    牛客 边界都是1的最大正方形大小
    牛客 打印N个数组整体最大的Top K
    牛客 数组中子数组的最大累乘积
    牛客 在数组中找到一个局部最小的位置
    牛客 子矩阵最大累加和问题
  • 原文地址:https://www.cnblogs.com/panic404/p/13572082.html
Copyright © 2011-2022 走看看