浏览器渲染机制

1.  明白浏览器渲染的目的


 

可访问性(Accessability)、加载性能和重构灵活性一直是前端工程师们关心的主题。

其中加载性能与浏览器的渲染机制深深挂钩,弄明白浏览器背后的渲染机制,才能在日常的前端的开发中明白如何进行性能优化。

 

2. 浏览器如何渲染页面


 

浏览器解析
1、浏览器通过请求的 URL 进行域名解析,向服务器发起请求,接收文件(HTML、CSS、JS、Images等等)。
2、HTML 文件加载后,开始构建 DOM Tree
3、CSS 样式文件加载后,开始解析和构建 CSS Rule Tree
4、Javascript 脚本文件加载后, 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree

浏览器渲染
1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
2、Rendering Tree 并不与 DOM Tree 对应,比如像 <head> 标签内容或带有 display: none; 的元素节点并不包括在 Rendering Tree 中 。
3、通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小,是否换行,以及 position、overflow、z-index 等等属性,这个过程称为 Flow 或 Layout 。
4、最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。


 

当用户在浏览网页时进行交互或通过 js 脚本改变页面结构时,以上的部分操作有可能重复运行,此过程称为 Repaint 或 Reflow。

Repaint
当元素改变的时候,将不会影响元素在页面当中的位置(比如 background-color, border-color, visibility),浏览器仅仅会应用新的样式重绘此元素,此过程称为 Repaint。

Reflow
当元素改变的时候,将会影响文档内容或结构,或元素位置,此过程称为 Reflow。( HTML 使用的是 flow based layout ,也就是流式布局,所以,如果某元件的几何尺寸发生了变化,需要重新布局,也就叫 Reflow。)

Reflow 的成本比 Repaint 的成本高得多的多。一个结点的 Reflow 很有可能导致子结点,甚至父点以及同级结点的 Reflow 。在一些高性能的电脑上也许还没什么,但是如果 Reflow 发生在手机上,那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介

以下行为将有可能产生 Reflow

  • 增加、删除、或改变 DOM 节点
  • 增加、删除 ‘class’ 属性值
  • 元素尺寸改变
  • 文本内容改变
  • 浏览器窗口改变大小或拖动
  • 动画效果进行计算和改变 CSS 属性值
  • 伪类激活(:hover)

栗子:

Repaint and Reflow
Repaint and Reflow

当然,我们的浏览器是聪明的,它不会像上面那样,你每改一次样式,它就 Reflow 或 Repaint 一次。一般来说,浏览器会把这样的操作积攒一批,然后做一次 Reflow ,这又叫异步 reflow 或增量异步 Reflow 。但是有些情况浏览器是不会这么做的,比如:Resize 窗口,改变了页面默认的字体,等。对于这些操作,浏览器会马上进行 Reflow 。----浏览器的渲染原理简介

3. 如何优化浏览器渲染过程

 


 

最佳实践
1、创建有效的 HTML 和 CSS ,不要忘记指定文档编码,比如<meta charset="utf-8">
2、CSS 样式应该包含在 <head>中, Javascript 脚本出现在 <body>末尾。
3、减少 CSS 嵌套层级和选择适当的选择器,可参考 如何提升 CSS 选择器性能

4、不要通过 JS 逐条修改 DOM 的样式,提前定义好 CSS 的 Class 进行操作。

提前定义好 CSS 的 Class
提前定义好 CSS 的 Class

5、尽量减少将 DOM 节点属性值放在循环当中,会导致大量读写此属性值。
6、尽可能的为产生动画的 HTML 元素使用 fixed 或 absolute 的 position ,那么修改他们的 CSS 是不会 Reflow 的。



文/阿树(简书作者)
原文链接:http://www.jianshu.com/p/e305ace24ddf

转载于:https://www.cnblogs.com/fighxp/p/6015612.html

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

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

相关文章

java中List Set Map使用

