notes

杂记

white-space表现形式

white-space👇 空格( ) 非断空格( ) 换行符(\n)
normal 保留1个空格，或者在多空格的时候仅保留1个空格 全部非断空格都保留 表现为1个空格，不换行
pre 保留全部的空格 全部非断空格都保留 会换行，但当文本溢出容器时不会自动换行
pre-line 保留1个空格，或者在多空格的时候仅保留1个空格 全部非断空格都保留 会换行
pre-wrap 保留全部的空格 全部非断空格都保留 会换行
no-wrap 保留1个空格，或者在多空格的时候仅保留1个空格 全部非断空格都保留 表现为1个空格，不换行

terset配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
new TerserPlugin({
    // test: /\.js(\?.*)?$/i,
    // exclude: /node_modules/,
    terserOptions: {
        // ecma: undefined,
        warnings: false,
        parse: {
            ecma: 8
        },
        compress: {
            ecma: 5,// 默认值，防止es5代码被替换成es6+的代码
            passes: 3,
            pure_funcs: ['console.log', 'console.info'],
            toplevel: true
            // https://github.com/terser/terser/issues/120（已修复）
            // inline: 2
        },
        mangle: true, // Note `mangle.properties` is `false` by default.
        output: {
            ecma: 5, // 默认值，防止es5代码被替换成es6+的代码
            // Turned on because emoji and regex is not minified properly using default
            // https://github.com/facebook/create-react-app/issues/2488
            ascii_only: true,
        },
        module: false,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_classnames: undefined,
        keep_fnames: false,
        safari10: false,
    },
    // parallel: getCpuCount()
})

MutationObserver注意点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
observer=new MutationObserver(mutations=>{
console.log('1',mutations)
})

observer2=new MutationObserver(mutations=>{
console.log('2',mutations)
})

observer3=new MutationObserver(mutations=>{
console.log('3',mutations)
})

const input=document.querySelector('input')
observer3.observe(input,{attributes: true})
observer2.observe(input,{attributes: true})
observer.observe(input,{attributes: true})

setTimeout(()=>{
    input.classList.add('a1')
},1000)

// 当监听的元素发生改变时会按new的顺序执行监听回调
// 所以结果为:
//  1 [MutationRecord]
//  2 [MutationRecord]
//  3 [MutationRecord]

容器出现滚动条时，子容器的宽度是否因为滚动条而改变

TODO:增加测试数据表格

仅当初次渲染时，子元素的高度超过父元素的高度（此时父元素的overflow-y值为auto），导致父元素出现滚动条，如果子元素的宽度是一个固定的大小，且在视图上与滚动条有重合，此时滚动条会覆盖在子元素的视图上，当再次触发渲染时，恢复正常（出现横向滚动条），此现象在水平和垂直方向上都存在

webpack 多线程和cache优化

第一次pack(ms) 第二次pack(ms)
无优化 54561 53825
cache-loader 52237 48472
thread-loader 52445 52049
cache-loader & thread-loader 55297 52036
hard-source-webpack-plugin（缺乏维护） 54447 42747

cache-loader、thread-loader优化不明显，后期再看看

其他记录-以后分类

  • absolute定位将relative定位的父级的padding区域左上角视为原点
  • 在无relaitve父级的情况下，将window窗口的左上角视为原点
  • DOM中ELEMENT元素在动画和过渡的过程中，通过getClientRects获取的ELEMENT元素位置信息是实时的，在变化的过程中会持续改变
  • vue组件实例的$vnode对象等同于相应插槽中的相应插槽位置的对象，比如：
    1
    exampleVueComponent.$vnode === this.$slots.default[0] // true
  • vue实例的$destroy函数不会删除对应组件的节点，仅用于同步且按顺序触发beforeDestroy 和destroyed这两个hook,，示例：
1
<div id="app"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const comp1 = {
    mounted() {
        console.log(window.b = this.$slots.default[0])
    },
    render(h) {
        return h('div', {}, this.$slots.default)
    }
}
const comp2 = {
    beforeDestroy() { console.log('beforeDestroy'); return new Promise(() => { }) },
    destroyed() { console.log('destroyed') },
    render(h) {
        return h('h2', {}, ['has a h2'])
    }
}
new Vue({
    el: '#app',
    render(h) {
        return h('comp1', {}, [h('comp2', { ref: 'comp2' })])
    },
    mounted() {
        console.log(window.a = this.$refs.comp2)
        this.$refs.comp2.$destroy();
        console.log('h2 remove')
    },
    components: {
        comp1,
        comp2,
    },
})
分享到