前端面试高频问题

前端如何性能优化

1. 减少请求数量

     a. 把前端的公共库合并
     b. 不同页面单独合并
     c.  对于图片，使用雪碧图，base64编码图片，使用字体图标
     d. 减少重定向
     e. 使用缓存
     f.  避免使用空的 href 和 src

2. 减小资源大小

    a. 对前端资源进行压缩
    b. 使用wep格式图片
    c. 开启gzip

3. 优化网络连接

    a. 使用CDN网络
    b. 并行连接  持久连接  管道化连接

4. 优化资源加载

    a. 资源加载位置，css引用在head中，先外链后本页，js引用在body底部，先外链后本页
     b. 资源加载时机，异步加载，设置script的defer和async属性，模块化的话使用按需加载
    c. 使用资源预加载和资源懒加载

5. 减少重绘和回流

   a. 缓存DOM
   b. 减少DOM深度和数量
   c. 批量操作dom和css样式
   d. 使用事件代理
   e. 使用防抖和节流

6. 使用性能更好的API

  a. 用对css选择器
  b. 使用requestAnimationFrame代替setTimeout和setInterval
  c.  使用IntersectionObserver实现图片懒加载
  d. 使用web worker

7. webpack优化

   a. 打包公共代码
   b. 动态导入和按需加载
   c. 剔除无用代码