js较深入的知识点
将html解析为dom树;
将css解析为cssom;
结合DOM树和CSSOM树,生成一棵渲染树(Render Tree);
生成布局(flow),即将所有渲染树的所有节点进行平面合成;
将布局绘制(paint)在屏幕上
某些元素的几何信息(位置和大小)发生改变时,浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。
重排又分为:
全局范围:从根节点html开始对整个渲染树进行重新布局。
局部范围:对渲染树的某部分或某一个渲染对象进行重新布局
尽量避免全局范围的重排。 某些元素的外观,例如颜色,但是几何信息不变,则会发生重绘。 重排必定会发生重绘,而重绘不一定会重排。
优化方法:
读写样式分离。不然一读一写重复进行会导致不断重排div.style.left = '10px';
缓存布局信息。
离线改变dom。 先设置为display:none;再改变样式
position设置为absolute和fixed 避免全局范围的重排
优化动画。使用css3的动画,或者canvas动画,底层会启用GPPU加速,擅长渲染图形

3.js为什么是单线程的?为什么要又异步?js有哪些实现异步的方法?宏任务和微任务怎么理解?
如果现在有2个线程,process1 process2,由于是多线程的JS,所以他们对同一个dom,同时进行操作process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令。
如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。定时器/回调函数/事件监听/promise/async await js的异步任务队列分为宏任务和微任务两种:
对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验
宏任务: script的整体代码,setTimeout, setInterval
微任务: process.nextTick, Promise, async实质上是函数包装了return Promise()
一个宏任务的执行完毕后先执行此过程收集的微任务,执行完了之后才执行第二个宏任务
参考一个面试题理解https://mp.weixin.qq.com/s/2fnJADWMneTg6Zxl_oVahA
js较深入的知识点的更多相关文章
- JS中常用开发知识点
JS中常用开发知识点 1.获取指定范围内的随机数 2.随机获取数组中的元素 3.生成从0到指定值的数字数组 等同于: 4.打乱数字数组的顺序 5.对象转换为数组 //注意对象必须是以下格式的才可以通 ...
- js的form基础知识点
在HTML 中,表单是由<form>元素来表示的,而在JavaScript 中,表单对应的则是HTMLForm-Element 类型.HTMLFormElement 继承了HTMLElem ...
- 关于js的一些关键知识点(call,apply,callee, caller,clourse,prototypeChain)
可能不少学习javascript在使用call,apply,callee时会感到困惑,以下希望对于你有所帮助: 1.~~~call ,apply是函数(函数对象)的方法:callee是函数argume ...
- 关于echarts、layer.js和jqGrid的知识点
使用echarts和layer.js直接去官方文档,能解决大部分问题. 但是有些问题,解释不够清楚,在这里记录一下. 1.echarts的使用 第一点:关于echarts的labelline在数据为零 ...
- js作用域零碎的知识点,不同的script块,虽然同是全局变量
如下代码,第一次弹出a,因为解析器里找到var a,赋予a变量undefined,弹出undefined <!DOCTYPE html> <html> <head> ...
- js 关于定时器的知识点。
Js的同步和异步 同步:代码从上到下执行. 异步:每个模块执行自己的,同时执行. js本身就是同步的,但是需要记住四个地方是异步. Js的异步 1.定时器 2.ajax 3事件的绑定 4. ...
- js初级DOM&BOM知识点总结
第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...
- js中一些小知识点总结--持续更新
以下知识点来自于编写高质量代码-改善JavaScript程序的188个建议,只用于自我知识的补充. 一.NaN 1.NaN是一个特殊的数量值,不表示一个数字,尽管下面的代码仍然是返回类型为number ...
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...
随机推荐
- Linux新手随手笔记
RPM通过将安装规则与源代码打包到一起,来降低软件的安装难度 yum 通过将大量的常用RPM软件存放在一起,解决软件包之间的依赖关系,进一步降低软件的安装难度 rhel 5\6 init rhel 7 ...
- python 提取pdf文字
安装pdfminer 库 windows 下安装pdfminer3k pip install pdfminer3k Liunx 下安装pdfminer pip install pdfminer 代码 ...
- Git使用注意事项
第一次用git时push时,突然想到我没有设置ssh key,却也可以push代码到自己仓库,那我本地登陆的账号Git是存在哪儿了呢? Git本地账户凭证管理 在第一次push到远程仓库时,git会提 ...
- postman Installation has failed: There was an error while installing the application. Check the setup log for more information and contact the author
Error msg: Installation has failed: There was an error while installing the application. Check the s ...
- windows部署jenkins持续集成maven测试项目不能访问测试报告
买了一台阿里云的服务器用于练习maven test项目,系统版本wiondows server 2012,将jenkins war包部署在Tomcat服务器上,项目构建后,生成的报告在C:\Windo ...
- c# 串口SerialPort
创建SerialPortFun类 using System; using System.Collections.Generic; using System.Linq; using System.Tex ...
- Scrapy:配置日志
Scrapy logger 在每个spider实例中提供了一个可以访问和使用的实例,方法如下: import scrapy class MySpider(scrapy.Spider): name = ...
- Alan Turing的纪录片观后感
清明假期,火车上闲着,上B站看了图灵的纪录片 好吧,感想就两个词,数字化 和 自动化
- maven:私服的相关配置
添加到settings.xml中 <server> <id>releases</id> <username>admin</username> ...
- UNION的使用方法 (表与表直接数据和在一起的示例)
SELECT o.CATEGORY CATEGORY,o.KEY_WORK KEY_WORK FROM BO_EU_KEY_WORK wo RIGHT OUTER JOIN BO_EU_WORK_ON ...