最近在项目中遇到了一个奇怪的问题：在google浏览器的调试窗口network下看到一个请求的时间一直是2s多，但是当我把这个请求单独拿出来执行的时候发现根本用不了2s，100多毫秒就完成了。最后再不断的调试下发现我在发送该请求（称为A）的同时发送了另一个请求（称为B），B请求因为其查询的数据少所以请求很快就回来了，B请求的回调先于A请求的回调执行。虽然B请求查询的数据少，但是其回调函数中进行了大量的dom操作（多达2s的时间），一直占用着js线程。导致A请求其实已经回来数据了，但是回调函数一直执行不了，最终导致A请求的时长达到了2s的假象。

该问题透露着几个至关重要的知识点：1.js是单线程执行的。2.异步。3.事件循环

这里都是js引擎执行机制的东西，之前一直懵懵懂懂的。下篇博客再总结下！

前端dom操作竟然使得http请求的时间延长了的更多相关文章

  1. 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

  2. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  3. 前端页面卡顿？或是DOM操作惹的祸，需优化代码

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

  4. Web前端开发最佳实践（13）：前端页面卡顿？可能是DOM操作惹的祸，你需要优化代码

    文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScri ...

  5. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  6. 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  7. 前端页面卡顿、也许是DOM操作惹的祸？

    界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...

  8. 前端最佳实践——DOM操作

    1.浏览器渲染原理 在讲DOM操作的最佳性能实践之前,先介绍下浏览器的基本渲染原理. 分为以下四个步骤: 解析HTML(HTML Parser) 构建DOM树(DOM Tree) 渲染树构建(Rend ...

  9. 前端javascript之BOM、DOM操作、事件

    BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...

随机推荐

  1. 在fedora「27」下，安装mysql 问题总结

    有时会出现,没有mysql.sock,不存在的问题, Can't connect to local MySQL server through socket '/var/lib/mysql/mysql. ...

  2. HDU-3015 Disharmony Trees [数状数组]

    Problem Description One day Sophia finds a very big square. There are n trees in the square. They ar ...

  3. Win 10安装mysql以及常见问题总结

    一.mysql免安装版本配置1.从官网下载安装包,解压后,在电脑属性环境变量的path中配置bin的路径 2.配置my.ini [mysql] # 设置mysql客户端默认字符集 default-ch ...

  4. [NOIP 2010] 关押罪犯 （二分+二分图判定 || 并查集）

    题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用"怨气值"( ...

  5. 【hiho一下 第九周】 状态压缩·二

    [题目链接]:http://hihocoder.com/problemset/problem/1048 [题意] [题解] 按从左到右然后从上到下的顺序; 依次枚举每个格子是竖条还是横条; 然后在搜索 ...

  6. @value 注解获取属性文件中的值

    一.属性文件 db.properties name=jack 二.配置文件 applicationContext.xml <!-- 加载配置文件,该节点只能存在一个,所以用 * ,加载所有属性文 ...

  7. BA-Siemens-时间表

    问题1:弹出了subsystem:atom Identifier 0000000023的错误对话框,此问题目前不知道如何处理,先攒着吧.

  8. BA-siemens-apogee总线不稳定解决方法

    状况一:BLN下的火车头在线,但是下面的模块(包括UEC或者PPM)全部掉线 尝试方法: 使用挨个DDC箱断线的方法测试总线是否上线(可以解决由于总线短路引起的总线故障,施工中总线压冷压端子的话就不容 ...

  9. CSS BFC学习笔记

    BFC,全称是Block Formatting Context,块级格式化上下文. 详细是什么,能够理解为页面元素的一种特性.触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果. 触发 ...

  10. spark中的广播变量broadcast

    Spark中的Broadcast处理 首先先来看一看broadcast的使用代码: val values = List[Int](1,2,3) val broadcastValues = sparkC ...