前端性能优化-减少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">
前端性能优化-减少http请求,dns预解析,减少repaint和reflow的更多相关文章
- DNS预解析dns-prefetch提升页面载入速度优化前端性能
当浏览器请求一个URL的时候,通过firebug我们可以发现大概有以下几个过程:阻挡.域名解析.建立连接.发送请求.等待响应.接收数据.后面四个跟用户的网络情况和你的服务器处理速度有关,本文重点说说前 ...
- Web前端性能优化教程06:减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- Web前端性能优化教程01:减少Http请求
性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求 ...
- 前端性能优化成神之路—资源合并与压缩减少HTTP请求
资源合并与压缩减少HTTP请求的概要 资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信 ...
- 前端性能优化之-dns预解析
预解析的实现: 1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" conten ...
- 前端优化系列之一:dns预获取 dns-prefetch 提升页面载入速度
问题:怎么做到dns域解析? 用于优化网站页面的图片 问题:怎么提升网站性能? dns域解析,是提升网站的一个办法. DNS Prefetch,即DNS预获取,是前端优化的一部分. 一般来 ...
- 前端优化:DNS预解析提升页面速度
在网页体验中我们常会遇到这种情况,即在调用百度联盟.谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况.那么有没有方法去解决这种请求严重延时的现象呢? 一般来说这种延时的原因不会是 ...
- 前端性能优化 http请求的过程及潜在的优化点
CS架构:比如我们的代码开发好,打包成apk,发布到平台,那么最终怎么运行到用户的手机上呢,用户首先需要从相关的应用商城下载这个apk包,并且运行这个 apk 包,那么这个 apk 包就会被解压,最后 ...
- 前端优化DNS预解析
写在前面 今天再看一同事写的代码,发现了这样<link rel="dns-prefetch" href="//hm.baidu.com">这个代码, ...
随机推荐
- vue组件调用(用npm安装)
vue用webpack打包方式新建项目,注意刚开始可以先关闭路由和代码错误检测功能 1.建立了一个Hi.vue的组件 <template> <div>Hi~~{{msg}}-- ...
- laravel的cookie操作
前提你的整个http流程一定要走完,页就是必须走到view()或Response,你写到中间中断调试,cookie是设置不上去的......(坑~~) 读取: $value = Cookie::get ...
- unity, Rigidbody.constraints
一,同时施加多个限制: 用按位或(bitwise OR)实现,例如: GetComponent<Rigidbody>().constraints=RigidbodyConstraints. ...
- atitit.自己动手开发编译器and解释器(1) ------词法分析--attilax总结
atitit.自己动手开发编译器and解释器(1) ------词法分析--attilax总结 1. 应用场景:::DSL 大大提升开发效率 1 2. 2. 流程如下::: 词法分析(生成toke ...
- Jackson 时间格式化,时间注解 @JsonFormat 与 @DatetimeFormat 用法、时差问题说明
@JsonFormat 使用 我们可以有两种用法(我知道的),在对象属性上,或者在属性的 getter 方法上,如下代码所示: 增加到属性上: ... ... /**更新时间 用户可以点击更新,保存最 ...
- lua urlencode urldecode URL编码
URL编码其实就是对一些字符转义为%加上该字符对应ASCII码的二位十六进制形式. 如: 字符 特殊字符的含义 URL编码 # 用来标志特定的文档位置 % % 对特殊字符进行编码 % & 分隔 ...
- 【转】在MAC下配置MySQL 5.7 数据库的编码问题
1.MySQL 5.7 for MAC 默认没有my.cnf文件 ,首先 新建my.cnf文件: 2.在my.cnf文件追加 1 2 3 4 5 6 7 8 [mysqld] character-se ...
- 架构设计之Spring-Session的分布式集群会话管理
发表于 2017-04-24 | 160次围观 | 分类于 架构设计 | 暂无评论 前言 通常在web开发中,回话管理是很重要的一部分,用于存储与用户相关的一些数据.对于JAVA开 ...
- 基于jQuery的时间轴鼠标悬停动画插件
之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比 ...
- linux用户空间和内核空间(内核高端内存)_转
转自:Linux用户空间与内核空间(理解高端内存) 参考: 1. 进程内核栈.用户栈 2. 解惑-Linux内核空间 3. linux kernel学习笔记-5 内存管理 Linux 操作系统和驱 ...