Testpublic void run(){ArrayList<String> list new ArrayList<String>();list.add( "美女");list.add( "帅哥");list.add( "芙蓉姐姐" );for (int i 0; i < list.size(); i) {String strlist.get(i);System. out.println(str);…

python免费开源工具推荐_年薪200万的程序员,推荐这10大Python免费开源工具!

原标题&#xff1a;年薪200万的程序员&#xff0c;推荐这10大Python免费开源工具&#xff01;毫无疑问&#xff0c;Python是最流行的语言之一&#xff0c;其成功的原因之一是它为科学计算提供了广泛的报道。 在这里&#xff0c;我们仔细研究用于机器学习和数据科学的十大Python…

通过Yeoman快速搭建AngularJS webapp应用的实践

这里主要记录关于使用yeoman快速构建angluarJS的前端应用的实践&#xff1a; 安装node、yeoman等过程略去 1、首页我们可以在公共的脚手架中找到自己想要的脚手架&#xff0c;官方脚手架库的地址 Yeoman generators: http://yeoman.io/generators/ 这里我们选择官方团队出的ang…

[Objective-C]编程艺术 笔记整理

看了《禅与 Objective-C 编程艺术》&#xff0c;发现不少平时不注意的或注意但没有系统总结的东西&#xff0c;特此记录一下。 这次没有整理完&#xff0c;后续更新会结合手里的一些其他资料整理。 新博客wossoneri.com传送门 完整的介绍看这两个链接Google开源项目风格指南禅与…

python大数据工程师 培训_大数据工程师学习之路

大数据的作用&#xff1a;发现过去事件的特征预测未来最优化选择职位划分&#xff1a;数据产品经理数据分析师->商业敏感性&#xff0c;产品经理的助手数据研发工程师数据挖掘工程师/数据科学家需要准备的技术知识&#xff1a;Linux操作系统与网络编程&#xff1a;进程/线程…

python序列

python序列 列表 python变量不存放值&#xff0c;之存放值的引用&#xff0c;所以列表中元素可以是不同类型 1.常用方法 1.1 增加元素 append,在末尾插入元素 extend&#xff0c;将一个列表整体插入到尾部 insert&#xff0c;将某个元素插入到特定位 /*&#xff0c;拼合…

前端资源(11)

移动端API 地址99移动端知识集合 https://github.com/jtyjty99999/mobileTech移动端前端开发知识库 https://github.com/AlloyTeam/Mars移动前端的一些坑和解决方法&#xff08;外观表现&#xff09; http://caibaojian.com/mobile-web-bug.html【原】移动web资源整理 http://w…

win10使用Composer-Setup安装Composer以及使用Composer安装Yii2最新版

1&#xff1a;下载 ca-bundle.crt和cacert.pem(见导航栏——文件) 将这两个文件放在php目录下 2:php.ini中添加上述两个文件的路径 curl.cainfoC:/xampp/php/ca-bundle.crtopenssl.cafileC:/xampp/php/ca-bundle.crt 写到最后一行就可以 3&#xff1a;下载Composer-Setup.exe h…

python离群点检测方法分几类_数据分析 第五篇:离群点检测

离群点(outlier)是指和其他观测点偏离非常大的数据点&#xff0c;离群点是异常的数据点&#xff0c;但是不一定是错误的数据点。确定离群点对于数据分析会带来不利的影响&#xff0c;比如&#xff0c;增大错误方差、影响预测和影响正态性。从散点图上可以直观地看到离群点&…

计算机网络TCP/IP

TCP/IP原理 看《图解TCP/IP》时做的笔记&#xff0c;记录一些感觉重要的东西…还没完&#xff0c;正在学&#xff0c;慢慢写 1.计算机网络的发展 2.OSI参考模型 3.传输方式分类 4.地址及网络的构成 5.TCP/IP协议的出现 6.TCP/IP分层模型及通信示例 7.数据链路层1 8.数…

hive求差集和交集

2019独角兽企业重金招聘Python工程师标准>>> 用的要求总数和统计数&#xff1a; 总数的概念是利用安卓ID&#xff0c;就以为这把两个月前的安卓ID统统的统计一遍&#xff0c;如果没有出现&#xff0c;恰好在今天出现了&#xff0c;那么当前的这个用户就是新增的…

python静态方法可以被继承吗_python 类的继承 实例方法.静态方法.类方法的代码解析...

这篇文章主要介绍了python 类的继承 实例方法.静态方法.类方法的代码解析,文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下dt{}class Denglu:def register(self,name,psd):if name.isalnum() and psd.isalnum():i…

渐变色--浏览器兼容性

说明&#xff1a; 1.360兼容模式效果不好 2.可以直接用不同浏览器打开这个页面查看效果 <!DOCTYPE html><html><head lang"en"> <meta charset"UTF-8"> <title></title> <style> body{ …

如何学习前端 转载

作者&#xff1a;小不了链接&#xff1a;https://zhuanlan.zhihu.com/p/23265155来源&#xff1a;知乎著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 鉴于时不时&#xff0c;有同学私信问我&#xff08;老姚&#xff0c;下同&#xff09;怎…

tcp前4字节消息长度_网络基础篇之TCP

​网络分层什么是 TCP TCP 是面向连接的、可靠的、基于字节流的传输层通信协议。- 面向连接&#xff1a;通过三次握手建立一对一的连接&#xff08; UDP 协议 可以一个主机同时向多个主机发送消息&#xff0c;即一对多&#xff09;&#xff1b;- 可靠的&#xff1a;通过序号、校…

使用Servlet实现用户注册

1、用户注册页面代码 <% page language"java" contentType"text/html; charsetUTF-8"pageEncoding"UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&q…

年轻人的第一篇V语言笔记

V语言极限学习 我听说V语言看文档半小时就能完全掌握&#xff1f;&#xff1f;&#xff1f;&#xff1f;以我的智商一小时掌握不了我就给各位科普一下广告法&#xff1f;&#xff1f;&#xff1f; 宇宙惯例hello world // first v code fn main(){printIn("hello world…

android studio运行手机时出错怎么解决_小程序 android ios h5解决方案

你现在开发android,ios,小程序用什么工具&#xff0c;怎么开发的&#xff1f;还在单个端的开发吗&#xff1f;今天我们主要讨论的是一次开发多端使用的技术&#xff0c;也是这两年比较流行的开发方向。现在的终端太多了&#xff0c;app两个端android和ios,小程序有微信&#xf…

Android SDK上手指南:应用程序数据

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请标明出处。 https://blog.csdn.net/chaoyu168/article/details/52996965 在本系列教程当中&#xff0c;我们将学习如何从零开始进行Android SDK开发。我们已经熟悉了Android应用程序的结构与基本组成元素&#xff0c;…

设计微服务架构需要解决的问题

问题&#xff1a; 划分服务的原则是什么服务之间选择何种轻量级的通信协议如何做到服务的独立部署如何确定使用何种编程语言?控制多语言带来的复杂度如何做到服务的去中心化如何解决大量微服务引入的运维成本转载于:https://www.cnblogs.com/fight-tao/p/5641286.html