关于web性能一些特性汇总

关于web性能一些特性汇总

DOMContentLoaded & load

load事件是window对象上的事件。指的是网页资源已经加载完毕(包括但不限于DOM、图片、音频、脚本、插件资源以及CSS)。

DOMContentLoaded事件是document对象上的事件。指的是DOM已经加载完毕。IE中有个私有的事件onreadystatechange事件跟这个标准事件类似。

因此DOMContentLoaded事件都会比load事件提前触发(jQuery重点ready event 就是兼容各种情况的DOMContentLoaded实现,感觉DOMContentLoaded时JS脚步也跑完了,毕竟放在body前)。

event.target & event.currentTarget & event.delegateTarget

在事件冒泡过程中的当前DOM元素。

触发事件的DOM元素。

绑定了当前正在调用jQuery 事件处理器的元素。

async & defer (script TAG)

async 异步下载,下载后立即执行

defer 异步下载,按顺序执行,执行区间大致在DOMContentLoaded 和window.load 之间

FPS(Frames Per Second):每秒传输帧数

正如Andrey Kosyakov Chromium 的博客中提到的,即使你的程序没有很多动画,帧的概念也是有用的,因为浏览器在处理输入事件时会生成重复动作的序列。如果你在一帧中留有足够的时间处理这些事件,就会使你的程序看上去有更好的响应性,这意味着更好的用户体验。

如果我们的目标是60fps, 那么最多有 16.66ms 去做所有的事情。这个时间并不多,所以尽可能从动画中挤出时间来提高性能还是很重要的。

CSS阻塞与JS阻塞

  • JS阻塞

所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。
直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。

由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。

嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,

2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

  • CSS阻塞

CSS本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6下CSS都是阻塞加载)

当CSS后面跟着嵌入的JS的时候,该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面,就不会出现阻塞的情况了。

根本原因:因为浏览器会维持html中css和js的顺序,样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载,所以就会出现上面CSS阻塞下载的情况。

CSS匹配规则

b2b7c07bd7f5af231cdeaa0c3804a686_m.jpg?_=3300797

  • HTML 经过解析生成 DOM Tree(这个我们比较熟悉);而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。Render Tree 中的元素(WebKit 中称为「renderers」,Firefox 下为「frames」)与 DOM 元素相对应,但非一一对应:一个 DOM 元素可能会对应多个 renderer,如文本折行后,不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视,比如 display:none 的元素。
  • 在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 renderer。对于每个 DOM 元素,必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的,在遍历 DOM Tree 时,从 Style Rules 中去寻找对应的 selector。
  • 因为所有样式规则可能数量很大,而且绝大多数不会匹配到当前的 DOM 元素(因为数量很大所以一般会建立规则索引树),所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。
  • 如果正向解析,例如「div div p em」,我们首先就要检查当前元素到 html 的整条路径,找到最上层的 div,再往下找,如果遇到不匹配就必须回到最上层那个 div,往下再去匹配选择器中的第一个 div,回溯若干次才能确定匹配与否,效率很低。
  • 逆向匹配则不同,如果当前的 DOM 元素是 div,而不是 selector 最后的 em,那只要一步就能排除。只有在匹配时,才会不断向上找父节点进行验证。
  • 但因为匹配的情况远远低于不匹配的情况,所以逆向匹配带来的优势是巨大的。同时我们也能够看出,在选择器结尾加上「*」就大大降低了这种优势,这也就是很多优化原则提到的尽量避免在选择器末尾添加通配符的原因。

文档说明

此文档的所有资源都是来源网络仅在此做了分类整理备忘持续更新,所有精华之处并非原创,所有原创之处并不优秀。

1473308168_167070.png

参考链接

  • js中的window.onload和jquery中的load区别的讲解
  • CSS阻塞与JS阻塞
  • script之defer&async
  • 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
  • Sizzle引擎
  • markdown

