【高性能WEB开发：深入理解页面呈现、重绘、回流】的更多相关文章

高性能WEB开发：深入理解页面呈现、重绘、回流

在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的.   页面呈现流程: 1. 浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常用的document对象(<html> tag). dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构…

高性能WEB开发(11) - flush让页面分块,逐步呈现

高性能WEB开发(11) - flush让页面分块,逐步呈现 在处理比較耗时的请求的时候,我们总希望先让用户先看到部分内容,让用户知道系统正在进行处理,而不是无响应.一般大家在处理这样的情况,都使用ajax,先把html输出到client,然后再用ajax取载入比較耗时的资源.用ajax麻烦的地方是添加了请求数,并且须要写额外的js代码.和js调用的请求接口. 正对这样的情况,另一种处理方法,就是让response分块编码进行传输.response分块编码,能够先传输一部分不须要处理的html代…

高性能WEB开发：重排与重绘

DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构——DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如何显示.DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none 在渲染树中没有对应的节点).渲染树中的节点被称为“帧”或“盒“,符合CSS模型的定义,理解页面元素为一个具有填充,边距,边框和位置的盒子.一旦…

高性能WEB开发(6) - web性能測试工具推荐

WEB性能測试工具主要分为三种.一种是測试页面资源载入速度的,一种是測试页面载入完成后页面呈现.JS操作速度的,另一种是整体上对页面进行评价分析,以下分别对这些工具进行介绍,假设谁有更好的工具也请一起分享下. Firebug: Firebug 是firefox中最为经典的开发工具,能够监控请求头.响应头,显示资源载入瀑布图:      HttpWatch :    httpwatch 功能类似firebug,能够监控请求头.响应头,显示资源载入瀑布图. 可是httpwatch还能显示GZIP压缩…

高性能Web开发系列

1. 高性能WEB开发基础 http://www.uml.org.cn/net/201404225.asp 2. 高性能WEB开发进阶(上) http://www.uml.org.cn/net/201404235.asp 3. 高性能WEB开发进阶(下) http://www.uml.org.cn/net/201404245.asp 4. 高性能WEB开发经验分享 http://www.uml.org.cn/net/201404255.asp…

CSS新特性contain，控制页面的重绘与重排

在介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排. 之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势. OK,下面进入本文正题, contain 为何? contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外.目的是能够让浏览器有能力只对部分元素进行重绘.重排,而不必每次都针对整个页面. The contain property allows an author to in…

[转]深入理解Flash Player重绘

这个是tencent flash team的一篇文章,但团队的博客已经关闭了,所以就在这里备份下吧~ 后来有人把这篇文章又发布到9ria上了,引发了一些讨论,其中有两位大神发言了,内容在原文下方. 9ria的地址是http://bbs.9ria.com/thread-46877-1-1.html tencent flash team的原文如下: Flash Player 会以SWF内容的帧频速度来刷新需要变化的内容,而这个刷新的过程,我们通常称为“重绘(redraw)”,相信即便是初级的菜鸟也知…

Web开发中，页面渲染方案

转载自:http://www.jianshu.com/p/d1d29e97f6b8 (在该文章中看到一段感兴趣的文字,转载过来) 在Web开发中,有两种主流的页面渲染方案: 服务器端渲染,通过页面渲染引擎渲染好HTML页面发送给浏览器 客户端渲染,客户单端通过RESTAPI获取数据在浏览器上动态渲染页面 前者的技术栈包括:Thymeleaf.Apache Velocity .Freemarker 等主流方案,后者有React.AngularJS.vue.js.Backbone.js等前端渲染框架…

高性能WEB开发：Javascript自身执行效率

Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入 我们在编码过程中多多少少会使用到一些全局变量(window.document.自定义全局变量等等),了解javascript作用域链的人都知道,在局部作用域中访问全局变量需要一层一层遍历整个作用域链直至顶级作用域,而局部变量的访问效率则会更快更高,因此在局部作用域中高频率使用一些全局对象时可以将其导入到局部作用域中,例如: //1.作为参数…

高性能WEB开发：DOM编程

我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAscript每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAscript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是有代价的,…

理解浏览器的重绘与回流（repaint&&reflow）

