前端性能优化方法:

一 . 减少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. NB 命令安装需似机(无图型化安装)

    [root@ok ~]# virt-install -v -n 09ng04 -r 512 --vcpus=4 --location=/home/ISO/CentOS-6.7-x86_64-bin-D ...

  2. linux 技巧:使用 screen 管理你的远程会话(短时间内同时开启多个会话)

    screen -S zyj 开启一个会话窗口 会进入这个页面 然后按  Ctrl+a,再按一下d  退出 然后输入 screen -r -d zyj 会从新进入这个页面 如果你的工作完成就直接输入 关 ...

  3. Makefile 8——使用依赖关系文件

    Makefile中存在一个include指令,它的作用如同C语言中的#include预处理指令.在Makefile中,可以通过include指令将自动生成的依赖关系文件包含进来,从而使得依赖关系文件中 ...

  4. 一款纯html5实现的时钟

    今天给大家分享一款非常漂亮的纯html5实现的时钟.整个界面都由html5绘制而成.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  5. Linux下HTTP Server

    想在Linux下实现一个简单的web Server并不难.一个最简单的HTTP Server不过是一个高级的文件服务器,不断地接收客户端(浏览器)发送的HTTP请求,解析请求,处理请求,然后像客户端回 ...

  6. netlink--内核态与用户态通信

    1. 什么是 Netlink 什么是Netlink?Netlink是linux提供的用于内核和用户态进程之间的通信方式.但是注意虽然Netlink主要用于用户空间和内核空间的通信,但是也能用于用户空间 ...

  7. ES6学习笔记(1,let和const)

    在介绍let和const之前我们先复习一下相关的知识点. 关于函数作用域 开发过程中,在ES6(ECMA2015)标准推出之前,声明变量的方式一直都是var,而变量的作用域一般也只在函数内部,即函数作 ...

  8. 日期-date.js

    Date.prototype.format = function(format) { var o = { "M+" : this.getMonth() + 1, // 月 &quo ...

  9. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  10. 逻辑斯特回归(logistic regression)与最大熵模型(maximum entropy model)