前端性能优化方法:

一 . 减少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. Mysql中的算术运算符详解

    MySQL 支持的算术运算符包括加.减.乘.除和模运算.它们是最常使用.最简单的一类运算符.表4-1 列出了这些运算符及其作用. 下例中简单地描述了这几种运算符的使用方法: mysql> sel ...

  2. php类自动载入

    在编写面向对象(OOP) 程序时,很多开发者为每个类新建一个 PHP 文件. 这会带来一个烦恼:每个脚本的开头,都需要包含(include)一个长长的列表(每个类都有个文件). 在 PHP 5 中,已 ...

  3. 简明 Vim 练级攻略(转,有些动态图不能显示,请看转载处)

    vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...

  4. 打印十字图 queue 搞定

    题目描述 小明为某机构设计了一个十字型的徽标(并非红十字会啊),如下所示: ..$$$$$$$$$$$$$.. ..$...........$.. $$$.$$$$$$$$$.$$$ $...$... ...

  5. iOS应用安全防护框架概述

    iOS应用安全防护框架概述 攻易防难,唯有缜密.多层的防护网络才能可靠的保护我们iOS应用程序的安全.那么,一个完善的iOS应用安全防护框架都要写哪些东西呢? 首先,先梳理一下常见的逆向及攻击工具. ...

  6. codeblocks 配置OpenGL

    一.选择编译器环境 这里选择codeblocks,带MinGW的版本. 二.下载glut工具包 网址:http://pan.baidu.com/s/1eQriTQM 三.配置glut 解压缩下载的gl ...

  7. FreeRTOS 调度锁,任务锁和中断锁

    以下转载自安富莱电子: http://forum.armfly.com/forum.php 调度锁调度锁就是 RTOS 提供的调度器开关函数,如果某个任务调用了调度锁开关函数,处于调度锁开和调度锁关之 ...

  8. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  9. REST学习

    RPC架构与REST架构 RPC:RPC将服务器看作一些列动作的集合(需要做某件事) REST:将服务器看作分布式对象集合,客户端通过调用这些对象上的方法来执行特定的任务,组件交互的可伸缩性.接口的通 ...

  10. EF常用查询语句

    //方法一 Linq to Entities            var info = from p in entity.Users where p.ID >= 10 orderby p.ID ...