小林_js
前端
你管我干嘛嘞
获得徽章 0
flex布局?
1. 流布局、flex布局都是一维布局
2. display
a. flex、inline-flex
3. flex-direction
a. row、column、row-reverse、column-reverse
4. flex-wrap
a. nowrap、wrap、wrap-reverse
5. flex-flow
a. flex-direction|flex-wrap
6. justify-content
a. flex-start、flex-end、center、space-around、space-between、space-evenly
b. space-around：包括左右边距的项目平分
c. space-between：两边靠边，剩下间隔平均
d. space-evenly：所有间隔平分
7. align-content
a. 控制多行flex项目在交叉轴上的对齐方式，前提flex-wrap: wrap;
b. flex-start、flex-end、center、space-around、space-between、stretch
8. align-items
a. 单行flex项目在交叉轴上的对齐方式
b. flex-start、flex-end、center、stretch
c. stretch：未设置高度的子元素拉伸占满交叉轴
9. align-self
a. 覆盖父元素的align-items，单独控制该子元素在交叉轴上对齐方式，父元素的align-center更大
b. flex-start、flex-end、center、stretch、baseline
10. order
a. 定义子元素的排列顺序
b. 默认值0，可以为负数，设置数字，越小越靠前
11. flex
a. 定义子元素分配剩余空间，用来占多少份数
b. flex-shrink|flex-grow|flex-basis、none(0 0 auto)、auto(1 1 auto)
1. 流布局、flex布局都是一维布局
2. display
a. flex、inline-flex
3. flex-direction
a. row、column、row-reverse、column-reverse
4. flex-wrap
a. nowrap、wrap、wrap-reverse
5. flex-flow
a. flex-direction|flex-wrap
6. justify-content
a. flex-start、flex-end、center、space-around、space-between、space-evenly
b. space-around：包括左右边距的项目平分
c. space-between：两边靠边，剩下间隔平均
d. space-evenly：所有间隔平分
7. align-content
a. 控制多行flex项目在交叉轴上的对齐方式，前提flex-wrap: wrap;
b. flex-start、flex-end、center、space-around、space-between、stretch
8. align-items
a. 单行flex项目在交叉轴上的对齐方式
b. flex-start、flex-end、center、stretch
c. stretch：未设置高度的子元素拉伸占满交叉轴
9. align-self
a. 覆盖父元素的align-items，单独控制该子元素在交叉轴上对齐方式，父元素的align-center更大
b. flex-start、flex-end、center、stretch、baseline
10. order
a. 定义子元素的排列顺序
b. 默认值0，可以为负数，设置数字，越小越靠前
11. flex
a. 定义子元素分配剩余空间，用来占多少份数
b. flex-shrink|flex-grow|flex-basis、none(0 0 auto)、auto(1 1 auto)
展开
5
2
Gulp前端构建工具？
1. 功能
a. 文件合并：你可以将多个 CSS 或 JavaScript 文件合并为一个文件，这样可以减少浏览器的 HTTP 请求次数，从而提高网页加载速度
b. 文件压缩：你可以压缩 CSS、JavaScript 和图片文件，以减小它们的大小，从而提高网页加载速度
c. 编译预处理器：如果你使用了 CSS 预处理器（如 Sass 或 Less）或 JavaScript 预处理器（如 TypeScript 或 Babel），你可以使用 Gulp 来自动编译这些文件
d. 自动刷新浏览器：当你修改了源代码后，Gulp 可以自动刷新浏览器，让你立即看到修改的效果
2. 在 gulpfile.js 文件中，你可以定义一系列的任务，然后通过命令行工具运行这些任务
1. 功能
a. 文件合并：你可以将多个 CSS 或 JavaScript 文件合并为一个文件，这样可以减少浏览器的 HTTP 请求次数，从而提高网页加载速度
b. 文件压缩：你可以压缩 CSS、JavaScript 和图片文件，以减小它们的大小，从而提高网页加载速度
c. 编译预处理器：如果你使用了 CSS 预处理器（如 Sass 或 Less）或 JavaScript 预处理器（如 TypeScript 或 Babel），你可以使用 Gulp 来自动编译这些文件
d. 自动刷新浏览器：当你修改了源代码后，Gulp 可以自动刷新浏览器，让你立即看到修改的效果
2. 在 gulpfile.js 文件中，你可以定义一系列的任务，然后通过命令行工具运行这些任务
展开
评论
3
虚拟滚动？
1. 定义：一种优化技术，用于处理大量数据列表的渲染问题，通过仅渲染当前视口可见的部分数据，而不是一次性渲染所有数据，从而提高性能和用户体验
2. 工作原理
a. 计算视口大小：确定用户在屏幕上可见的区域大小
b. 计算可见数据范围：根据视口大小和每个列表项的高度，计算出当前可见的数据范围
c. 渲染可见数据：仅渲染当前可见范围内的数据项
d. 动态调整：当用户滚动列表时，动态调整可见数据范围，并重新渲染新的可见数据项
3. 优点
a. 性能优化：通过减少DOM元素的数量，显著提高渲染性能，尤其是在处理大量数据时
b. 内存优化：减少内存占用，因为只有可见的数据项被渲染
c. 流畅的用户体验：用户可以流畅地滚动列表，动态调整可见数据范围，并重新渲染新的可见数据项
4. 第三方库
a. React：react-virtualized或react-window
b. Vue：vue-virtual-scroller
c. Angular：ngx-virtual-scroller
1. 定义：一种优化技术，用于处理大量数据列表的渲染问题，通过仅渲染当前视口可见的部分数据，而不是一次性渲染所有数据，从而提高性能和用户体验
2. 工作原理
a. 计算视口大小：确定用户在屏幕上可见的区域大小
b. 计算可见数据范围：根据视口大小和每个列表项的高度，计算出当前可见的数据范围
c. 渲染可见数据：仅渲染当前可见范围内的数据项
d. 动态调整：当用户滚动列表时，动态调整可见数据范围，并重新渲染新的可见数据项
3. 优点
a. 性能优化：通过减少DOM元素的数量，显著提高渲染性能，尤其是在处理大量数据时
b. 内存优化：减少内存占用，因为只有可见的数据项被渲染
c. 流畅的用户体验：用户可以流畅地滚动列表，动态调整可见数据范围，并重新渲染新的可见数据项
4. 第三方库
a. React：react-virtualized或react-window
b. Vue：vue-virtual-scroller
c. Angular：ngx-virtual-scroller
展开
评论
2
v-once与v-memo？
1. Vue.js中的指令，用于优化性能
2. v-once
a. 定义：用于指示Vue只渲染元素和组件一次，并且在随后的重新渲染中，元素或组件及其所有子节点都被视为静态内容并跳过
b. 优点：性能优化（通过跳过静态内容的重新渲染，可以提高应用的性能）；减少不必要的更新（对于不需要动态更新的内容，使用v-once可以避免不必要的DOM操作）
3. v-memo
a. 定义：Vue3的一个指令，用于在组件或元素上进行记忆化，以优化性能，类似于v-once，但更加灵活，可以根据指定的依赖数组来决定是否重新渲染
b. 优点：更细粒度的控制（v-memo允许你指定依赖数组，只有当依赖数组中的值发生变化时，才会重新渲染元素或者组件）；性能优化（通过避免不必要的重新渲染，可以显著提高应用的性能）
4. 总结
a. v-once：用于只渲染一次的内容，适用于静态内容
b. v-memo：用于根据依赖数组决定是否重新渲染，适用于需要细粒度控制的动态内容
1. Vue.js中的指令，用于优化性能
2. v-once
a. 定义：用于指示Vue只渲染元素和组件一次，并且在随后的重新渲染中，元素或组件及其所有子节点都被视为静态内容并跳过
b. 优点：性能优化（通过跳过静态内容的重新渲染，可以提高应用的性能）；减少不必要的更新（对于不需要动态更新的内容，使用v-once可以避免不必要的DOM操作）
3. v-memo
a. 定义：Vue3的一个指令，用于在组件或元素上进行记忆化，以优化性能，类似于v-once，但更加灵活，可以根据指定的依赖数组来决定是否重新渲染
b. 优点：更细粒度的控制（v-memo允许你指定依赖数组，只有当依赖数组中的值发生变化时，才会重新渲染元素或者组件）；性能优化（通过避免不必要的重新渲染，可以显著提高应用的性能）
4. 总结
a. v-once：用于只渲染一次的内容，适用于静态内容
b. v-memo：用于根据依赖数组决定是否重新渲染，适用于需要细粒度控制的动态内容
展开
评论
4
vue 前端数据一万条卡顿怎么处理？
1. 分页加载：将数据分页加载，每次只加载当前页的数据，而不是一次性加载所有数据
2. 虚拟滚动：使用虚拟滚动技术，只渲染可见区域的数据，而不是全部数据，可以借助第三方库如vue-virtual-scroller
3. 数据过滤和排序：在用户输入查询条件时，动态过滤和排序数据，而不是一次性加载所有数据
4. 使用v-once和v-memo：对于不需要更新的静态内容，可以使用v-once或v-memo来优化性能
5. 避免不必要的响应数据：对于不需要响应式的数据，可以使用Object.freeze来冻结对象，避免Vue对其进行响应式处理
1. 分页加载：将数据分页加载，每次只加载当前页的数据，而不是一次性加载所有数据
2. 虚拟滚动：使用虚拟滚动技术，只渲染可见区域的数据，而不是全部数据，可以借助第三方库如vue-virtual-scroller
3. 数据过滤和排序：在用户输入查询条件时，动态过滤和排序数据，而不是一次性加载所有数据
4. 使用v-once和v-memo：对于不需要更新的静态内容，可以使用v-once或v-memo来优化性能
5. 避免不必要的响应数据：对于不需要响应式的数据，可以使用Object.freeze来冻结对象，避免Vue对其进行响应式处理
展开
6
4
存量市场与增量市场？
存量市场和增量市场是市场经济中常用的两个概念，用来描述市场的发展情况和机会。
存量市场指的是已经存在并且相对饱和的市场。在这样的市场中，竞争已经很激烈，市场份额的争夺变得困难。在存量市场中，企业主要通过维持现有客户、提高产品质量、降低成本等方式来争取更多的市场份额。存量市场通常需要更多的市场份额来实现增长，因此企业在这样的市场中需要更加注重市场细分、产品创新和差异化竞争。
增量市场指的是尚未完全开发和利用的市场。在这样的市场中，竞争相对较少，市场份额的争夺相对容易。增量市场通常存在着更多的机会和潜在需求，企业可以通过开拓新的市场细分、推出新产品或服务等方式来获取更多的市场份额。在增量市场中，企业可以更加注重市场扩展、渗透和创造需求。
在实际经营中，企业需要根据自身的实力、资源和市场环境来选择在存量市场还是增量市场进行竞争。一般来说，存量市场具有稳定的客户基础和市场份额，但竞争激烈；而增量市场具有较大的发展潜力，但需要更多的市场开拓和投入。企业可以根据自身的竞争优势和战略定位来选择适合的市场，并制定相应的市场营销策略。
存量市场和增量市场是市场经济中常用的两个概念，用来描述市场的发展情况和机会。
存量市场指的是已经存在并且相对饱和的市场。在这样的市场中，竞争已经很激烈，市场份额的争夺变得困难。在存量市场中，企业主要通过维持现有客户、提高产品质量、降低成本等方式来争取更多的市场份额。存量市场通常需要更多的市场份额来实现增长，因此企业在这样的市场中需要更加注重市场细分、产品创新和差异化竞争。
增量市场指的是尚未完全开发和利用的市场。在这样的市场中，竞争相对较少，市场份额的争夺相对容易。增量市场通常存在着更多的机会和潜在需求，企业可以通过开拓新的市场细分、推出新产品或服务等方式来获取更多的市场份额。在增量市场中，企业可以更加注重市场扩展、渗透和创造需求。
在实际经营中，企业需要根据自身的实力、资源和市场环境来选择在存量市场还是增量市场进行竞争。一般来说，存量市场具有稳定的客户基础和市场份额，但竞争激烈；而增量市场具有较大的发展潜力，但需要更多的市场开拓和投入。企业可以根据自身的竞争优势和战略定位来选择适合的市场，并制定相应的市场营销策略。
展开
4
5