前端性能优化面试题总汇_前端项目优化面试题-程序员宅基地

技术标签：性能优化前端面试试水 javascript

前端性能优化面试题

前端性能优化总体来说分为 ：优化请求、打包优化、代码优化。

Ⅰ、如何优化请求

图片方面

① 精灵图

通过 background-position 来取每个图标位置，最后每个图标
===>
优势 :
一次请求，多次利用（ 减少请求频率 ）

② 小图标 Base64

虽然 内存没有减小 ，存储为超长的字符串码
但是不用请求各种小图标（ 减少请求频率）
应用（webpack 打包配置）
下载插件：
npm i -D url-loader
配置打包：

module: {
    
  rules: [
       {
    
        test: /\.(jpeg|jpg|png|svg|gif)$/,
        use: {
    
          loader: 'url-loader', // 默认使用的是es6模块
          options: {
     // 配置 
            esModule: false, // 使用common.js规范
            outputPath: 'images', // 输出的文件目录
            name: 'images/[contenthash:4].[ext]',
            limit: 10*1024 // 小于10k转为base64
          }
        }
      }
  ]
}

③ 图片懒加载

电商系统，最为常用；
原理：
滚动到图片位置，再去请求图片
这样浏览多少，加载多少（ 按需请求 ）
简单实现：

<body>
    <img data-a="./img/1.jpg" alt="">
    <img data-a="./img/2.jpg" alt="">
    <img data-a="./img/3.jpg" alt="">
    <img data-a="./img/4.jpg" alt="">
    <img data-a="./img/5.jpg" alt="">
 </body>
<script>
        const imgs = document.getElementsByTagName('img');
	  	window.onload = window.onscroll = function () {
       
            gundong(imgs);
        }
		function gundong(imgs) {
      
            let height = document.documentElement.clientHeight;
          	let s = document.documentElement.scrollTop || document.body.scrollTop;	
            for (let i = 0; i < imgs.length; i++) {
      
                if (hight + s > getTop(imgs[i])) {
      
                    imgs[i].src = imgs[i].getAttribute('data-a');
                }
            }
        }
        function getTop(e) {
        //计算到浏览器顶部的距离
            let ss = e.offsetTop;
            while(e = e.offsetParent) {
      
               ss += e.offsetTop;
            }
            return ss;
        }
 </script>

④ 图标库采用 svg

svg 是 HTML5 新增的 矢量图 （ 减少请求 ）
svg 图标占用内存非常小
将图标库，选择svg类型图标库
推荐：
Iconify 图标库 ( 包含 Antd、Element ui …的图标 )
安装：
npm i -D @iconify/json
地址：
点击跳转（开源免费）

请求内容方面

① 减少请求内容大小

每次请求的数据不要太大
表格和列表类型 后端分页
— 分页尽量后端处理
— 前端传参，每次请求每页数据（ 加快请求响应速度 ）
…

②更改请求方式

对于获取 表格、或列表内容，尽量 get 请求
获取表格，一般只会传页码和大小、类型（ 不会涉及重要参数）
get 请求的速度 > post 请求速度

③ 防抖节流

防抖：例子
表单点击按钮提交时，然后 几秒内，按钮 不能被点击或点击无效，避免过快重复点击
、、、
节流：例子
搜索框匹配内容时，用户停止输入到几秒时去搜索，而不是输入一个 触发一次

④ 利用存储

本地存储：
cookie、localStorage、sessionStorage
场景：
1、第一次请求后，存储到本地，下次发送请求，后端判断数据是否更新，如果不更新不返回数据；
2、用户登录将token 存储 cookie ，再访问改网页token未过期，则不需要重新登录；
…

Ⅱ、代码优化

① 事件委托

给 父标签 绑定点击事件
点击 子标签 同样会执行该函数
举个简单的例子：

<body>
	<ul onclick="fun(event)">
    	<li>111</li>
    	<li>222</li>
    	<li>333</li>
	</ul>
</body>
<script>
function fun(e){
      
    console.log(e.target.innerHTML);
}
</script>

② 减少dom操作

少通过 document 来获取对象如：
document.getElementsByClassName( ‘content’ ).innerHTML = 123
因为同时操作多个标签 => 大量的重绘或重排
可以使用流行的框架
如： vue 、react 都采用 虚拟dom ，多次操作一次渲染

③ 页面结构优化

将script标签放到最后面可以提前解析DNS资源。

④ css 优化

选择器准确可以减少匹配的时间。
如： .box>.header_box>.content{ … }
less 和 sass 可以层级嵌套会加快匹配时间
如

<style lang="less">
.box{
      
	...
	.header_box{
      
		...
		.content{
      
			...
		}
	}
}
</style>

Ⅲ、框架和打包

① SSR 服务端渲染

页面在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将生成静态的 HTML
优势：

首次加载速度快，利于SEO

劣势：

不支持路由懒加载，

适合页面较少，

服务端压力过大

nuxt 是一个SSR 最为流行的框架之一基于vue
点击了解 nuxt

② CDN 加速

CDN 加速就是将依赖部署在其他站点上，而不是把资源打包到项目中。
不需要 npm 或 yarn 下载，只需要html 文件的头部去导入

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.min.js"></script>
</body>

