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">

  • 相关阅读:
    eclipse如何导入项目
    CBC和CTR解密模式——C++实现
    安装java之后没有jre目录
    对称密钥解密——C++方法
    使用Eclipse时一些报错
    C/C++文件I/O操作
    获取string的长度
    新建ftp快捷方式
    一些IT书籍
    C语言获得数组长度的函数
  • 原文地址:https://www.cnblogs.com/leiting/p/9386144.html
Copyright © 2011-2022 走看看