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

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较深入的知识点的更多相关文章

  1. JS中常用开发知识点

     JS中常用开发知识点 1.获取指定范围内的随机数 2.随机获取数组中的元素 3.生成从0到指定值的数字数组 等同于: 4.打乱数字数组的顺序 5.对象转换为数组 //注意对象必须是以下格式的才可以通 ...

  2. js的form基础知识点

    在HTML 中,表单是由<form>元素来表示的,而在JavaScript 中,表单对应的则是HTMLForm-Element 类型.HTMLFormElement 继承了HTMLElem ...

  3. 关于js的一些关键知识点(call,apply,callee, caller,clourse,prototypeChain)

    可能不少学习javascript在使用call,apply,callee时会感到困惑,以下希望对于你有所帮助: 1.~~~call ,apply是函数(函数对象)的方法:callee是函数argume ...

  4. 关于echarts、layer.js和jqGrid的知识点

    使用echarts和layer.js直接去官方文档,能解决大部分问题. 但是有些问题,解释不够清楚,在这里记录一下. 1.echarts的使用 第一点:关于echarts的labelline在数据为零 ...

  5. js作用域零碎的知识点,不同的script块,虽然同是全局变量

    如下代码,第一次弹出a,因为解析器里找到var a,赋予a变量undefined,弹出undefined <!DOCTYPE html> <html> <head> ...

  6. js 关于定时器的知识点。

    Js的同步和异步 同步:代码从上到下执行. 异步:每个模块执行自己的,同时执行. js本身就是同步的,但是需要记住四个地方是异步. Js的异步   1.定时器  2.ajax   3事件的绑定  4. ...

  7. js初级DOM&BOM知识点总结

    第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...

  8. js中一些小知识点总结--持续更新

    以下知识点来自于编写高质量代码-改善JavaScript程序的188个建议,只用于自我知识的补充. 一.NaN 1.NaN是一个特殊的数量值,不表示一个数字,尽管下面的代码仍然是返回类型为number ...

  9. 【前端芝士树】Vue.js面试题整理 / 知识点梳理

    [前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...

随机推荐

  1. maven打包如何跳过测试

    Maven打包如何跳过测试?正常来说,不应该这样做,因为测试可以避免很多麻烦排除一些不必要的错误,前提是测试足够规范,这里主要指junit测试,如果junit测试有问题的话,将会直接影响到mvn in ...

  2. bzoj4892 [TJOI2017]DNA

    bzoj4892 [TJOI2017]DNA 给定一个匹配串和一个模式串,求模式串有多少个连续子串能够修改不超过 \(3\) 个字符变成匹配串 \(len\leq10^5\) hash 枚举子串左端点 ...

  3. Elasticsearch 通关教程(六): 自动发现机制 - Zen Discoveryedit

    发现方式 Zen discovery是内建的.默认的.用于Elasticsearch的发现模块.它提供了单播和基于文件的发现,可以通过插件扩展到支持云环境和其他形式的发现. Zen Discovery ...

  4. Django1-HTTP协议介绍

    何为http协议(Hypertext Transfer Protocol,超文本传输协议)? 所谓协议,就是指双方遵循的规范.http协议,就是浏览器和服务器之间进行“沟通”的一种规范.我们在看空间, ...

  5. Mongo集群Java连接时UnknownHostException错误

    今天在 Java 连接 Mongo 集群时报了一个超时的错误,但是在本地客户端连接单节点的时候却能连上,具体报的错误如下: Caused by: com.mongodb.MongoTimeoutExc ...

  6. 【DeepLearning】深入理解dropout正则化

    本文为转载,作者:Microstrong0305 来源:CSDN 原文:https://blog.csdn.net/program_developer/article/details/80737724 ...

  7. 特殊计数序列——第一类斯特林(stirling)数

    第一类斯特林数 在这里我因为懒所以还是用\(S(n,m)\)表示第一类斯特林数,但一定要和第二类斯特林数区分开来 递推式 \(S(n,m)=S(n-1.m-1)+S(n-1,m)*(n-1)\) 其中 ...

  8. python学习日记(OOP数据封装)

    class Student(object): def __init__(self,name,score): self.name = name self.score = score li = Stude ...

  9. freeCodeCamp中一些有趣的方法

    1. 过滤对象(找到数组中(collection)与之(source)匹配对象,过滤掉数组中(collection)不匹配对象) function where(collection, source) ...

  10. [HNOI/AHOI2018]游戏

    题目描述 https://lydsy.com/JudgeOnline/upload/201804/%E6%B9%96%E5%8D%97%E4%BA%8C%E8%AF%95%E8%AF%95%E9%A2 ...