今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这两个词的领悟粘贴如下: 一.  浏览器渲染过程 渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程 浏览器解析HTML的基本过程:   1  用户输入网址,浏览器向服务器发出请求,服务器返回html文件   2  浏览器载入html代码,发现标签内有一个标签引用外部css文件…

HTML页面的重绘（repaint）和重流（reflow）

重流(Reflow)是指布局引擎为frame计算图形的过程. frame是一个矩形,拥有宽高和相对父容器的偏移.frame用来显示盒模型(content model), 但一个content model可能会显示为多个frame,比如换行的文本每行都会显示为一个frame. 重绘(Repaint)发生在元素的可见性发生变化时,比如背景色.前景色等. 因此回流必然会引起重绘. 重流的原因: 初始化(Initial).DOM载入后的第一次回流,将会遍历所有frame. 渐进(Incremental)…

WEB开发中的页面跳转方法总结

PHP header()函数跳转 PHP的header()函数非常强大,其中在页面url跳转方面也调用简单,使用header()直接跳转到指定url页面,这时页面跳转是302重定向: $url = "http://www.helloweba.com/";   header( "Location: $url" );  我们有可能会遇到特殊的跳转时,比如网站改版有个页面地址要做301重定向,当然你可以通过web配置rewrite来实现,但现在我要告诉大家,可以使用php…

Web开发中错误页面的配置

一.创建错误处理页. 1)web.xml里面添加 <error-page> <error-code>404</error-code> <location>/404.html</location> </error-page> 2)在根目录下建立404.html 3)测试:随手输入一个不存在的url地址.可以看到404.html被正确显示. 二.按异常类型指定跳转.  1)新建servlet包的Hello.java 2)在doGet里添加…

高性能web开发：如何加载js，，js的存放位置

外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 有人会问:为什么JS不能像CSS.image一样并行下载了?这里需要简单介绍一下浏览器构造页面的原理,当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE,就会再发1个request去请求CSS或image,然后继续执行下面的转换,…

高性能WEB开发 为什么要减少请求数，如何减少请求数!

http请求头的数据量 [声明] 转载  原文出处:http://www.blogjava.net/BearRui/. 谢谢我们先分析下请求头,看看每次请求都带了那些额外的数据.下面是监控的google的请求头 Host www.google.com.hk User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTBDFff GTB7.0 Accept…

对java web开发的理解

写完后发现自己好像很多都不知道,管它的,只要自己了解就行了,以后有时间再把这个完善一下吧 感觉就是三层架构翻来覆去的用,以这个为基础不停的扩展,前提是数据量一定要大,不然这些扩展就没啥意思 这是数据量特别小的结构(貌似以前的静态网站也是这种结构吧) 在存储过程中就包含了视图层+业务层+持久层 ---- 其实这里的数据库可以不至这一个,可以做数据库链 这种是数据量大的结构,且页面数据是动态,就是在一次加载页面后,但有些隐藏的的功能需要用户手动触发,但这个时候如果重新刷新页面肯定不现实,就有了动态加…

（6）Spring Boot web开发 --- 错误处理页面

文章目录 处理时间(`Date`)类型 thymeleaf 页面拼接字符串 映射路径占位符 使用 put.delete 方法 错误处理机制 处理时间(Date)类型 Spring Boot 进行参数绑定使用的是 SpringMvc ,涉及 Date 类型的参数绑定的时候,默认是时间格式是 yyyy/MM/dd ,我们可以自定义格式,只需要配置文件里面配置下: # 日期格式 spring.mvc.date-format=yyyy.MM.dd thymeleaf 页面拼接字符串 表达式之间直接使用…

巧用setTimeout解决阻塞导致页面无法重绘

