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中定义数据修改和操作的业务逻辑. ...
随机推荐
- idea 右键无java class选项
项目中新建module之后,要在该目录下新增java Class文件,右键——>New发现无Java Class选项. File –Project Structure或者ctrl+alt+shi ...
- 【vue】iView-admin2.0动态菜单路由
vue项目实现动态路由有俩种方式 一.前端在routers中写好--所有--路由表 <前端控制路由>,登录时根据用户的角色权限来动态的显示菜单路由 二.前端通过调用接口请求拿到当前用户-- ...
- Springboot + Atomikos + Druid + Mysql 实现JTA分布式事务
DataSource 配置 package com.cheng.dynamic.config; import java.util.Properties; import javax.sql.DataSo ...
- 发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存
AppendFileVersion 是一个VSIX插件支持vs2015意以上版本 是我用来发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存 分享给大家! download ...
- protobuf使用详解
https://blog.csdn.net/skh2015java/article/details/78404235 原文地址:http://blog.csdn.net/lyjshen/article ...
- Node.js中的console.log()输出彩色字体
转自:https://www.jianshu.com/p/cca3e72c3ba7 console.log('\033[42;30m DONE \033[40;32m Compiled success ...
- PHP 高级工程面试题汇总
PHP高级工程面试题汇总(2018.05) 1.给你四个坐标点,判断它们能不能组成一个矩形,如判断([0,0],[0,1],[1,1],[1,0])能组成一个矩形. 勾股定理,矩形是对角线相等的四边形 ...
- codeforces305A
Strange Addition CodeForces - 305A Unfortunately, Vasya can only sum pairs of integers (a, b), such ...
- cyq.data 常见使用方法
配置数据库链接:(这只是其中一种方式) AppConfig.DB.CommandTimeout = 800; AppConfig.DB.DefaultConn = "数据库链接地址" ...
- 快速理解js中的call,apply的作用
今天被人问到js中的call,apply的区别和用途,解释了一番后,想到之前在逼乎上看到一位小伙伴生动形象的解释 本身不难理解,看下MDN就知道了,但是不常用,遇到了,还要脑回路回转下.或者时间长了, ...