前端性能优化方法:

一 . 减少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">

前端性能优化-减少http请求,dns预解析,减少repaint和reflow的更多相关文章

  1. DNS预解析dns-prefetch提升页面载入速度优化前端性能

    当浏览器请求一个URL的时候,通过firebug我们可以发现大概有以下几个过程:阻挡.域名解析.建立连接.发送请求.等待响应.接收数据.后面四个跟用户的网络情况和你的服务器处理速度有关,本文重点说说前 ...

  2. Web前端性能优化教程06:减少DNS查找、避免重定向

    本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...

  3. Web前端性能优化教程01:减少Http请求

    性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求 ...

  4. 前端性能优化成神之路—资源合并与压缩减少HTTP请求

    资源合并与压缩减少HTTP请求的概要 资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信 ...

  5. 前端性能优化之-dns预解析

    预解析的实现: 1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" conten ...

  6. 前端优化系列之一:dns预获取 dns-prefetch 提升页面载入速度

    问题:怎么做到dns域解析?   用于优化网站页面的图片   问题:怎么提升网站性能? dns域解析,是提升网站的一个办法.   DNS Prefetch,即DNS预获取,是前端优化的一部分. 一般来 ...

  7. 前端优化:DNS预解析提升页面速度

    在网页体验中我们常会遇到这种情况,即在调用百度联盟.谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况.那么有没有方法去解决这种请求严重延时的现象呢? 一般来说这种延时的原因不会是 ...

  8. 前端性能优化 http请求的过程及潜在的优化点

    CS架构:比如我们的代码开发好,打包成apk,发布到平台,那么最终怎么运行到用户的手机上呢,用户首先需要从相关的应用商城下载这个apk包,并且运行这个 apk 包,那么这个 apk 包就会被解压,最后 ...

  9. 前端优化DNS预解析

    写在前面 今天再看一同事写的代码,发现了这样<link rel="dns-prefetch" href="//hm.baidu.com">这个代码, ...

随机推荐

  1. Java数据结构和算法(一):简介

    本系列博客我们将学习数据结构和算法,为什么要学习数据结构和算法,这里我举个简单的例子. 编程好比是一辆汽车,而数据结构和算法是汽车内部的变速箱.一个开车的人不懂变速箱的原理也是能开车的,同理一个不懂数 ...

  2. ECN

    ECN是工程变更管理,主要用来管理BOM的生效日期,及记录BOM的更改内容:在SAP系统中,需先创建ECN更改号码,凭ECN号码去更改管理BOM

  3. vuex中store分文件时候index.js进行文件整合

    import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); import getters from './getters.js' impo ...

  4. apue编程之参考du代码利用递归写的一个简单的du命令的源代码

    #include <stdio.h> #include <stdlib.h> #include <glob.h> #include <string.h> ...

  5. pycharm设置安装python第三方插件

    pycharm设置安装python第三方插件 转载于:https://www.mindg.cn/?p=80 今天下了一个pycharm,设置用它来安装python插件,以下是安装步骤,与大家分享,我的 ...

  6. js代码中定义后台java中的上下文路径

    var href = <c:out value='${sessionScope.contextPath}' />

  7. 方程式漏洞之复现window2008/win7 远程命令执行漏洞

    前几天就想写的,因为一些缘故就没写.此次是在外网环境下进行的.大家在内网中也一个样. 方法: 使用Eternalblue模块,剑测是否有漏洞然后msf生成一个dll直接反弹shell. PS:win版 ...

  8. Linux网络编程wait()和waitpid()的讲解

    本文讲的是关于wait和waitpid两者的区别与联系.为避免僵尸进程的产生,无论我们什么时候创建子进程时,主进程都需要等待子进程返回,以便对子进程进行清理.为此,我们在服务器程序中添加SIGCHLD ...

  9. Java中float/double取值范围与精度

    Java浮点数 浮点数结构 要说清楚Java浮点数的取值范围与其精度,必须先了解浮点数的表示方法,浮点数的结构组成,之所以会有这种所谓的结构,是因为机器只认识01,你想表示小数,你要机器认识小数点这个 ...

  10. Spring Framework 官方文档学习(一)介绍

    http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle/#overview-maven-bom ...