首屏加载优化

最近沉迷逛某蓝色软件，收益良多！万分感谢博主海阔_天空，写的太棒了👍🎉

下面是原文链接，我在原文的基础上浅做个笔记，方便个人快速复习

前端性能优化——首页资源压缩63%、白屏时间缩短86% – 掘金提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 `常规且有效` 的首屏优化建议通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理https://juejin.cn/post/7188894691356573754#heading-6

1、路由懒加载

打包对比

实现原理 import()（分离 chunk）

webpackChunkName（指定打包时生成的代码块名）

路由懒加载 – 示例

2、组件懒加载

为啥用组件懒加载

组件懒加载 – 示例

组件懒加载 – 使用场景（条件触发的组件、公共组件、大体积 .js）

3、Tree shaking

作用（删除无用代码）

原理（ES6 可静态分析）

局限（只对用 export 导出的变量生效）

4、骨架屏

原理（将骨架屏内容放到 html 文件的根节点中）

骨架屏插件（vue-skeleton-webpack-plugin）

5、虚拟滚动

原理（监听 scroll，根据 scrollTop 截取 list 并展示）

虚拟滚动插件

6、Web Worker 优化长任务

控制台查看长任务（执行时间超过 50ms 的任务）

Web worker 举例（计算 20w 条数据）

Web Worker 通信时长

7、requestAnimationFrame GUI 定时器

是什么？有什么作用？（解决动画卡顿）

定时器区别（引擎、时间准确度、性能）

8、JavaScript 的加载方式

1）正常模式（阻塞DOM）

2）async 模式（不阻塞DOM，加载无序）

3）defer 模式（不阻塞DOM，加载有序）

4）module 模式（不阻塞DOM，加载有序）

5）preload 模式（link 属性，首页[关键]资源提前加载）

6）prefetch 模式（link 属性，非首页[关键]资源提前加载）

9、图片优化

动态裁剪图片（压缩裁剪）

图片懒加载（到可视区域再加载）

使用字体图标（体积小、样式灵活、兼容性好）

图片转 base64 格式（减少 http 请求）

10、参考文章

1、路由懒加载

打包对比

普通路由 vs 路由懒加载，在 SPA 项目中：

若采用普通路由，会把所有页面打包成一个文件，一次性加载所有资源
若将路由改成懒加载，会把单个路由页面打包成多个文件，体积大幅减小

实现原理 import()（分离 chunk）

路由懒加载实现原理：

通过 ES6 动态加载模块 import() 实现
调用 import() 之处，被作为分离的模块起点，被请求的模块和它引用的所有子模块，会分离到一个单独的 chunk 中

webpackChunkName（指定打包时生成的代码块名）

webpackChunkName：是一个注释，用于指定 webpack 在打包时生成的代码块的名称。它的作用是让 webpack 在打包时，将具有相同名称的模块打包到同一个代码块中，从而实现代码分割和按需加载的效果；如果不指定名字，则生成的文件名将不够语义化

路由懒加载 – 示例

下面是设置路由懒加载的例子：

// 通过 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},]

2、组件懒加载

为啥用组件懒加载

以公共组件-弹框为例，如果在多个页面中引入，则打包时会被重复打包进多个文件

同时，弹框组件不是一进入页面就加载，而是需要用户手动触发显示

此时，就应该考虑组件懒加载了

组件懒加载 – 示例

弹框组件懒加载示例：

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

重新打包后：

引入 dialogInfo 组件的页面中，不会被加入 dialogInfo 组件的代码
dialogInfo 组件被独立打包成 dialogInfo.js，当用户点击按钮时，才会去加载 dialogInfo.js 和 dialogInfo.css

组件懒加载 – 使用场景（条件触发的组件、公共组件、大体积 .js）

组件懒加载的使用场景：

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

PS：资源拆分的过细也不好，会造成浏览器 http 请求增多

3、Tree shaking

作用（删除无用代码）

Tree shaking 的作用：消除无用的 JS 代码，减少代码体积

举个🌰：项目中只用了 targetType()，未使用 deepClone()；则 deepClone() 不会被打包

// util.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));
}

原理（ES6 可静态分析）

依赖于 ES6 的模块特性，ES6 模块依赖关系是确定的，可以进行静态分析，和运行时状态无关（也就是说，不用执行代码，就能判断啥用了啥没用），这就是 tree-shaking 的基础

