三个实用的提升网页性能技巧

1、display属性设置

先将元素设为

display: none
(需要1次重排和重绘),然后对这个节点进行100次操作,最后再恢复显示(需要1次重排和重绘)。这样一来,你就用两次重新渲染,取代了可能高达100次的重新渲染。

只在必要的时候,才将元素的display属性为可见,因为不可见的元素不影响重排和重绘。另外,

visibility : hidden
的元素只对重绘有影响,不影响重排。

 

2、position:absolute/fixed

position属性为absolute或

fixed
的元素,重排的开销会比较小,因为不用考虑它对其他元素的影响。

 

3、不要一条条地改变样式,而要通过改变class,或者csstext属性,一次性地改变样式

// bad
var left = 10;
var top = 10;
el.style.left = left   "px";
el.style.top  = top    "px";
// good 
el.className  = " theclassname";
// good
el.style.cssText  = "; left: "   left   "px; top: "   top   "px;";

 

以上参考阮一峰技术博客:http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysq在某一刻同时获取主从库的位置点

在从库进行锁表操作flush table with read lock, 通过show slave status\G 获取对应主库的位置点: show slave status\G*************************** 1. row *************************** Slave_IO_State: Waiting for master to send event Master_Host…

php在window磁盘管理,Windows Server 2008R2设置磁盘阵列

RAID(独立硬盘冗余阵列)指用多个硬盘组成一个高性能、大容量的一个硬盘组合。独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),旧称廉价磁盘冗余阵列(RedundantArray of Inexpensive Disks),简称硬盘阵列。其基本思想就是把多个相对便宜的…

解决Error: ENOENT: no such file or directory, scandir 安装node-sass报错

新项目开发需要安装依赖,但是安装完之后通过gulp运行项目,产生了一下的报错: 解决方案是执行一些方法: npm rebuild node-sass可是有时就是网络问题导致上面命令安装失败,查下失败提示,有可能是&#xff1a…

没有应用程序服务器

我们最近发布了有关从免费Plumbr部署中收集的应用服务器市场份额的数据 。 它产生了很好的共鸣-通过不同的渠道,我们获得了数百种有关如何解释数据的评论。 但是,通过各种渠道不断提出一种形式不同的论点。 无论是采用“ T omcat不是应用程序服务器 ”的…

HTML基础知识(未完待续)

一、HTML编辑工具&#xff1a;Sublime Text 二、HTML实体字符&#xff1a;1、&#xff08; 空格&#xff09;&#xff1a;&nbsp&#xff1b; 2、&#xff08;<&#xff09; &lt&#xff1b; 3、&#xff08;>&#xff09;&gt&#xff1b; 4、&#xff08;&a…

系统讲解CSS,前端开发最神奇的技术,新手的你一定不能错过

前面小编带领大家重温了前端开发中最基本的HTML语言。如果你已经掌握了这门语言&#xff0c;那么恭喜你&#xff0c;可以去深入了解CSS技术了。CSS技术最主要的功能就是弥补HTML标记对在页面中显示外观的不足&#xff0c;对这些标记对的默认外观进行美化。从本文开始&#xff0…

java 自定义对象 排序,使用自定义排序顺序对对象的ArrayList进行排序

问题我希望为我的地址簿应用程序实现一个排序功能。我想排序anArrayList contactArray.Contact是一个包含四个字段的类&#xff1a;名称&#xff0c;家庭电话号码&#xff0c;手机号码和地址。我想排序name。如何编写自定义排序功能来执行此操作&#xff1f;#1 热门回答(255 赞…

JUnit和Mockito合作

这次&#xff0c;我想对测试框架Mockito进行概述。 毫无疑问&#xff0c;这是用于测试Java代码的最受欢迎的工具之一。 我已经对Mockito的竞争对手EasyMock进行了概述。 这篇文章将基于有关EasyMock的示例应用程序。 我的意思是代表咖啡机功能的类。 用Mockito准备测试 通常&a…

发现2017年最好的CSS框架

如今&#xff0c;无数的框架出现在定期而少数人喜欢自助&#xff0c;Foundation和angular.js主宰了整个世界的发展。CSS代表用于描述HTML&#xff08;或XML&#xff09;文档表示的样式表语言。一个框架被定义为一个包&#xff0c;它由一组结构化的文件和标准化代码&#xff08;…

