mutouren_abc的博客

Restful API 接口规范

【代码】javascript 中 substr 与 substring 的区别。

你遇到过性能很差的网页吗？这种网页响应非常缓慢，占用大量的CPU和内存，浏览起来常常有卡顿，页面的动画效果也不流畅。本文将详细介绍性能问题的出现原因，以及解决方法。一、网页生成的过程要理解网页性能为什么不好，就要了解网页是怎么生成的。网页的生成过程，大致可以分成五步。1. HTML代码转化成DOM2. CSS代码转化成CSSOM(CSS Object Model)3. 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）4. 生成布局（layout），即将所有

获取设备连接的摄像头数量软件启动时，在前端获取到摄像头数量，然后发送到后端，后端再进行相应的业务处理。当前项目有个需求，需要根据连接的USB摄像头数量，显示不同的页面。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置灵活性，无需 eject。Vue CLI 有几个独立的部分。CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令，它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue s

JS设置document.domain实现跨域

本文从三个角度来研究 JavaScript 的事件循环：JavaScript 是网景（Netscape）公司为其旗下的网景浏览器提供更复杂网页交互时所推出的一个动态脚本语言。其创作者 Eich 在 10 天内写出了 JavaScript 的第一个版本，通过 Eich 在 JavaScript 20 周年的演讲回顾中，我们可以发现 JavaScript 在最初设计的时候没有考虑所谓的事件循环。那么事件循环到底是怎么出现的？首先让我们来看看引入 JavaScript 到网页端的经典用例：一个用户打开一个网页，填

letter-spacing， 清除空格

ES6, Symbol

响应式开发, flex布局，防止图片变形，文本溢出

UTC时间

前言前端开发中，只要涉及到列表渲染，那么无论是 React 还是 Vue 框架，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。key的作用Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着极

css三种引入方式：内联、页级、外联内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。 页级CSS也可称为内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。 外联CSS也可称为外部

什么是Flex布局？Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。display:flex 与 display: inline-flexdisplay:flexflex容器指定为块级元素 display:inline-flexflex容器指定为行内元素..

一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。网格容器(Grid Container)属性display grid-template-columns grid-template-rows grid-template-areas grid-template grid-column-gap grid-row-gap grid-gap ju

浮动元素使其父元素高度塌陷情况描述：给一个元素设置浮动之后float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。原因：当元素设置浮动后，会自动脱离文档流，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）解决方法：.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px);}auto-fit：自适应数量，栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的100px宽的列。 minmax()：定义的范围大于或等于 min， 小于或等于 ma...

参考链接????为什么说DOM操作很慢chrome调试-性能分析performance篇

1. 像素像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。我们在js或者css代码中使用的px单位就是指的是css像素，物理像素也称为设备像素，只与设备或者说硬件有关，同样尺寸的屏幕，设备的密度越高，物理像素也就越多。css像素和物理像素的具体区别：css像素：为web开发者提供，在css中使用的一个抽象单位。 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。???? 那么css像素与物理像素的转换关系是怎么样的呢

可以通过设置transform属性，达到字体缩放的目的。span { font-size: 12px; font-weight: bold; transform: scale(0.7);}

在一个层叠上下文中，一共可能出现七个层叠等级，从最低到最高排列，依次是：背景和边框 ：形成层叠上下文的元素的背景和边框，它是整个上下文中层叠等级最低的 Z-Index 为负数 ：设置了 z-index 为负数的子元素以及由它所产生的层叠上下文 块级盒模型：位于正常文档流中的、块级的、非定位的子元素 浮动盒模型 ：浮动的、非定位的子元素 内联盒模型 ：位于正常文档流中的、内联的、非定位的子元素 Z-index 为 0：设置了 z-index 为 0 的、定位的子元素以及由它所产生的层叠上下文

使用案例把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:

定义和用法text-overflow 属性规定当文本溢出包含元素时发生的事情。取值clip: 修剪文本。 ellipsis: 显示省略符号来代表被修剪的文本。 string: 使用给定的字符串来代表被修剪的文本。示例...

1. 利用 CSS 穿透覆盖默认样式常见发生场景：假如我们需要通过 input，type=”file”来上传文件，而这个 input 的默认样式，可以说是非常地丑。所以我们希望通过一张图片，与这个 input 大小一样，位置一致地盖在上面。这个时候，显然，这个时候点击图片，input 是不会起作用的。就是因为 img 隔绝了 click 的穿透，而我们希望的是，这个 img 只是视觉上遮挡了 input 的样式，但是点击的时候还是点击到 input。所以，只要让 img 可穿透即可。css 代码如下：