CommonJS 是动态加载，执行后才知道引用的什么模块，不能通过静态分析去优化

局限（只对用 export 导出的变量生效）

并不是说所有无用的代码都可以被消除，下面的 deepClone() 仍然会被打包

// 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)

原因分析：

export default 导出的是一个对象，无法通过静态分析判断对象的哪些属性变量未被使用
tree-shaking 只对用 export 导出的变量生效，这也是函数式编程越来越火的原因，因为可以很好利用 tree-shaking 精简项目的体积，也是 vue3 全面拥抱了函数式编程的原因之一

4、骨架屏

使用骨架屏，可以缩短 FP 白屏时间（高达86%），提升用户体验

原理（将骨架屏内容放到 html 文件的根节点中）

SPA 单页应用，无论 vue 还是 react，最初的 html 都是空白的，需要通过加载 JS 将内容挂载到根节点上，造成长时间的白屏

骨架屏插件基于这种原理，在项目打包时，将骨架屏内容放到 html 文件的根节点中（根节点内部为骨架屏）

使用骨架屏插件，打包后的 html 文件：

<div id="app" >// 根节点内部为骨架屏<div class="skeleton loading"><div class="header"></div><div class="content"></div></div>
</div>

骨架屏插件（vue-skeleton-webpack-plugin）

这里以 vue-skeleton-webpack-plugin 插件为例，可以给不同页面设置不同骨架屏

安装

npm i vue-skeleton-webpack-plugin

vue.config.js 配置