转载于:https://www.cnblogs.com/advence-liz/p/6101551.html

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

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

相关文章

(五)门级电路低功耗设计优化

(1)门级电路的功耗优化综述 门级电路的功耗优化(Gate Level Power Optimization,简称GLPO)是从已经映射的门级网表开始,对设计进行功耗的优化以满足功耗的约束,同时设计保持其性能,即满足设计规则和时序的要…

Spring3向Spring4升级过程中quartz修改

为什么80%的码农都做不了架构师?>>> 问题 nested exception is org.springframework.beans.factory.CannotLoadBeanClassException: Cannot find class [org.springframework.scheduling.quartz.CronTriggerBean] for bean with name ... 原因 org.spri…

EasyUI--messager

1.    alert 方法 <script type"text/javascript">$( function(){$.messager.alert("调用messager","文本内容") ;});</script> 这里还可以通过icon添加相应的图标及info加入回调函数 <script type"text/javascript&quo…

Redis学习第八课:Redis高级实用特性(一)

Redis高级实用特性 注&#xff1a;我学习的环境是vmware7.1 ubantu10.10 redis 3.0.2 1、安全性 设置客户端连接后进行任何其他指定前需要的密码。因为redis速度相当快&#xff0c;一个外部用户可以在一秒钟进行很多次的密码尝试&#xff0c;这就需要设定非常强大的密码来防止…

分布式缓存的面试题9

1、面试题 如何保证缓存与数据库的双写一致性&#xff1f; 2、面试官心里分析 你只要用缓存&#xff0c;就可能会涉及到缓存与数据库双存储双写&#xff0c;你只要是双写&#xff0c;就一定会有数据一致性的问题&#xff0c;那么你如何解决一致性问题&#xff1f; 3、面试题剖析…

ROS与navigation教程——概述

navigation是ROS的二维导航功能包&#xff0c;简单来说&#xff0c;就是根据输入的里程计等传感器的信息流和机器人的全局位置&#xff0c;通过导航算法&#xff0c;计算得出安全可靠的机器人速度控制指令。 代码库&#xff1a;https://github.com/ros-planning/navigation 代…

【设计模式】单例模式 Singleton Pattern

通常我们在写程序的时候会碰到一个类只允许在整个系统中只存在一个实例&#xff08;Instance&#xff09; 的情况&#xff0c; 比如说我们想做一计数器&#xff0c;统计某些接口调用的次数&#xff0c;通常我们的数据库连接也是只期望有一个实例。Windows系统的系统任务管理器…

进程及线程通信总结

上文我们介绍了如何建立一个简单的多线程程序&#xff0c;多线程之间不可避免的需要进行通信 。相比于进程间通信来说&#xff0c;线程间通信无疑是相对比较简单的。 首先我们来看看最简单的方法&#xff0c;那就是使用全局变量&#xff08;静态变量也可以&#xff09;来进行通…

ROS multi-master——multimaster_fkie配置

多主站ROS配置和mutimaster_fkie ROS版本&#xff1a;kinetic 操作系统&#xff1a;Ubuntu 16.04。 multimaster_fkie&#xff1a;github 1网络配置 1.1路由器 设置无线路由器并连接两台计算机/机器人。为这两台计算机设置静态IP地址。相互测试ping命令和ssh。 1.2主机 …

Docker入门

1. Docker简介: docker是一个基于LXC的高级容器引擎。简单地说&#xff0c;docker是一个轻量级的虚拟解决方案&#xff0c;或者说它是一个超轻量级的虚拟机&#xff08;容器&#xff09;。 Docker是一个开源的引擎&#xff0c;可以轻松的为任何应用创建一个轻量级的、可移植的、…

Gmapping——从原理到实践

概述 在SLAM中&#xff0c;机器人位姿和地图都是状态变量&#xff0c;我们需要同时对这两个状态变量进行估计&#xff0c;即机器人获得一张环境地图的同时确定自己相对于该地图的位置。我们用x表示机器人状态&#xff0c;m表示环境地图&#xff0c;z表示传感器观测情况&#xf…

