面试题之性能优化篇

1、vue的性能优化

        1、路由懒加载 图片懒加载

                a、什么是懒加载？预加载？

                        懒加载即为延迟加载，延迟加载网络资源或者符合条件时才加载或可视区加载。缓解服务器压力。防止皆在图片过多影响其他资源文件。

                        预加载即为提前加载，当用户需要查看时直接从本地缓存渲染。会增加服务器压力。

        2、使用keep-alive缓存界面：

                 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似

(23条消息) keep-alive的使用及详解一夜枫林的博客-CSDN博客keep-alivehttps://blog.csdn.net/m0_45070460/article/details/107432685

        3、使用v-show复用dom

        4、v-for时避免使用v-if 可以使用computed属性过滤数据项

        5、组件库按需映入

2、vue seo优化

        SEO(Search Engine Optimization)：汉译为搜索引擎优化。

        解决：采用ssr框架 ssr 框架官方文档 (ssr-fc.com)

3、网页优化

        1、页面优化：

                让网站更容易被引擎搜索到。 描述和关键字等/超链接优化（文本链接、规范链接）

        2、结构优化：

                压缩页面内存大小/结构样式分离

        3、css优化：

                1、排除样式冗余

                2、后代选择符的层级不宜过多

                3、减少图片加载次数 如精灵图

4、cdn

        使用场景：静态资源缓，直播传送等

        引入cdn作用：

                1、性能方面：减少了服务器的负载、使内容加载更快，用户体验性更高

                2、安全方面：有助于防御网络攻击

5、回流重绘

        1、回流

                渲染树中部分或全部元素的尺寸等属性变化是，浏览器重新渲染的过程即为回流。

                以下操作会导致回流：

                        1、页面首次渲染

                        2、浏览器窗口大小变化。

                        3、元素内容、尺寸、位置、字体发生变化。

                        4、激活伪类。

                        5、添加/删除某些dom元素。

                        6、查询某些属性、方法。

        回流的影响范围有两种：

                1、全局（从根节点开始）。2、局部（对渲染树的某个部分或一个渲染对象）。

        2、重绘

                页面某些元素的样式发生变化，但不影响再文档流中的位置。浏览器会对元素进行重新绘制。

                重绘相关css属性：1、color、background相关。2、outline相关。3、其他。

注意：回流一定会触发重绘，重绘不一定触发回流。

        3、避免：

        一、 CSS中避免回流、重绘

                1.尽可能在DOM树的最末端改变class
                2.避免设置多层内联样式
                3.动画效果应用到position属性为absolute或fixed的元素上，脱离文档流
                4.避免使用table布局
                5.多用visibility:hidden少用display：none
                6.使用css3硬件加速，可以让transform、opacity、filters等动画效果不会引起回流重绘
        二、 JS操作避免回流、重绘

                1.避免使用JS一个样式修改完接着改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称
                2.避免频繁操作DOM，使用文档片段创建一个子树，然后再拷贝到文档中

                3.避免循环读取offsetLeft等属性，在循环之前把它们存起来
                4.对于复杂动画效果,使用绝对定位让其脱离文档流，否则会引起父元素及后续元素大量的回流

(23条消息) 什么是重绘和回流以及如何避免回流windy-boy的博客-CSDN博客如何避免重绘和回流https://blog.csdn.net/piaojiancong/article/details/115682174?ops_request_misc=%7B%22request_id%22%3A%22166564746916800186596915%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=166564746916800186596915&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-115682174-null-null.142%5Ev55%5Econtrol,201%5Ev3%5Eadd_ask&utm_term=%E9%81%BF%E5%85%8D%E5%9B%9E%E6%B5%81%E9%87%8D%E7%BB%98&spm=1018.2226.3001.4187

6、动画优化

        将动画属性设为absolution 或 fixed 脱离文档流

7、节流防抖

        节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

        防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

        应用场景:

                防抖在连续的事件，只需触发一次回调的场景有：

        1、搜索框搜索输入。只需用户最后一次输入完，再发送请求

        2、手机号、邮箱验证输入检测

        3、窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

                节流在间隔一段时间执行一次回调的场景有：

        1、滚动加载，加载更多或滚到底部监听

        2、搜索框，搜索联想功能

(23条消息) 什么是防抖和节流？有什么区别？如何实现？Amy--成长ing的博客-CSDN博客防抖节流https://blog.csdn.net/weixin_66375317/article/details/124625933?ops_request_misc=%7B%22request_id%22%3A%22166564849316800184174515%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=166564849316800184174515&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-124625933-null-null.142%5Ev55%5Econtrol,201%5Ev3%5Eadd_ask&utm_term=%E8%8A%82%E6%B5%81%E9%98%B2%E6%8A%96&spm=1018.2226.3001.4187