[python基础] python 2与python 3之间的区别 —— 默认中文字符串长

在python 2.7中使用len获得中文字符串长度时&#xff1a; >>> len(中文) 4 >>> a你好 >>> a \xc4\xe3\xba\xc3 >>> len(a.encode(utf-8))Traceback (most recent call last):File "<pyshell#77>", line 1, in <module&…

stixel world论文总结

1.The Stixel World - A Compact Medium Level Representation of the 3D-World:http://pdfs.semanticscholar.org/2df3/4dbfb4feeb2d7f40e90956ebc8de1f41a5e4.pdf stixel world开山鼻祖文章 https://zhuanlan.zhihu.com/p/27494151 对stixel world相关的一些概念进行解释 2.T…

php如何与数据库连接,PHP文章如何和数据库连接(1)

PHP文章如何和数据库连接(1)(1)Warning: mysql_query() [function.mysql-query]: Access denied for userODBClocalhost (using password: NO) in C:\Program Files\ApacheSoftware Foundation\Apache2.2\htdocs\TM\conn\conn.php on line 32Warning: mysql_query() [function.…

html基本标签与属性

HTML 超文本标记语言 html5 建立一个HTML文件&#xff1a; 文件名 . 后缀(html) 解析&#xff1a;就是去识别 注释&#xff1a;就是给开发人员开的批注------浏览器不去解析&#xff08;不去输出&#xff09; HTML的整体框架 <!DOCTYPE html> <html> <head> …

go基础编程 day-2

Go的常亮 关键字&#xff1a; Const Go常亮的多个定义&#xff1a; // 定义常亮的关键字 const// 定义多个常亮 const(PI 3.14const1 "1"const2 2const3 3 ) 全局变量的声明与赋值&#xff1a; var (name "wyc"name1 1name2 2name3 3 ) 一般类型…

EclipseLink JPA-RS简介

在之前的系列文章中&#xff0c;我介绍了如何创建一个将JPA用于持久层的JAX-RS服务。 EclipseLink包含一个名为JPA-RS的组件&#xff0c;该组件可用于轻松自动地将持久性单元公开为RESTful服务&#xff08;支持XML和JSON消息&#xff09;。 MOXy为JPA-RS提供XML和JSON绑定&…

如何对java分装,Angular4 JSONP + JAVA代码

一、在app.module.ts模块中&#xff0c;注入JsonpModule模块import {JsonpModule} from "angular/http";NgModule({imports: [JsonpModule //注入JSonpModule模块]})二、创建服务httpService&#xff0c;并注入jsonp和map(分装好的服务 可以直接调用)import {Injecta…

教你开发jQuery插件(转)

教你开发jQuery插件&#xff08;转&#xff09; 阅读目录 基本方法支持链式调用让插件接收参数面向对象的插件开发关于命名空间关于变量定义及命名压缩的好处工具GitHub Service Hook原文&#xff1a;http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最…

gulp 常用插件汇总

2017-07-26更新&#xff1a;图片压缩插件使用gulp-smushit&#xff0c;gulp-smushit压缩率比较大&#xff0c;gulp-imagemin 图片压缩插件压缩率不明显。 见下图压缩率&#xff1a; 1、gulp安装 参照gulp官网进行安装&#xff1a;http://www.gulpjs.com.cn/docs/getting-start…

Nmap介绍

1.Nmap介绍 Nmap用于列举网络主机清单、管理服务升级调度、监控主机或服务运行状况。Nmap可以检测目标机是否在线、端口开放情况、侦测运行的服务类型及版本信息、侦测操作系统与设备类型等信息。 1.1 Zenmap Zenmap是Nmap官方提供的图形界面&#xff0c;通常随Nmap的安装包发布…

使用Maven安装本地jar

1.问题与选择 Maven是一种非常通用的工具&#xff0c;其可用的公共存储库首屈一指。 但是&#xff0c;总会有一个不在任何地方托管的工件&#xff0c;或者托管该工件的存储库有依赖的风险&#xff0c;因为当您需要它时&#xff0c;它可能不会启动。 发生这种情况时&#xff0c;…