【机器学习经典算法源码分析系列】-- 逻辑回归

1.逻辑回归&#xff08;Logistic Regression&#xff09;又常被成为“逻辑斯蒂回归”&#xff0c;实质上是一个二元分类问题。 逻辑回归代价函数&#xff1a; 代价函数导数&#xff1a; Matlab实现&#xff1a; 采用matlab中自带的无约束最小化函数fminunc来代替梯度下降法&…

ROS——不同版本间ROS进行通信

在相同版本间的ROS进行通信不在赘述了&#xff0c;修改/etc/hosts文件即可。 最近项目遇到在Ubuntu16.04 与Ubuntu18.04两个系统间进行ROS通信&#xff0c;ROS版本分别为Kinetic和Melodic。配置网络后&#xff0c;两边都能够ping通&#xff0c;但是在获取ros数据是&#xff0c…

大数据开发实战:数据流图及相关数据技术

1、大数据流程图 2、大数据各个环节主要技术 2.1、数据处理主要技术 Sqoop&#xff1a;&#xff08;发音&#xff1a;skup&#xff09;作为一款开源的离线数据传输工具&#xff0c;主要用于Hadoop(Hive) 与传统数据库&#xff08;MySql,PostgreSQL&#xff09;间的数据传递。它…

跨时钟域电路设计——亚稳态及双锁存器

一、同步电路 定义&#xff1a;电路中所有受时钟控制的单元&#xff0c;全部由一个统一的时钟控制。 优点&#xff1a;在同步设计中&#xff0c;EDA工具可以保证电路系统的时序收敛&#xff0c;避免电路设计中的竞争冒险。 缺点&#xff1a;时钟树综合需要加入大量延迟单元&…

跨时钟域电路设计——单bit信号

前面提到了简单的双电平锁存器&#xff0c;下面是一些单bit同步电路。 一、慢时钟域向快时钟域 边沿检测同步器 将慢时钟域的脉冲搬移并缩小为快时钟域的脉冲。 既可以检测上升沿&#xff0c;也可以检测下降沿。 如上图&#xff0c;慢时钟下一个有效脉冲的最短周期为慢时钟的…

C语言100例01 PHP版(练习)

题目&#xff1a;有1、2、3、4个数字&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;都是多少&#xff1f; 程序分析&#xff1a;可填在百位、十位、个位的数字都是1、2、3、4。组成所有的排列后再去 掉不满足条件的排列。 代码&#xff1a; 1 for($i1;$i&l…

跨时钟域电路设计——结绳法

信号从快时钟域到慢时钟域过渡时&#xff0c;慢时钟可能无法对快时钟变化太快的信号进行采样。 之前的同步器法对两个时钟间的关系有要求&#xff0c;结绳法适用于任何时钟域之间的过渡。 结绳法的原理是将快时钟信号的脉冲周期延长&#xff0c;等到慢时钟周期采样后再“解绳”…

我之理解---计时器setTimeout 和clearTimeout

今天在写个图片切换的问题 有动画滞后的问题&#xff0c;才动手去查setTimeout 和clearTimeout。之前写的图片播放器也有类似的问题&#xff0c;有自动start按钮 和stop按钮&#xff0c; 其他都正常&#xff0c;问题出在每次多次快速的点击start按钮时&#xff0c;图片播放的速…

关于二维码分块上色(彩色二维码)的算法研究

原文:关于二维码分块上色&#xff08;彩色二维码&#xff09;的算法研究众所周知&#xff0c;二维码通常是黑白的&#xff0c;而且是由若干个长方形或正方形小块平铺而成。但从人们的审美角度来看&#xff0c;常见的黑白二维码不免让人审美疲劳。本文试着从分块上色的角度对二维…