关于回流

关于回流

• 引起因素

1 集合属性变化
2 及时获得DOM元素的位置
ffsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、
scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、
clientWidth、clientHeight

• 减少回流的方法
  1 设置className
  2 dispaly: none—修改—disPlay:block
  3 documentFragment
  4 浏览器得flush队列，会等任务队列任务多起来，或者一定时间才更新一次，但是并不是所有浏览器都支持，还有获取Dom及时性的操作，flush队列不起作用

优化之-css解析器优化

• css选择符是从右向左开始匹配的，而不是从左向右

#test li(浏览器必须遍历每个li元素，然后确认每个li的父元素是否为#test)
li #test
.test_li(匹配到即可)

• css优化

1 不要使用通配符
2 使用继承属性，避免重复匹配
3 减少嵌套

• css阻塞问题

css加载的时候，不会阻碍dom的解析，但是会阻碍dom的渲染（白屏）
同时会阻碍js语句的执行
因为link只能放在head里面

js阻塞

• 为什么会阻塞？

如果js引擎执行代码的时候，删除了Dom，而这个时候渲染引擎继续执行，却发现要渲染的Dom不见了
因为不知道js会做什么，不阻止后续操作，可能会引起混乱 那么健康我我不就基本hi032q

所以遇到js的时候，浏览器将控制权由渲染引擎切换到js引擎

• 解决js阻塞问题

// 阻塞浏览器，只有js加载完了才能做其他的
<script src="index.js"></script>


//加载异步，不影响后面执行，但是加载完成后立即执行是同步的，又会继续阻塞
// async这种不能保证按照加载顺序执行
<script async src="index.js"></script>
<script async src="index1.js"></script>


// 加载异步，不影响后面执行，而且可以保证按照引入顺序执行
// 但是是在DOMContentLoaded后执行
<script defer src="index.js"></script>

• DOMContentLoaded

文档解析完毕，页面重新渲染，并且页面引用的js同步代码执行完毕
页面从上到下加载解析完毕（图片和视频可以还没下载完）


这里理解浏览器解析html

主线程： 解析html文档
下载线程： 下载资源

• DOMContentLoaded与async defer关系

A <scirpt async src='xxx'>
B <scirpt async src='xxx'>
1、只要html解析完就触发DOMContentLoaded
2、 js下载完就执行，不用等html解析完在执行，所有最好不要操作dom（有可能dom还没解析，就获取会失败）
async不保证执行顺序，所以A和B不要?️依赖，而且

A:<scirpt defer='defer' src='xx'>
B:<scirpt defer='defer' src='xx'>
1 、要等js下载完后，执行完才会触发：DOMContentLoaded
2、等html解析完以后才执行js，不是js下载完就执行
3、AB会按照顺序执行


注意： 
同步js: 必须下载完后执行完才会继续解析html
异步js: 不阻碍继续解析，但是下载完以后可能立马立马执行（分async defer)

css文件下载不会阻碍其他文件下载
js下载会阻碍其他文件下载

现代浏览器，预解析，js和css下载和位置无关，只是不会执行script中的内容

https://www.haorooms.com/post/web_xnyh_jscss

• load 事件的触发

完全加载的页面，包含所有的数据
DOM 结构中的 js、css、图片，以及 js 异步加载的 js、css 、图片都加载完成之后，才会触发 load 事件。

解析html文档总结

外链css不会影响后面dom构建，但是会阻碍渲染，即css没下载完毕，页面白屏，所以css在head的link中就引入，首先加载，避免白屏

js不设置async和defer,会阻碍继续解析，直到道歉js下载完，并且执行完毕才会继续从上往下解析，所以一般js放在body后面
但是js并不会阻碍后面资源的下载