部分性能优化

这篇具有很好参考价值的文章主要介绍了部分性能优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

程序员面试之性能优化

“哈拉雷,今天分享的是性能优化之首页资源压缩与白屏时间缩短”

路由懒加载

SPA 项目,一个路由对应一个页面,如果不做处理,项目打包后,会把所有页面打包成一个文件,当用户打开首页时,会一次性加载所有的资源,造成首页加载很慢,降低用户体验

  • app.js与app.css体积
    部分性能优化,面试官,前端,面试,性能优化
    部分性能优化,面试官,前端,面试,性能优化
// 通过webpackChunkName设置分割后代码块的名字
const Home = () => import(/* webpackChunkName: "home" */ "@/views/home/index.vue");
const MetricGroup = () => import(/* webpackChunkName: "metricGroup" */ "@/views/metricGroup/index.vue");
const routes = [
    {
       path: "/",
       name: "home",
       component: Home
    },
    {
       path: "/metricGroup",
       name: "metricGroup",
       component: MetricGroup
    }
 ]

重新打包后,首页资源拆分为 app.js 和 home.js,以及对应的 css 文件

  • app.js:244 KB、 home.js: 35KB
    部分性能优化,面试官,前端,面试,性能优化
  • app.css:67 KB、home.css: 15KB

部分性能优化,面试官,前端,面试,性能优化

通过路由懒加载,该项目的首页资源压缩约 52%

路由懒加载的原理

懒加载前提的实现:ES6的动态地加载模块——import()

调用 import() 之处,被作为分离的模块起点,意思是,被请求的模块和它引用的所有子模块,会分离到一个单独的 chunk 中
——摘自《webpack——模块方法》的import()小节

要实现懒加载,就得先将进行懒加载的子模块分离出来,打包成一个单独的文件

webpackChunkName 作用是 webpack 在打包的时候,对异步引入的库代码(lodash)进行代码分割时,设置代码块的名字。webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中

组件懒加载

话不多说,直接上效果

home 页面 和 about 页面,都引入了 dialogInfo 弹框组件,该弹框不是一进入页面就加载,而是需要用户手动触发后才展示出来

<template>
  <div class="homeView">
    <p>home 页面</p>
    <el-button @click="dialogVisible = !dialogVisible">打开弹框</el-button>
    <dialogInfo v-if="dialogVisible" />
  </div>
</template>
<script>
import dialogInfo from '@/components/dialogInfo';
export default {
  name: 'homeView',
  components: {
    dialogInfo
  }
}
</script>

项目打包后,发现 home.js 和 about.js 均包括了该弹框组件的代码(在 dist 文件中搜索dialogInfo弹框组件)
部分性能优化,面试官,前端,面试,性能优化

当用户打开 home 页时,会一次性加载该页面所有的资源,我们期望的是用户触发按钮后,再加载该弹框组件的资源

这种场景下,就很适合用懒加载的方式引入

弹框组件懒加载:

<script>
const dialogInfo = () => import(/* webpackChunkName: "dialogInfo" */ '@/components/dialogInfo');
export default {
  name: 'homeView',
  components: {
    dialogInfo
  }
}
</script>

重新打包后,home.js 和 about.js 中没有了弹框组件的代码,该组件被独立打包成 dialogInfo.js,当用户点击按钮时,才会去加载 dialogInfo.js 和 dialogInfo.css
部分性能优化,面试官,前端,面试,性能优化
最终,使用组件路由懒后,该项目的首页资源进一步减少约 11%

组件懒加载的使用场景:

有时资源拆分的过细也不好,可能会造成浏览器 http 请求的增多

总结出三种适合组件懒加载的场景:

  1. 该页面的 JS 文件体积大,导致页面打开慢,可以通过组件懒加载进行资源拆分,利用浏览器并行下载资源,提升下载速度(比如首页)
  2. 该组件不是一进入页面就展示,需要一定条件下才触发(比如弹框组件)
  3. 该组件复用性高,很多页面都有引入,利用组件懒加载抽离出该组件,一方面可以很好利用缓存,同时也可以减少页面的 JS文件大小(比如表格组件、图形组件等)

合理使用 Tree shaking

Tree shaking 的作用:消除无用的 JS 代码,减少代码体积

export function targetType(target) {
  return Object.prototype.toString.call(target).slice(8, -1).toLowerCase();
}
export function deepClone(target) {
  return JSON.parse(JSON.stringify(target));
}

项目中只使用了 targetType 方法,但未使用 deepClone 方法,项目打包后,deepClone 方法不会被打包到项目里

tree-shaking 原理:

依赖于ES6的模块特性,ES6模块依赖关系是确定的,和运行时的状态无关,可以进行可靠的静态分析,这就是 tree-shaking 的基础

静态分析就是不需要执行代码,就可以从字面量上对代码进行分析。ES6之前的模块化,比如 CommonJS 是动态加载,只有执行后才知道引用的什么模块,就不能通过静态分析去做优化,正是基于这个基础上,才使得 tree-shaking 成为可能

Tree shaking 并不是万能的
并不是说所有无用的代码都可以被消除,还是上面的代码,换个写法 tree-shaking 就失效了

