Toypipi's blog

发表于 分类于 本文字数： 116 阅读时长 ≈ 1 分钟

dependencies

指定项目依赖，值为包名加上版本号。

版本号可以指定一个范围，有以下语法。

  • version：精确的版本，例如 1.0.0
  • >version：大于 version
  • >=version：大于等于
  • <version: 小于
  • <=version: 小于等于
  • ~version: 允许补丁级别的变化，例如 ~1.2.3 表示 >=1.2.3 <1.3.0
  • ^version：允许不更改最左侧非0版本号数字的变化，例如 ^1.2.3 表示 >=1.2.3 <2.0.0
  • 1.2.x
  • http://...
  • *
  • version1 - version2 等同于 >=version1 <=version2
阅读全文 »

发表于 分类于 本文字数： 628 阅读时长 ≈ 2 分钟

常用 CSS 选择器名称和功能

选择器名称 实例 功能
#id #div 获取 id=“#div” 的元素
.class .red 获取 class=“red” 的全部元素
element div 获取所有
element element div p 获取
element,element div,p 获取全部
element>element div>p 获取父元素为
element+element div+p 获取紧接在
* * 获取所有元素
阅读全文 »

发表于 分类于 本文字数： 297 阅读时长 ≈ 1 分钟

Access-Control-Expose-Headers

响应首部 Access-Control-Expose-Headers 列出了哪些首部可以作为响应的一部分暴露给外部。

默认情况下，只有七种 simple response headers （简单响应首部）可以暴露给外部：

如果想要让客户端可以访问到其他的首部信息，可以将它们在 Access-Control-Expose-Headers 里面列出来。

阅读全文 »

发表于 更新于 分类于 本文字数： 123 阅读时长 ≈ 1 分钟

性能优化的指标和工具

  1. https://www.webpagetest.org/ 可以本地配置和安装
  2. lighthouse 用法：lighthouse + 网址
  3. Chorme DevTools
  4. 常用的性能测量 APIS

渲染优化

  1. 关键路径：JavaScript > Style > Layout > Paint > Composite
  2. 影响回流的操作：
  • 添加 / 删除元素
  • 操作 styles
  • display：none
  • offsetLeft， scrollTop，clientWidth
  • 移动元素位置
  • 修改浏览器大小，字体大小
  1. 复合线程（compositor thread）与图层（layers）
阅读全文 »

发表于 更新于 分类于 本文字数： 75 阅读时长 ≈ 1 分钟

Element Layout 布局设置奇数份分栏：

1.8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<el-col :xs="12" :sm="12" :lg="lgSpan" class="card-panel-col" v-for="item in panelData">
    <div class="card-panel">
        <div class="num">{{item.num}}</div>
        <div class="name">{{item.name}}</div>
    </div>
</el-col>

<script>
props: {
    lgSpan: {
        type: Object,
        default: function() {
          return { span: '4-8' }
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-col-lg-4-8 {
        width: 20%;
    }
</style>

参考文档

0%