// webpack.config .js
module.exports = {
    
    chainWebpack: config => {
    
       config.externals({
    
           'vue': 'Vue',
       })
     },
}

优势：

这种非常适合带宽比较小的服务器

打包会更加小

劣势：

如果服务器不差，CDN 加速反而会变慢

请求的依赖包是全量的，没有按需加载

③ tree-shaking (摇树优化)

摇树优化：顾名思义就是要掉，身上多余的东西
就是打包的时候，依赖中没用到的功能，就不打进去
让生产环境的包足够小
向vue 、react 都自带这种功能

④ js 最小拆包

进入每个子页面加载每次用到的 js 逻辑
可以通过 webpack 和 vite 的配置实现

⑤ 路由懒加载

在进入那个路由，加在对应的逻辑
在 vue 和 react 中应用

vue 采用 () => import('/...') 来导入
---
react 采用 React.lazy(() => import('/...'))

⑥ 异步组件，异步Js

如果有的组件，是通过点击和操作之后出现的
这时就可以通过异步组件和异步Js
实现功能按需加载已vue 为例：

import {
     defineAsyncComponent } from 'vue'
const Foo = defineAsyncComponent(() => import('./Foo.vue'))

function loadLazy() {
    
  return import('./lazy.js')
}

本文链接：https://blog.csdn.net/weixin_42232622/article/details/127186267

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Java中当控制台用户输入错误时怎么重新输入_java如果用户输入错误,可以重复输入直到输入正确,执行相应的操作后退出循环-程序员宅基地

文章浏览阅读1.1w次，点赞17次，收藏62次。Java中当控制台用户输入错误时怎么重新输入Java中当控制台用户输入的数据类型不是我们指定输入的数据类型时，我们往往需要用户重新输入。_java如果用户输入错误,可以重复输入直到输入正确,执行相应的操作后退出循环

AltiumDesigner 中对已覆铜进行 - 开窗-处理_ad中画好的铜皮怎么开窗-程序员宅基地

文章浏览阅读6.3k次。转载自：https://blog.csdn.net/weixin_45284684/article/details/106259347AltiumDesigner 中对已覆铜进行 - 开窗-处理PCB在铜箔之上会有一层绿油覆盖层（阻焊层），开窗即是去除该阻焊层，将铜箔裸露出来。开窗作用：开窗后在裸露铜箔（导线）上加锡（加厚了导线的厚度）从而增加电流导通能力；开窗后，铜箔（导线）裸露与空气直接接触，有助于散热。1 2走线开窗、不规则开窗（区域开窗）**走线开窗示意图不规则开窗_ad中画好的铜皮怎么开窗

vue后台水印实现_v-watermark-程序员宅基地

文章浏览阅读2.4w次，点赞3次，收藏2次。vue后台水印实现Vue项目在页面添加水印功能创建watermark.js文件<template> <router-view v-waterMark="waterCode" ></router-view></template><script>import waterMark from 'common/utils/watermark';export default { directives: {_v-watermark

CSS 鼠标悬浮在图片上添加遮罩层效果的实现_css 悬浮遮罩进行操作怎么操作-程序员宅基地

文章浏览阅读2.3k次，点赞3次，收藏6次。实现的关键是 CSS 的opacity和hover，本文也主要介绍遮罩层的实现父级元素 sub-module-type 要display: block;position: relative;子级元素 mask 遮罩层 position: absolute;opacity: 0;pointer-events:none;鼠标悬浮时 opacity: 1; <div class="sub-module"> <div class="sub-modul..._css 悬浮遮罩进行操作怎么操作

ora-64203:Destination buffer too small to hold CLOB data after character set conversion.-程序员宅基地

文章浏览阅读2.8k次。ora-64203:Destination buffer too small to hold CLOB data after character set conversion.拼接字符串时过长引起，报缓冲区太小错误SELECT WM_CONCAT(field_A|| field_b) FROM table_A WHERE fie..._destination buffer too small to hold clob data after character set conversio

ThinkPHP 数据库操作(三) : 查询方法、查询语法、链式操作_thinkphp db where-程序员宅基地

文章浏览阅读3.5k次。查询方法条件查询方法where 方法可以使用 where 方法进行 AND 条件查询：Db::table('think_user') ->where('name','like','%thinkphp') ->where('status',1) ->find();多字段相同条件的 AND 查询可以简化为如下方式：Db::table('think_user') ->where('name&title','like','%_thinkphp db where

随便推点

MybatisPlus基础学习之插入更新数据和主键生成策略_myibatisplus插入时其他字段也插入主键的值-程序员宅基地

文章浏览阅读1k次。3.MybatisPlus插入和更新数据上一篇博客带领大家快速入门体验了一下MybatisPlus，今天带大家学习一下MybatisPlus如何插入和更新数据，以及它自带的主键生成策略的简单使用！如果还没有看过上一篇的MybatisPlus快速入门体验的，我把博客链接贴出来，大家可以学习完后再来阅读本篇博客：https://blog.csdn.net/weixin_45301250/article/details/118833460?spm=1001.2014.3001.55013.1 插入数据测试_myibatisplus插入时其他字段也插入主键的值