javascript-interview-questions-10(Misc)

What’s the difference between require and import?

前端如何做性能优化？

我能想到的点，做性能优化前一定要有benchmark，否则你不知道你的优化是否有效果。

网络层面优化

1. 減少Http请求
   1. 合并文件，将多个css或者javascript文件合并为一个，减少http请求次数。但同时要避免单个文件过大，导致加载时间过长。一个文件的大小最好不要超过1MB。
   2. 使用css sprite，将多个小图片合并为一个大图片，通过css的background-position来显示不同的图片。
   3. 较小的css可以内联到html中，减少http请求。
   4. 使用base64编码，将小图片转为base64编码，直接写在css文件中，减少http请求。
   5. 使用svg/webp代替png/jpg图片。
   6. 启用gzip压缩，减少文件大小。
2. 启用缓存：
   1. 强缓存：通过设置http header中的Expires和Cache-Control: max-age 来开启强缓存。
   2. 协商缓存：通过设置http header中的Last-Modified和ETag来开启协商缓存。
3. 使用CDN，将静态资源放到CDN上，减少服务器的压力，提高访问速度。

打包优化

1. Tree-shaking， 删除无用代码
2. lazy loading，按需加载, 通过webpack等打包工具，lazy loading的组件可以打包成单独的chunk文件，按需加载
3. code splitting，代码分割，将代码分割成多个chunk，按需加载 - 这个和lazy loading是一样的。
4. 代码压缩，删除空格，注释，压缩代码 - 这都是打包工具的基础功能。

代码层面的优化

1. 书写高效代码，避免使用过多的循环，避免使用过多的递归。
2. 避免Reflow和Repaint，减少DOM操作，尽量一次性修改DOM。

启用性能监控

性能优化的前提是知道哪里慢，才能有针对性的优化，所以优化前一定要进行监控，找到嗯提的根源，对症下药。