前端性能优化方法:

一 . 减少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. js 字符串拼接 html 累加 html 叠加

    正常来说已经使用es6 的 模板了如`` //页面层 layer.open({ type: 1, content:`<div class="child_card"> & ...

  2. selenium 获得 cookie 信息

    #coding=utf-8 from selenium import webdriver driver = webdriver.Chrome() driver.get("https://ww ...

  3. linux命令汇总1

    允许非root用户使用“sudo” root身份登录系统,执行“visudo”,根据示例添加新的一个规则(记住输入的密码是当前用户密码,而不是root密码)#不需要密码执行sudo命令hadoop   ...

  4. keepalived virtual_router_id 44

    在同一局或网内如果有多个keepalived 的话 virtuall_router_id 44 (不能相同,但同一对,是一定相同)

  5. Nginx - rewrite 不区分大小写进行匹配

    Nginx - rewrite 不区分大小写进行匹配 分类: Nginx2014-05-28 19:25 1046人阅读 评论(0) 收藏 举报 Use (?i) to match case-inse ...

  6. java学习之实例变量初始化

    实例变量的初始化方法 第一种:通过构造函数进行初始化. 第二种:通过声明实例字段初始化. 第三种:通过对象代码块初始化. 通过构造函数进行初始化方法 通过构造函数进行对象初始化,必须在类中声明一个带参 ...

  7. [转]软件测试 Top 120 Blog (博客)

    [转]软件测试 Top 120 Blog (博客) 2015-06-08 转自:    软件测试 Top 120 Blog (博客) # Site Author Memo DevelopSense M ...

  8. linux 短信收发

    #include <termios.h>#include <stdio.h>#include <stdlib.h>#include <unistd.h> ...

  9. PHP——数组2(数组函数,二维数组,正则表达式)

    <body> <?php //数组函数 $arr=array(1,2,3,4,5,6); print_r($arr); echo "<br />"; ...

  10. c libghttp ghttp 库使用指南

    libghttp是一个很好用的 http 库,能够轻松地实现同步和异步的HTTP请求 目录 [隐藏]  1 安装 2 GET示例 3 POST示例 4 相关函数 5 艺搜参考 安装 库文件下载: 在6 ...