当面试官问你性能优化时的应答方案-------字节跳动面试题

素颜马尾好姑娘i 2023-06-21 07:21 3阅读 0赞

######      昨天在面字节跳动的时候面试官直接让我说完输入URL之后发生的过程之后，让我说说性能优化的策略，当时想到的比较少，现在就来系统的总结一下。我从三个方面来进行详细的描述，分别是网络传输性能的优化、页面渲染的优化以及js阻塞性能优化。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]

### 一、网络传输性能的优化 ###

#### 1、配置缓存 ####

#### 2、资源打包 ####

##### （1）js/html/css压缩，提取公共资源 #####

##### （2）图片优化 #####

*  HTML中不缩放图片
 *  base64编码代替图片（适用于图片大小<2kb,页面中引用图片数量不多的情况）
 *  合并图片（雪碧图）---------是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。[可以点击这里获得详细的讲解][Link 1]
 *  使用字体图标
 *  响应式图片
 *  图片压缩
 *  更换图片样式
 *  图片懒加载          [图片懒加载点击这里，一键清晰它的原理实现与原理][Link 2]
 *  图片预加载

##### （3）使用CDN缓存（聊缓存之前还是了解一下cdn吧，[点击这里进行了解][Link 3]） #####

### 二、页面渲染性能优化点 ###

#### 1、css读写分离 ####

#### 2、DOM元素离线更新（使用 document fragment） ####

#### 3、没用的元素设为不可见，减少重绘的压力 ####

#### 4、压缩dom深度 ####

#### 5、图片在渲染之前指定大小 ####

#### 6、页面中可能发生大量重排重绘的元素单独触发渲染层，使用GPU来分担CPU的压力 ####

### 三、JS阻塞性能优化 ###

#### 1、defer 与async ####

###### (1)各种形式 ######

（(1)）`<script src="script.js"></script>`  
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

（2`）<script async src="script.js"></script>`  
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

（3）`<script defer src="myscript.js"></script>`  
有 defer，加载后续文档元素的过程将和 script.js 的**加载**并行进行（异步），但是 script.js 的**执行**要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

###### （2）区别(defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）) ######

![在这里插入图片描述][20191211173045561.png]

（(1)）  
它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的  
((2))关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点*要善加利用  
((3))async 则是一个乱序执行的主*，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行  
仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

[这里为一篇好文，简单阐述了async与defer的区别-----defer就相当于将js的标签放在文章最后面，他们加载的时间是相同的但是是执行的时间不同。][async_defer_-----defer_js]

#### 2、首屏js放在底部 ####

#### 3、过去几年来，浏览器解析和编译脚本的速度已经有了显著提升，这也改变了 JavaScript 的性能开销结构。到了 2019 年，处理脚本的主要性能开销体现在**脚本下载和 CPU 执行时间上**。当浏览器的主线程忙于执行 JavaScript 脚本时可能会拖累用户交互操作，因此加快脚本执行速度并消除网络瓶颈能明显改善用户体验。 ####

[这里是一篇根据如何加快脚本执行速度和消除网络瓶颈而提高性能的文章][Link 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019121117020415.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/qq_39897978/article/details/103498843
[Link 2]: https://blog.csdn.net/qq_39897978/article/details/103496663
[Link 3]: https://juejin.im/post/5c188d06f265da615114acb0
[20191211173045561.png]: https://img-blog.csdnimg.cn/20191211173045561.png
[async_defer_-----defer_js]: https://segmentfault.com/q/1010000000640869
[Link 4]: https://mp.weixin.qq.com/s/IbjY4HLDiUZGz5tAhqeaIw