// 骨架屏
const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");
module.exports = {configureWebpack: {plugins: [new SkeletonWebpackPlugin({// 实例化插件对象webpackConfig: {entry: {app: path.join(__dirname, './src/skeleton.js') // 引入骨架屏入口文件}},minimize: true, // SPA 下是否需要压缩注入 HTML 的 JS 代码quiet: true, // 在服务端渲染时是否需要输出信息到控制台router: {mode: 'hash', // 路由模式routes: [// 不同页面可以配置不同骨架屏// 对应路径所需要的骨架屏组件id，id的定义在入口文件内{ path: /^\/home(?:\/)?/i, skeletonId: 'homeSkeleton' },{ path: /^\/detail(?:\/)?/i, skeletonId: 'detailSkeleton' }]}})        ]}
}

新建 skeleton.js 入口文件

// skeleton.js
import Vue from "vue";
// 引入对应的骨架屏页面
import homeSkeleton from "./views/homeSkeleton";
import detailSkeleton from "./views/detailSkeleton";export default new Vue({components: {homeSkeleton,detailSkeleton,},template: `<div><homeSkeleton id="homeSkeleton" style="display:none;" /><detailSkeleton id="detailSkeleton" style="display:none;" /></div>`,
});

5、虚拟滚动

原理（监听 scroll，根据 scrollTop 截取 list 并展示）

只渲染可视区域的列表项，非可视区域的不渲染，滚动时动态更新可视区域

虚拟滚动原理：

计算出 totalHeight 列表总高度
触发滚动事件时，根据 scrollTop 值不断更新 startIndex 以及 endIndex
根据 startIndex 以及 endIndex ，从列表数据 listData 中截取对应元素，并在可视区域展示

虚拟滚动好处：在渲染 10w 个文本节点的情况下，使用虚拟滚动可以缩短 78% 白屏时长

虚拟滚动插件

虚拟滚动的插件有很多，比如：

vue-virtual-scroller
vue-virtual-scroll-list
react-tiny-virtual-list
react-virtualized
…

简单介绍 vue-virtual-scroller 的使用，该插件主要有 RecycleScroller.vue、DynamicScroller.vue 两个组件：

RecycleScroller 需要 item 的高度为静态的，也就是列表每个 item 的高度都是一致的
DynamicScroller 可以兼容 item 的高度为动态的情况

// 安装插件
npm install vue-virtual-scroller// main.js
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'Vue.use(VueVirtualScroller)// 使用
<template> <RecycleScroller class="scroller" :items="list" :item-size="32" key-field="id" v-slot="{ item }"> <div class="user"> {{ item.name }} </div></RecycleScroller> 
</template>

6、Web Worker 优化长任务

控制台查看长任务（执行时间超过 50ms 的任务）

浏览器 GUI 渲染线程与 JS 引擎线程是互斥的关系

当页面中有很多长任务（执行时间超过 50ms 的任务）时，会造成页面 UI 阻塞，出现界面卡顿、掉帧等情况

查看页面的长任务：

打开控制台，选择 Performance 工具
点击 Start 按钮，展开 Main 选项，会发现有很多红色的三角，这些就属于长任务

Web worker 举例（计算 20w 条数据）

把下方代码丢到主线程中执行，计算过程中，页面一直处于卡死状态，无法操作

let sum = 0;
for (let i = 0; i < 200000; i++) {for (let i = 0; i < 10000; i++) {sum += Math.random()}}

使用 Web Worker 执行上述代码时，计算过程中，页面正常可操作、无卡顿

// worker.js
onmessage = function (e) {// onmessage获取传入的初始值let sum = e.data;for (let i = 0; i < 200000; i++) {for (let i = 0; i < 10000; i++) {sum += Math.random()}}// 将计算的结果传递出去postMessage(sum);
}

Web Worker 具体的使用与案例，详情见下方文章：

一文彻底了解Web Worker，十万、百万条数据都是弟弟🔥https://juejin.cn/post/7137728629986820126

Web Worker 通信时长

并不是执行时间超过 50ms 的任务，就可以使用 Web Worker，还要考虑通信时长

举个🌰：一个运算执行时长为 100ms，但是通信时长为 300ms，用了 Web Worker 可能会更慢

当任务的运算时长 – 通信时长 > 50ms，推荐使用 Web Worker

新建一个 Web worker，浏览器会加载对应资源，下图中的 Time 是这个资源的通信时长（也叫加载时长）

7、requestAnimationFrame GUI 定时器

是什么？有什么作用？（解决动画卡顿）

requestAnimationFrame 是浏览器专门为动画提供的 API，功能类似于 setTimeout/setInterval

可以使用 requestAnimationFrame 来执行一些需要高性能的操作，例如动画、滚动、拖拽等

requestAnimationFrame 的刷新频率，与显示器的刷新频率保持一致，因此，使用 requestAnimationFrame 可以解决用 setTimeout/setInterval 制作动画卡顿的情况

定时器区别（引擎、时间准确度、性能）

setTimeout/setInterval、requestAnimationFrame 区别：

引擎层面：setTimeout/setInterval 属于 JS 引擎，requestAnimationFrame 属于 GUI 引擎；JS 引擎与 GUI 引擎互斥，也就是说，GUI 引擎在渲染时，会阻塞 JS 引擎的计算
时间是否准确：setTimeout/setInterval 是宏任务，根据事件轮询机制，其他任务会阻塞或延迟 js 任务的执行，会出现定时器不准的情况；requestAnimationFrame 刷新频率是固定且准确的
性能层面：当页面被隐藏或最小化时，setTimeout/setInterval 定时器仍会在后台执行动画任务，而使用 requestAnimationFrame 当页面处于未激活的状态下，屏幕刷新任务会被系统暂停

8、JavaScript 的加载方式

1）正常模式（阻塞DOM）

正常模式下，JS 会阻塞 dom 渲染

浏览器必须等待 index.js 加载和执行完成后，才能去做其它事情

<script src="index.js"></script>

2）async 模式（不阻塞DOM，加载无序）

<script async src="index.js"></script>

async 模式下，JS 的加载是异步的，不会阻塞 DOM 渲染

async 加载是无顺序的，当它加载结束，JS 会立即执行

使用场景：若该 JS 与 DOM 元素没有依赖关系，可以使用 async 模式，比如埋点统计

3）defer 模式（不阻塞DOM，加载有序）

defer 可以用来控制 JS 文件的执行顺序，比如 element-ui.js 和 vue.js

因为 element-ui.js 依赖于 vue，所以必须先引入 vue.js，再引入 element-ui.js

<script defer src="vue.js"></script>
<script defer src="element-ui.js"></script>

defer 模式下，JS 的加载是异步的，不会阻塞 DOM 渲染

defer 资源会在 DOMContentLoaded 执行之前，如果有多个设置了 defer 的 script 标签存在，则会按照引入的前后顺序执行，即便是后面的 script 资源先返回

使用场景：一般情况下都可以使用 defer，特别是需要控制资源加载顺序时

4）module 模式（不阻塞DOM，加载有序）

<script type="module">import { a } from './a.js'</script>

在主流的现代浏览器中，script 标签的属性可以加上 type="module"，浏览器会对其内部的 import 引用发起 HTTP 请求，获取模块内容

这时 script 的行为会像是 defer 一样，在后台下载，并且等待 DOM 解析

Vite 就是利用浏览器支持原生的 es module 模块，开发时跳过打包的过程，提升编译效率

5）preload 模式（link 属性，首页[关键]资源提前加载）

<link rel="preload" as="script" href="index.js">

link 标签的 preload 属性：提前加载某些依赖

preload 特点：

preload 加载的资源，是在浏览器渲染机制之前进行处理的，并且不会阻塞 onload 事件；
preload 加载的 JS 脚本，加载完成后不会立即调用，而是等到需要时再调用；

vue2 项目打包生成的 index.html 文件，会给首页资源全部添加 preload，实现关键资源的提前加载

6）prefetch 模式（link 属性，非首页[关键]资源提前加载）

<link rel="prefetch" as="script" href="index.js">

link 标签的 prefetch 属性：利用浏览器的空闲时间，加载页面将来可能用到的资源

prefetch 特点：

pretch 加载的资源，可以获取非当前页面的资源，并将其放入缓存至少5分钟（无论资源是否可以缓存）
当页面跳转时，未完成的 prefetch 请求不会被中断

可以用于加载其他页面（非首页）所需要的资源，以便加快后续页面的打开速度

PS：现代框架已经将 preload、prefetch 添加到打包流程中了，可以通过灵活的配置，去使用预加载功能

9、图片优化

如何去压缩图片，让图片更快的展示出来，有很多优化工作可以做（比如淘宝首页的图片资源都很小）

动态裁剪图片（压缩裁剪）

经过动态裁剪后的图片，可能会从 1.8M 降低至 12.8KB，加载速度显著提升

很多云服务，比如阿里云或七牛云，都提供了图片的动态裁剪功能

只需在图片的 url 地址上动态添加参数，就可以得到你所需要的尺寸大小，比如：

http://7xkv1q.com1.z0.glb.clouddn.com/grape.jpg?imageView2/1/w/200/h/200

图片懒加载（到可视区域再加载）

JavaScript 图片懒加载 – Web前端工程师面试题讲解_哔哩哔哩_bilibiliJavaScript 图片懒加载 – Web前端工程师面试题讲解, 视频播放量 35335、弹幕量 150、点赞数 1291、投硬币枚数 899、收藏人数 1643、转发人数 107, 视频作者技术蛋老师, 作者简介技能和观点的长期分享，相关视频：转行前端后的第一次技术面试，凉凉咯，图片懒加载和预加载，Vue怎么做图片懒加载？，Async Await关键字 – 让我们更优化地写代码 – JavaScript前端Web工程师，面试官：假如有十万条数据，前端应该怎么处理？分页渲染？no，你应该回答这个…，前端面试：说几种图片懒加载的实现方式。追问：怎么知道是否进入可视区域了？这几点必说……，Cookie、Session、Token究竟区别在哪？如何进行身份认证，保持用户登录状态？，彻底搞懂图片懒加载和预加载，公司昨天入职的211大学毕业的程序员，昨天看了项目代码，今天就开始写了，而且还没有报错，真的很厉害，JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续https://www.bilibili.com/video/BV1FU4y157Li/?spm_id_from=333.999.0.0

什么是图片懒加载？

对于一些图片量较大的首页，只需呈现可视区域的图片，当用户滑动页面时，再去加载新的

图片懒加载原理？

浏览器会自动对页面中的 img 标签的 src 属性发送请求并下载图片
通过 html5 自定义属性 data-xxx 暂存 src 的值
图片出现在可视区域时，再将 data-xxx 赋值给 img 的 src 属性

<img src="" alt="" data-src="./images/1.jpg">
<img src="" alt="" data-src="./images/2.jpg">

这里以 vue-lazyload 插件为例

// 安装 
npm install vue-lazyload // main.js 注册
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png', // 图片加载失败时的占位图loading: 'dist/loading.gif', // 图片加载中时的占位图attempt: 1
})// 通过 v-lazy 指令使用
<ul>  <li v-for="img in list"><img v-lazy="img.src" :key="img.src" ></li>
</ul>

使用字体图标（体积小、样式灵活、兼容性好）

字体图标优点：

轻量级：一个图标字体要比一系列的图像小
灵活性：可以随意改变样式
兼容性：几乎支持所有的浏览器

图片转 base64 格式（减少 http 请求）

将小图片转换为 base64 编码字符串，并写入 HTML 或者 CSS 中，减少 http 请求

转 base64 格式的优缺点：

善于处理非常小的图片，因为 Base64 编码后，图片大小会膨胀为原文件的 4/3，如果对大图也使用 base64 编码，后者体积会明显增加，即便减少了 http 请求，也无法弥补增大文件体积带来的性能开销
在传输非常小的图片的时候，base64 带来的文件体积膨胀、以及浏览器解析 base64 的时间开销，与它节省掉的 http 请求开销相比，可以忽略不计

可以使用 url-loader 将图片转 base64：

// 安装
npm install url-loader --save-dev// 配置
module.exports = {module: {rules: [{test: /.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {// 小于 10kb 的图片转化为 base64limit: 1024 * 10}}]}]}
};

10、参考文章

路由懒加载原理及使用

vue-skeleton-webpack-plugin 骨架屏插件使用

前端性能优化-虚拟滚动

requestAnimationFrame制作动画

浅谈script标签中的async和defer

Tree-Shaking性能优化实践 – 原理篇

使用 Preload&Prefetch 优化前端页面的资源加载

github.com/xy-sea/blog

再次鸣谢博主海阔_天空，写的太棒了👍🎉

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/2117209.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

首屏加载优化-编程部落

首屏加载优化

最近沉迷逛某蓝色软件，收益良多！万分感谢博主海阔_天空，写的太棒了👍🎉
下面是原文链接，我在原文的基础上浅做个笔记，方便个人快速复习
前端性能优化——首页资源压缩63%、白屏时间缩短86% -……

编程日记2023/3/30 23:15:02

Archiver Appliance 事务处理流程

当 Archiver Appliance 开始运行后发生了什么：
mgmt服务：
config\DefaultConfigService.java
initialize() {this.mgmtRuntime new MgmtRuntimeState(this);startupExecutor Executors.newScheduledThreadPool(1, new ThreadFactory() {Overridep……

编程日记2023/3/30 23:14:48

CF1716F Bags with Balls

CF1716F Bags with Balls
题目大意
有nnn个袋子，每个袋子里面有mmm个球，分别标号为1,2,…,m1,2,\dots,m1,2,…,m。
你需要在每个袋子中取一个球，然后计算出你取出的标号是奇数的球的数量，记这个数量为FFF，求所有可能……

编程日记2023/3/30 23:14:39

WordPress Ajax Load More plugins CVE-2022-2943授权任意文件下载漏洞复现

目录
1.漏洞概述
2.影响版本
3.漏洞等级
4.漏洞复现
5.Nuclei自动化扫描POC 1.漏洞概述 WordPress Infinite Scroll Ajax Load More plugin由于alm_repeaters_export()函数上的文件路径验证不足，Ajax L…

编程日记2023/3/30 23:14:26

YOLOv5源码逐行超详细注释与解读（7）——网络结构（2）common.py

前言
上一篇我们一起学习了YOLOv5的网络模型之一yolo.py，它这是YOLO的特定模块，而今天要学习另一个和网络搭建有关的文件——common.py，这个文件存放着YOLOv5网络搭建常见的通用模块。如果我们需要修改某一模块，那么就需要修改这……

编程日记2023/3/30 23:14:16

Windows命令：tasklist「建议收藏」

TASKLIST [/S system [/U username [/P [password]]]][/M [module] | /SVC | /V] [/FI filter] [/FO format] [/NH]
描述: 该工具显示在本地或远程机器上当前运行的进程列表。
参数列表: /S system 指定连接到的远程系统。 /U [domain\]user 指定……

编程日记2023/3/30 23:14:05

python项目总结–pip常用命令

python项目总结–pip常用命令
1.pip 安装和使用
1.1安装
1、pip下载
[rootlocalhost admin]# wget "https://pypi.python.org/packages/source/p/pip/pip-1.5.4.tar.gz2、解压安装
[rootlocalhost admin]# tar -xzvf pip-1.5.4.tar.gz
[rootlocalhost admin]# mv pip……

编程日记2023/3/30 23:13:27

哈利波特c++千行代码

代码：
//1.3.0
//游戏新增：
//自己看
//BUG修复：
//战斗BUG
//一样，代码5000多行，比龙的传人好一些…
#include <iostream>
#include <string>
#include <windows.h>
#include <conio.h>
#i……

编程日记2023/3/30 23:13:16

二.TypeScript环境搭建以及基础配置

二. TypeScript环境搭建以及基础配置
Start
本篇文章主要介绍学习 TypeScript必须的一些基础配置
1. 安装nodejs
前端环境必备 nodejs，可自行下载。
1.1 下载方式官网下载；访问官网点击这里~ 通过 nvm下载； window版本：点击……

编程日记2023/3/30 23:13:04 首屏加载优化-编程部落

Web MVC简介

Web MVC简介
1.1、Web开发中的请求-响应模型：在Web世界里，具体步骤如下： 1、 Web浏览器（如IE）发起请求，如访问http://sishuok.com 2、 Web服务器（如Tomcat）接收请求，……

编程日记2023/3/30 23:12:49

HR：面试官最爱问的linux问题，看看你能答对多少

文章目录摘要Linux的文件系统是什么样子的？如何访问和管理文件和目录？如何在Linux中查看和管理进程？如何使用Linux命令行工具来查看系统资源使用情况？如何配置Linux系统的网络设置？如何使用Linux的cron任务调度器来执行……

编程日记2023/4/16 14:56:56

vscode开发常用的工具栏选项,查看源码技巧以及【vscode常用的快捷键】

一、开发常用的工具栏选项
1、当前打开的文件快速在左侧资源树中定位：其实打开了当前的文件已经有在左侧资源树木定位了，只是颜色比较浅 2、打开太多文件的时候，可以关闭 3、设置查看当前类或文件的结构 OUTLINE
相当于idea 查看当前类或接……

编程日记2023/4/16 14:56:45

数据要素化条件之一：原始性

随着技术的发展，计算机不仅成为人类处理信息的工具，而且逐渐地具有自主处理数据的能力，出现了替代人工的数据智能技术。数据智能的大规模使用需要关于同一分析对象或同一问题的、来源于不同数据源的海量数据。这种数据必须是针对特定对象的记……

编程日记2023/4/16 14:56:36

【面试题高逼格利用类实现加法】编写代码, 实现多线程数组求和.

编写代码, 实现多线程数组求和.关键1. 数组的初始化关键2. 奇偶的相加import java.util.Random;public class Thread_2533 {public static void main(String[] args) throws InterruptedException {// 记录开始时间long start System.currentTimeMillis();// 1. 给定一个很长的……

编程日记2023/4/16 14:56:10

一个python训练

美国:28:麻省理工学院,斯坦福大学,哈佛大学,加州理工学院,芝加哥大学,普林斯顿大学,宾夕法尼亚大学,耶鲁大学,康奈尔大学,哥伦比亚大学,密歇根大学安娜堡分校,约翰霍普金斯大学,西北大学,加州大学伯克利分校,纽约大学,加州大学洛杉矶分校,杜克大学,卡内基梅隆大学,加州大学圣地……

编程日记2023/4/16 14:55:59

Mybatis03学习笔记

目录使用注解开发
设置事务自动提交
mybatis运行原理
注解CRUD
lombok使用（偷懒神器，大神都不建议使用）
复杂查询环境（多对一）
复杂查询环境（一对多）
动态sql环境搭建
动态sql常用标签……

编程日记2023/4/16 14:55:50 首屏加载优化-编程部落

设置或取得c# NumericUpDown 编辑框值的方法,(注意：不是Value值)

本人在C#开发中使用到了NumericUpDown控件，但是发现该控件不能直接控制显示值，经研究得到下面的解决办法
NumericUpDown由于是由多个控件组合而来的控件，其中包含一个类似TextBox的控件，若想取得或改变其中的值要使用如下方法
N……

编程日记2023/4/16 14:55:46 首屏加载优化-编程部落

使用NPOI 技术的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

在使用NPOI技术开发自动操作EXCEL软件时遇到不能精确设置列宽的问题。
如
ISheet sheet1 hssfworkbook.CreateSheet("Sheet1");
sheet1.SetColumnWidth(0, 50 * 256); // 在EXCEL文档中实际列宽为49.29
sheet1.SetColumnWidth(1, 100 * 256); // 在EXCEL文……

编程日记2023/4/16 14:55:46 首屏加载优化-编程部落

Mysql 数据库zip版安装时basedir datadir 路径设置问题，避免转义符的影响

本人在开发Mysql数据库自动安装程序时遇到个很奇怪的问题，其中my.ini的basedir 的路径设置是下面这样的：
basedir d:\测试\test\mysql
但是在使用mysqld安装mysql服务时老是启动不了，报1067错误，后来查看window事件发现一个独特……

编程日记2023/4/16 14:55:45

java stream sorted排序考虑null值

项目里使用到排序, java里没有像C# 里的linq，只有stream,查找stream.sorted源码看到有个
Comparator.nullsLast
然后看了一下实现，果然是能够处理null值的排序，如：minPriceList.stream().sorted(Comparator.comparing(l -> l.g……

编程日记2023/4/16 14:55:45

首屏加载优化

1、路由懒加载

打包对比

实现原理 import()（分离 chunk）

webpackChunkName（指定打包时生成的代码块名）

路由懒加载 – 示例

2、组件懒加载

为啥用组件懒加载

组件懒加载 – 示例

组件懒加载 – 使用场景（条件触发的组件、公共组件、大体积 .js）

3、Tree shaking

作用（删除无用代码）

原理（ES6 可静态分析）

局限（只对用 export 导出的变量生效）

4、骨架屏

原理（将骨架屏内容放到 html 文件的根节点中）

骨架屏插件（vue-skeleton-webpack-plugin）

5、虚拟滚动

原理（监听 scroll，根据 scrollTop 截取 list 并展示）

虚拟滚动插件

6、Web Worker 优化长任务

控制台查看长任务（执行时间超过 50ms 的任务）

Web worker 举例（计算 20w 条数据）

Web Worker 通信时长

7、requestAnimationFrame GUI 定时器

是什么？有什么作用？（解决动画卡顿）

定时器区别（引擎、时间准确度、性能）

8、JavaScript 的加载方式

1）正常模式（阻塞DOM）

2）async 模式（不阻塞DOM，加载无序）

3）defer 模式（不阻塞DOM，加载有序）

4）module 模式（不阻塞DOM，加载有序）

5）preload 模式（link 属性，首页[关键]资源提前加载）

6）prefetch 模式（link 属性，非首页[关键]资源提前加载）

9、图片优化

动态裁剪图片（压缩裁剪）

图片懒加载（到可视区域再加载）

使用字体图标（体积小、样式灵活、兼容性好）

图片转 base64 格式（减少 http 请求）

10、参考文章

相关文章：

首屏加载优化

Archiver Appliance 事务处理流程

CF1716F Bags with Balls

WordPress Ajax Load More plugins CVE-2022-2943授权任意文件下载漏洞复现

YOLOv5源码逐行超详细注释与解读（7）——网络结构（2）common.py

Windows命令：tasklist「建议收藏」

python项目总结–pip常用命令

哈利波特c++千行代码

二.TypeScript环境搭建以及基础配置

Web MVC简介

HR：面试官最爱问的linux问题，看看你能答对多少

vscode开发常用的工具栏选项,查看源码技巧以及【vscode常用的快捷键】

数据要素化条件之一：原始性

【面试题 高逼格利用 类实现加法】编写代码, 实现多线程数组求和.

一个python训练

Mybatis03学习笔记

设置或取得c# NumericUpDown 编辑框值的方法,(注意：不是Value值)

使用NPOI 技术 的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

Mysql 数据库zip版安装时basedir datadir 路径设置问题，避免转义符的影响

java stream sorted排序 考虑null值

淘宝升钻安全吗？淘宝店上钻有什么好处？

淘宝提升销量安全吗？提升销量方法是什么？

最新文章

天马展示 200R 曲率动态冷弯 OLED 仪表中控屏及多频驱动 LCD 显示技术

赞助商推荐

标签

关注我们 么么哒！

关注我们的公众号

【面试题高逼格利用类实现加法】编写代码, 实现多线程数组求和.

使用NPOI 技术的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

java stream sorted排序考虑null值

关注我们么么哒！