2022前端知识点汇总

1. webpack打包优化

2. 前端优化

常见的优化方向有：

1. 缩短请求耗时：减少http请求数量，适当使用浏览器缓存；

2. 减少重排重绘：按情况使用ssr服务端渲染; 尽量避免响应式布局；

3. 改善JS性能：按需加载第三方资源的代码；减少单页面的js数量和执行时长；大文件放后面加载，减少总阻塞时长

4. 静态资源优化：图片、文件压缩；预加载重要的资源；图片懒加载；静态资源放到第三方服务器分流等

3. vue组件渲染过程

4. promise，setTimeout，宏观微观

5. typeof 

typeof操作符返回一个字符串，表示未经计算的操作数的类型。

 

类型	结果
Undefined	"undefined"
Null	"object"
Boolean	"boolean"
Number	"number"
String	"string"
Symbol	"symbol"
函数对象	"function"
其他对象	"object"

6. 事件冒泡和事件捕获

  eq: 点击获取ul列表下li的下标

 <ul id="test">
    <li>ee</li>
    <li>xx</li>
    <li>ec</li>
  </ul>
  <script>
    // 在每一li上面绑定click
    const docList=document.getElementsByTagName('li');
    for(let i=0; i< docList.length; i++) {
      docList[i].addEventListener('click', function(e) {
        console.log(i)
      }, false)

    }

    // 使用事件委托的方法
    // const docList=document.getElementsByTagName('li');
    // const list = Array.prototype.slice.call(docList);
    // document.getElementById("test").addEventListener('click', function(e) {
    //   console.log('click',list.indexOf(e.target))
    // })
  </script>

addEventLister(target, event, useCapture)

第三个参数默认为false，表示在冒泡阶段触发事件，为true时表示在捕获阶段触发事件

7. react优化

8. react生命周期

10. http请求和响应

11. 深拷贝和浅拷贝：浅拷贝的对象为基本数值类型时，拷贝其值，为引用数据类型时，拷贝其内存地址，也就是浅拷贝复制的是栈里面保存的东西，浅拷贝对象的引用数据类型的改变会随其拷贝对象的改变而改变；而深拷贝则完全拷贝了对象的值，开辟了新的内存地址，与其原拷贝对象互不影响。

12. debug