zoukankan      html  css  js  c++  java
  • 前端性能优化-减少http请求,dns预解析,减少repaint和reflow

    前端性能优化方法:

    一 . 减少http请求

    (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites 

    (2)lazyload懒加载,在需要的时候再加载

      1.定义:懒加载也称为延迟加载,图片需要用到的时候再去价值
      2.用法:就是重写对象的get方法,当系统调用get方法再去加载对象
      3.优点:(1)对象的实例化在getter方法中,各司其职,降低耦合性;(2)真正需要资源时,再去加载,系统的内存占用率会减小

    (3)压缩/合并css和js

    二 .减少repaint重绘和reflow重排

    (1)repaint重绘: 元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility,outline,背景色等

    (2)Reflow(重排): dom的变化影响到元素的几何属性(宽高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,每次重排都会产生计算消耗,改变窗口大小/改变文字大小/style属性的变化,如果reflow过于频繁,cpu的占用就会上涨

    如何减少:

      1. 尽量少用style属性,用class重绘比重排的效率高
      2. 有动画效果的元素设置绝对定位和固定定位
      3. 权衡速度的平滑。比如实现一个动画,以1个像素为单位移动这样最平滑,但reflow就会过于频繁,CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
      4. 减少不必要的dom层级,不要频繁操作dom

    三 . dns预解析

    让具有此属性的域名不需要用户点击链接就在后台解析,而域名解析和内容载入使串行的网络操作,这个操作能减少用户的等待时间,提升用户体验
    用法:放在meta标签后面<link rel="dns-prefetch" href="//www.zhix.net">

  • 相关阅读:
    代码块&继承&final关键字
    Java基础
    我的学习笔记
    CF743C 题解
    洛谷P4180 题解
    洛谷P3402 题解
    洛谷P3919 题解
    Noi.ac#30 题解
    Noi.ac #65题解
    Noi.ac #51题解
  • 原文地址:https://www.cnblogs.com/leiting/p/9386144.html
Copyright © 2011-2022 走看看