前端dom操作竟然使得http请求的时间延长了
最近在项目中遇到了一个奇怪的问题:在google浏览器的调试窗口network下看到一个请求的时间一直是2s多,但是当我把这个请求单独拿出来执行的时候发现根本用不了2s,100多毫秒就完成了。最后再不断的调试下发现我在发送该请求(称为A)的同时发送了另一个请求(称为B),B请求因为其查询的数据少所以请求很快就回来了,B请求的回调先于A请求的回调执行。虽然B请求查询的数据少,但是其回调函数中进行了大量的dom操作(多达2s的时间),一直占用着js线程。导致A请求其实已经回来数据了,但是回调函数一直执行不了,最终导致A请求的时长达到了2s的假象。
该问题透露着几个至关重要的知识点:1.js是单线程执行的。2.异步。3.事件循环
这里都是js引擎执行机制的东西,之前一直懵懵懂懂的。下篇博客再总结下!
前端dom操作竟然使得http请求的时间延长了的更多相关文章
- 6、前端--DOM操作(查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this)
DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...
- 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- 前端页面卡顿?或是DOM操作惹的祸,需优化代码
文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...
- Web前端开发最佳实践(13):前端页面卡顿?可能是DOM操作惹的祸,你需要优化代码
文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScri ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- 前端页面卡顿、也许是DOM操作惹的祸?
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...
- 前端最佳实践——DOM操作
1.浏览器渲染原理 在讲DOM操作的最佳性能实践之前,先介绍下浏览器的基本渲染原理. 分为以下四个步骤: 解析HTML(HTML Parser) 构建DOM树(DOM Tree) 渲染树构建(Rend ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
随机推荐
- 面试官:精通 Mybatis?请回答下这几个问题
点关注,不迷路:持续更新Java架构相关技术及资讯热文!!! Mybatis是现在非常主流的持久层框架,虽然平时用的多,但是其中几个细节的问题,能说出个所以然来不? 一.最常见,参数中 #{} 和 $ ...
- Ubuntu 18.04 安装 Xfce桌面和VNC的方法
首先安装Xfce4桌面环境.Xfce4是在Unix和Unix-like(Linux, FreeBSD)上运行的开源桌面环境,其特点是快速,轻量,同时拥有美观的交互界面,易于使用. Xfce4的安装十分 ...
- 路飞学城Python-Day171
Evernote Export 线性结构: python的列表操作 列表是如何存储的:顺序存储的,是一块连续的内存,内存是一堆格子,列表是一串连续的编号 32位机器上一个整数占4个字节 数组和列表有2 ...
- 代码检查工具sonarqube介绍及使用
亲测有效 环境:springboot+gradle+jdk1.8+sonarqube7.4 一.说明: SonarQube为静态代码检查工具,采用B/S架构,帮助检查代码缺陷,改善代码质量,提高开发速 ...
- [1] first day
一.几个工具包 [1]pandas(数据分析工具) https://zhuanlan.zhihu.com/p/33230331 https://zhuanlan.zhihu.com/p/2501351 ...
- CentOS 笔记(三) 目录结构
理解CentOS 目录结构 首次登录进入,应该是进入了,run文件夹 通过 cd ../ 进入了,最根节点 通过 ls 显示全部文件夹 通过 pwd 查看当前目录 参考: https://www ...
- EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图
使用EasyUI时,有个经常遇到的问题,页面还没有渲染完成的时候,就展现了. 刚刚开始很混乱,等加载完成后,就好了. 参考这篇文章http://blog.csdn.net/zheng0518/arti ...
- Mongodb学习总结(1)——常用NoSql数据库比较
虽然SQL数据库是非常有用的工具,但经历了15年的一支独秀之后垄断即将被打破.这只是时间问题:被迫使用关系数据库,但最终发现不能适应需求的情况不胜枚举. 但是NoSQL数据库之间的不同,远超过两 SQ ...
- CAD-强电常用符号集
- BZOJ4031——HEOI小z的房间
题意:求某网格图生成树个数,对1e9取模 题解:题目是裸的Matrix-Tree定理,这不是我要说的重点,重点是对于这个取模的处理. 由于这不是个质数,所以不能直接乘逆元来当除法用.直接高斯消元肯定是 ...