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中定义数据修改和操作的业务逻辑. ...
随机推荐
- C/C++中容器vector用法
C++中数组非常坑,有没有相似Python中list的数据类型呢?相似的就是vector!vector 是同一种类型的对象的集合,每一个对象都有一个对应的整数索引值. 和 string 对象一样.标准 ...
- 在Linux系统安装Nodejs 最简单步骤
1.去官网下载和自己系统匹配的文件: 英文网址:https://nodejs.org/en/download/ 中文网址:http://nodejs.cn/download/ 通过 uname -a ...
- df、du命令
EXT3 最多只能支持32TB的文件系统和2TB的文件,实际只能容纳2TB的文件系统和16GB的文件 Ext3目前只支持32000个子目录 Ext3文件系统使用32位空间记录块数量和i-节点数量 ...
- mySQL查看运行的进程
查看运行的进程 show processlist kill id 杀掉进程
- C# 查看EF生成的SQL语句
用sqlsever追踪最后的sql语句. 返回IQueryable<T>类型, 里面封装的就是生成的SQL脚本,设置断点queryable = DataContext.Set<T&g ...
- 如何用Eclipse创建一个JavaSwing的项目
创建之前必须先给开发工具安装WindowBuilder插件(安装方法可自行百度) 方式一: 创建项目 new--other--WindowBuilder--SWT Designer----SWT/JF ...
- git总结二、关于分支上——好好认识下分支是怎么回事
同样需要先来明确两件事: HEAD指针指向的是当前分支 分支(master, dev)指向的是最新的提交 一开始,git 中只有一个master分支,严格来讲,HEAD不是指向提交而是指向master ...
- React笔记:快速构建脚手架(1)
1. Create React APP React官方提供的脚手架工程Create React App:https://github.com/facebook/create-react-app Cre ...
- 2019中山大学程序设计竞赛 Triangle
今天水了一发hdu上的中山校赛 这个题交了将近十遍才过...... 就是说给 n 个木棍,如果能找出3个能组成三角形的木棍就输出yes 反之输出no 乍一看很简单 一个排序遍历一遍就好了 但是n值太大 ...
- 调用webservice帮助类
using System;using System.CodeDom;using System.CodeDom.Compiler;using System.Collections.Generic;usi ...