最近在项目中遇到了一个奇怪的问题：在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. 怎么让composer加速(转)

    composer 在install的时候会做这几个事情: 去packagist.org中寻找对应需要的包的版本信息和下载地址 循环下载对应的包 解压安装对应的包 我们平时使用composer慢就可能在 ...

  2. 如何分页爬取数据--beautisoup

    '''本次爬取讲历史网站'''#!usr/bin/env python#-*- coding:utf-8 _*-"""@author:Hurrican@file: 分页爬 ...

  3. TensorFlow+实战Google深度学习框架学习笔记（11）-----Mnist识别【采用滑动平均，双层神经网络】

    模型:双层神经网络 [一层隐藏层.一层输出层]隐藏层输出用relu函数,输出层输出用softmax函数 过程: 设置参数 滑动平均的辅助函数 训练函数 x,y的占位,w1,b1,w2,b2的初始化 前 ...

  4. C++基础 (3) 第三天 构造函数 构造函数初始化列表 拷贝构造函数 析构函数 静态成员变量

    // 同类之间无私处 2构造函数 3析构函数 4构造函数的种类和析构函数的顺序 结论:析构函数的调用顺序,跟对象的构造顺序相反,谁先构造,谁最后一个被析构. 拷贝构造函数: 注意: 等号写在下面和写在 ...

  5. gradle多模块构建集成swagger

    1.首先说一下软件的版本:springboot:1.5.2:springcloud:D-SR1:swaager2:2.6.0:gradle:4.5.工程模块是分开的单独的entity,api,mapp ...

  6. Project Euler 30 Digit fifth powers

    题意:判断一个数 N 的每一位的5次方的和是否为其本身 ,求出所有满足条件的数的和 思路:首先设这个数 N 为 n 位,可以简单的判断一下这个问题的上界 10 ^ n <= 9 ^ 5 × n, ...

  7. 人脸识别中的harr特征提取（转）

    影响AdaBoost人脸检测训练算法速度很重要的两方面是特征选取和特征计算.选取的特征为矩特征为Haar特征,计算的方法为积分图. (1)Haar特征:     Haar特征分为三类:边缘特征.线性特 ...

  8. 工具-VMWARE技巧-桥接连外网-WIN7

    使用虚拟机wmware如何连接宿主主机 最简单的方法,使用直接连接主机的模式,然后把宿主机的IP更改为和虚拟机同一个网段的机器就行 但是既要上网,有要连接虚拟机,就需要使用桥接,在编辑->虚拟网 ...

  9. My SQL中show命令--MySQL中帮助查看

    My SQL中show命令--MySQL中帮助查看 学习了:http://hahaxiao.techweb.com.cn/archives/477.html 在mysql命令界面内,输入help或者? ...

  10. uva 10061(数学)

    题解:题目要在b进制下输出的是一个数字阶乘后有多少个零,然后输出一共同拥有多少位.首先计算位数,log(n)/log(b) + 1就是n在b进制下有多少位,而log有个公式就是log(M×N) = l ...