Toypipi's blog

发表于 分类于 本文字数： 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>

参考文档

发表于 分类于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

PPT 的 PK 会

每个月花一天时间，产品团队的每个人做一份自己产品的规划出来讲，规划周期可以限定在三个月。团队的每个人轮流上去，下面的听众是团队的人。每个人讲完之后，听众轮流说一点 ”好“ 与一点 ”可以更好“ ，不许重复。当然，可以说规划的内容本身，也可以说 PPT 制作、演讲技巧等。主讲人自己记在白板上。全讲完了，主讲人统一回复讨论，事后回去优化规划的 PPT。

假设是一个六个人大小的团队，那么每份规划就可以得到五点好与五点可以更好，全组就有 30 点好与 30 点可以更好。相信 3~6 个月下来，大家的规划能力、PPT 制作能力都会有显著的提升。

阅读全文 »
0%