js较深入的知识点

  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

 

posted @ 2019-02-28 16:01  马玲俊  阅读(442)  评论(0编辑  收藏  举报