zz130428的博客

Vue 在大多数常见场景下性能都是很优秀的，通常不需要手动优化。然而，总会有一些具有挑战性的场景需要进行针对性的微调。在本节中，我们将讨论用 Vue 开发的应用在性能方面该注意些什么。：首次访问时，应用展示出内容与达到可交互状态的速度。这通常会用 Google 所定义的一系列Web 指标(Web Vitals) 来进行衡量，如最大内容绘制(Largest Contentful Paint，缩写为 LCP) 和首次输入延迟(First Input Delay，缩写为 FID)。

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性，可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上，也可以使用 this.$forceUpdate() 方法，可以局部更新。让数据变为响应式的，如：vue中，当页面初始化时候，vue会遍历data对象所有的属性，并使用defineProperty或Proxy把这些属性全部转化为getter/setter，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，减少用户的跳出，提升页面的留存率。从输入url，到页面的画面展示的过程1、首先，在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送

4、使用 immutable 不可变数据，在我们项目中使用引用类型时，为了避免对原始数据的影响，一般建议使用浅拷贝(shallowCopy) 和深拷贝 (deepCopy) 对数据进行处理，但是这样会造成 CPU 和 内存的浪费，所以推荐使用 immutable。在有子组件的情况下，为了避免子组件的重复渲染，可以通过父组件来判断了组件是否需要 PureRender。5、给子组件设置一个唯一的 key，因为在 diff 算法中，会用 key 作为唯一标识优化渲染。可以更好的做撤销/重做，复制/5贴。

(DNS预获取)是前端网络性能优化的一种措施。它根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，进而提高网站的访问速度。