项目中遇到一个javascript问题,大致如下: <!doctype HTML> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div>0</div> <a href="#">按钮</a> <script> $(fu…

【web性能】页面呈现、重绘、回流

在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的.   页面呈现流程 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1. 浏览器把获取到的html代码解析成1个Dom树,html中的…

web开发中移动端适配

这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 1.2 屏幕密度(ppi) 屏幕密度是指一个设备表面上存在的像素数量,它通常以每1英寸上排列有多少像素来计算(ppi:Pixels Per Inch).苹果公司声称人类的肉眼无法区分单个像素,当一个显示器像素密度超过300ppi的时候,肉眼就…

.NET Web开发技术简单整理

在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公司要推崇一个新技术.一个解决方案,我们总是短平快的去学习如何使用它,按照固定的解决问题思路按着案例进行,这也是一种应对项目紧急的一些措施.个人感觉如果有空闲时间的话,还是分析一下.理解一下.深入了解一下比较好,这些技术是如何交互的.这些技术的理论支持什么.为什么要用这项技术.这项技术的优缺点怎样?这…

转载：.NET Web开发技术简单整理

在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公司要推崇一个新技术.一个解决方案,我们总是短平快的去学习如何使用它,按照固定的解决问题思路按着案例进行,这也是一种应对项目紧急的一些措施. 个人感觉如果有空闲时间的话,还是分析一下.理解一下.深入了解一下比较好,这些技术是如何交互的.这些技术的理论支持什么.为什么要用这项技术.这项技术的优缺点怎样?…

.NET Web开发技术简单整理 转

.NET Web开发技术简单整理 原文:http://www.cnblogs.com/SanMaoSpace/p/3157293.html 在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何 更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公司要推崇一个新技术. 一个解决方案,我们总是短平快的去学习如何使用它,按照固定的解决问题思路按着案例进行,这也是一种应对项目紧急的一些措施.个人感觉如果有空闲…

快速使用node.js进行web开发

首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这是一个比较好的学习模式和过程.由于这本书是2012年出的,书中的一个web教学项目是开发一个微博.从2012到现在,node.js及其生态环境发生了很大改变,所以关于该书的学习如果照着书本显然是过于陈旧的.到目前为止,node.js的web开发框架已经升级到了Express4.12.1,对于Mong…

高性能WEB开发之Web性能测试工具推荐

Firebug: Firebug 是firefox中最为经典的开发工具,可以监控请求头,响应头,显示资源加载瀑布图: HttpWatch: httpwatch 功能类似firebug,可以监控请求头,响应头,显示资源加载瀑布图.但是httpwatch还能显示GZIP压缩信息,DNS查询,TCP链接信息,个人在监控http请求比较喜欢使用httpwatch, httpwatch包含IE和firefox插件.不过httpwatch专业版本是收费的,免费版本有些功能限制. DynaTrace's Aj…

（转）深入理解flash重绘

深入理解Flash Player重绘 Flash Player 会以SWF内容的帧频速度来刷新需要变化的内容,而这个刷新的过程,我们通常称为“重绘(redraw)”,相信即便是初级的菜鸟也知道,只要使用的是Debug版本的Flash Player, 右键菜单里就会有“Show Redraw Regions (显示重绘区域)” 这个选项,当此选项打开的时候,我们就能清楚地看到此刻场景内被重绘的区域.…

web页面的重构和回流【转载】

在了解什么是重构和回流之前,我们应该先看看浏览器是怎么渲染的? 浏览器的渲染过程: 1.处理HTML脚本,生成DOM树(DOM树里包含所有的HTML标签,包括display:none和js动态添加的元素等)2.处理CSS脚本,生成CSSOM树(DOM和CSSOM是独立的数据结构)3.将DOM树和CSSOM树合并为渲染树,render树中不包含定位和几何信息.虽然,render树与dom树类似但还是有区别的.render树中不包含隐藏的节点 (比如display:none的节点,还有head节点)…

页面重绘(repaint)和回流(reflow)

前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. 浏览器将所有样式解析成样式结构体,解析过程中会去掉浏览器不能识别的. 2.DOM树和样式结构体结合生成render树. render树类似于DOM树,render树每个节点有自己样式(盒子模型,margin.border.padding.content),但不包含display:none和head节…

Web前端性能优化-重绘与回流

1.什么是重绘与回流 Render tree 的重新构建就叫回流.当布局和几何属性改变时就需要回流,鼠标移动到图片 图片变大 也会触发回流.回流 能避免就避免 Render tree 改变外观.风格 而不影响布局的时候,就叫重绘 重绘与回流的关系:回流会引起重绘 重绘不一定会引起回流 2.避免重绘回流的两种方法 什么会引起回流和重绘 触发页面布局从而触发重绘的: (1) 盒子模型属性 (2) 定位属性和浮动 (3) 改变节点内部文字结构 如下图: 只触发重绘不触发回流的属性: 优化方法: (1)…