2020-09-11 html的video的触发顺序 + css的是stacking context + JS的DOM节点的操作如何优化 + 软技能的业务与技术冲突时

2020-09-11 题目来源:http://www.h-camel.com/index.html

[html] H5中video的事件的触发顺序是怎样的?

  1. onloadstart
  2. ondurationchange
  3. onloadedmetadata
  4. onloadeddata
  5. onprogress
  6. oncanplay 用户可以开始播放视频/音频时触发
  7. oncanplaythrough

[css] 如何创建stacking context?

stacking context 层叠上下文

stacking order 层叠顺序

如何创建层叠上下文:::

根元素 (HTML)

z-index为数值的定位元素

css3的属性

一个 z-index 值不为 "auto"的 flex 项目 (flex item),其子元素为层叠上下文元素

opacity 属性值小于 1 的元素

transform 属性值不为 "none"的元素

mix-blend-mode 属性值不为 "normal"的元素

filter值不为“none”的元素

perspective值不为“none”的元素

isolation 属性被设置为 "isolate"的元素

position: fixed

在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值 -webkit-overflow-scrolling 属性被设置 "touch"的元素

层级上下文的顺序实现:

z-index为负值 < display:block; < float浮动 < display: inline-block|inline; < z-index: 0|auto; < z-inde为正值

摘自:https://www.jianshu.com/p/8645b29f96b6

[js] 请说说DOM节点的操作如何优化?

1.批量增加DOM 尽量使用innerHTML添加,而不是appendChild;

用innerHTML方式添加时,一定不要在循环中使用 innerHTML += 的方式添加,这样反而会使速度减慢; 而是应该中间用array缓存起来,循环结束后调用 xx.innerHTML = array.join(‘’);的方式,或者至少保存到string中再插到innerHTML中。速度会提升一倍。

2.单个增加dom 指的是新节点加载到一个内容不断变化的节点,尽量使用 append

3.创建DOM节点,使用createElement方式,

很重要的细节: 在执行完createElement代码之后,应该马上append到dom树中,否则,如果在将这个孤立节点加载到dom树之前所做的赋值它的属性和innerHTML的操作都会引发该dom片段内存无法回收的问题. 这个不起眼细节,一旦遇到大量dom增删操作,就会引发内存的灾难。

4.创建事件监听 删除dom节点之前一定要删除节点上的事件,否则会产生无法回收的内存。

5.创建事件监听 Dom 事件默认是向上冒泡的,建议 事件委托

应该尽量少的为dom节点注册事件监听。 所以,当代码中出现在循环里注册事件时,也是我们该考虑事件上提机制的时候了。

6.监听动态元素 Dom 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理。

7.HTML提纯体现的是一种各负其责的思想,也就是松耦合,尽量不出现和显示无关的属性,比如onclik事件,自定义的对象属性。

转自 https://blog.csdn.net/renjiangying/article/details/84442680

[软技能] 当业务与技术冲突时你作为管理者你该如何决择?

i am not a leader, i am just a poor programmer

猜你喜欢

转载自blog.csdn.net/vampire10086/article/details/108769359