// util.js
export default {
  targetType(target) {
    return Object.prototype.toString.call(target).slice(8, -1).toLowerCase();
  },
  deepClone(target) {
    return JSON.parse(JSON.stringify(target));
  }
};

// 引入并使用
import util from '../util';
util.targetType(null)

同样的,项目中只使用了 targetType 方法,未使用 deepClone 方法,项目打包后,deepClone 方法还是被打包到项目里

在 dist 文件中搜索 deepClone 方法:
部分性能优化,面试官,前端,面试,性能优化
究其原因,export default 导出的是一个对象,无法通过静态分析判断出一个对象的哪些变量未被使用,所以 tree-shaking 只对使用 export 导出的变量生效

这也是函数式编程越来越火的原因,因为可以很好利用 tree-shaking 精简项目的体积,也是 vue3 全面拥抱了函数式编程的原因之一

原文链接文章来源地址https://www.toymoban.com/news/detail-829415.html

到了这里,关于部分性能优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端面试的性能优化部分(6)每天10个小知识点

    首次内容渲染(First Contentful Paint,FCP)和首次有意义渲染(First Meaningful Paint,FMP)是衡量网页加载性能的指标,它们都关注页面加载过程中的用户体验。以下是我对这两个指标的理解: 首次内容渲染(FCP): 首次内容渲染是指从页面加载开始到浏览器首次绘制页面上的任何

    2024年02月13日
    浏览(44)
  • 前端面试的性能优化部分(12)每天10个小知识点

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! HTTP缓存头是在HTTP响应中设置的指令,用于控制浏览器和代理服务器在客户端和服务器之间缓存内容的行为。以下是我对HTTP缓存头(如Cache-Control和ETag)的了

    2024年02月12日
    浏览(82)
  • 前端八股文(三)—— 性能优化部分

    1、懒加载的概念 懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。 如果使

    2024年02月22日
    浏览(52)
  • 前端面试:【性能优化】页面加载性能、渲染性能、资源优化

    嗨,亲爱的前端开发者!在今天的Web世界中,用户期望页面加载速度快、交互流畅。因此,前端性能优化成为了至关重要的任务。本文将探讨三个关键方面的性能优化:页面加载性能、渲染性能以及资源优化,以帮助你构建更快速、响应更快的Web应用程序。 1. 页面加载性能:

    2024年02月11日
    浏览(51)
  • 【面试题】前端面试复习6---性能优化

    前端面试题库 ( 面试必备)              推荐:★★★★★ 地址:前端面试题库 要在 Chrome 中查看 性能指标 ,可以按照以下步骤操作: 打开 Chrome 浏览器,并访问你想要测试的网页。 使用快捷键 F12 或右键点击页面并选择 “检查”,打开开发者工具。 在开发者工具中,

    2024年02月11日
    浏览(44)
  • 前端面试题---模块化和性能优化

    模块化是一种将程序代码划分为独立、可复用的模块的开发方法。它能够提高代码的可维护性、可复用性和可扩展性,使得代码更易于组织、调试和协作。 常见的模块化方案包括: AMD(Asynchronous Module Definition):AMD是一种异步加载模块的规范,主要用于浏览器环境。它使用

    2024年02月10日
    浏览(49)
  • 前端面试:【网络协议与性能优化】提升Web应用性能的策略

    嗨,亲爱的Web开发者!构建高性能的Web应用是每个开发者的梦想。本文将介绍一些性能优化策略,包括资源加载、懒加载和CDN等,以帮助你提升Web应用的性能。 1. 性能优化策略: 压缩资源: 使用Gzip或Brotli等压缩算法来减小CSS和JavaScript文件的大小,加快加载速度。 合并文件

    2024年02月11日
    浏览(39)
  • 前端面试:【性能优化】前端缓存、CDN、懒加载和预加载

    亲爱的前端开发者,Web性能对用户体验至关重要。如果你想让你的网站更快、更具吸引力,就需要关注前端性能优化。在这篇文章中,我们将深入探讨四个关键的性能优化策略:前端缓存、CDN(内容分发网络)、懒加载和预加载,以助你构建高性能的Web应用。 1. 前端缓存:优

    2024年02月11日
    浏览(47)
  • 【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能

    这个题目实际上就是来回答 webpack 是干啥的,你对webpack的理解,都是一个问题。 (1)对 webpack 的理解 webpack 为啥提出 + webpack 是啥 + webpack 的主要功能 前端开发通常是基于模块化的,为了提高开发效率,webpack 是一个基于模块的构建工具,是一个用于 js 应用程序的静态模块

    2024年02月20日
    浏览(50)
  • 快速搞定前端JS面试 -- 第十二章 运行环境 (页面加载、性能优化、安全)

    4. Window.onload和DOMContentLoaded 二、性能优化 1、性能优化原则 2、如何入手性能优化 1. 资源合并 2. 缓存 3. CDN 4. SSR 5. 懒加载 6. 缓存DOM查询 7. 尽早开始JS执行 8. 防抖 9. 节流 三、安全 1. XSS跨站请求攻击 2. XSRF跨站请求伪造 问题解答 1. 从输入url到显示出页面的整个过程 2.

    2024年04月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包