-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.json
1 lines (1 loc) · 39.9 KB
/
search.json
1
[{"title":"Bootstrap V5 色彩变量设置","url":"/2021/03/31/frontend/bs5-var/","content":"\n从v3开始就学习bootstrap的全局变量设置，对比v3在变量设置方面，v5还是有很大变化的。\n\n得益于sass版本的升级，bsV4 的变量设置开始就与前几个版本有较大不同，v5是进行了进一步升级。\n\n```scss\n// Color system\n\n// scss-docs-start gray-color-variables\n$white: #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black: #000 !default;\n\n// scss-docs-start color-variables\n$blue: #0d6efd !default;\n$indigo: #6610f2 !default;\n$purple: #6f42c1 !default;\n$pink: #d63384 !default;\n$red: #dc3545 !default;\n$orange: #fd7e14 !default;\n$yellow: #ffc107 !default;\n$green: #198754 !default;\n$teal: #20c997 !default;\n$cyan: #0dcaf0 !default;\n```\n\n以上就是bs v5所使用的所有颜色的基础色，主要分为灰色系和彩色系。这些颜色会作为基础色，在系统中进行使用。这样做一方面可以统一管理色彩，另一方面方便做系统色系的变更。\n\n例如，系统的色彩设置如下：\n\n```scss\n$primary: $blue !default;\n$secondary: $gray-600 !default;\n$success: $green !default;\n$info: $cyan !default;\n$warning: $yellow !default;\n$danger: $red !default;\n$light: $gray-100 !default;\n$dark: $gray-900 !default;\n```\n\n他们使用的基础色作为主题色的变量。\n\n另一方面，不同的 `$blue-xxx` 也是源自于基础的`$blue`,如下：\n\n```scss\n// fusv-disable\n$blue-100: tint-color($blue, 80%) !default;\n$blue-200: tint-color($blue, 60%) !default;\n$blue-300: tint-color($blue, 40%) !default;\n$blue-400: tint-color($blue, 20%) !default;\n$blue-500: $blue !default;\n$blue-600: shade-color($blue, 20%) !default;\n$blue-700: shade-color($blue, 40%) !default;\n$blue-800: shade-color($blue, 60%) !default;\n$blue-900: shade-color($blue, 80%) !default;\n```\n\n其中的变换方法已不再使用v3的变换，v3是使用SASS自带的 `darken()`和`lighten()`方法，进行基础色的变淡、变深。\n\n而v5版本，是使用上述`tint-color()`和`shade-color()`方法。在`_function.scss`源码中,是这样定义这两个方法的：\n\n```scss\n// scss-docs-start color-functions\n// Tint a color: mix a color with white\n@function tint-color($color, $weight) {\n @return mix(white, $color, $weight);\n}\n\n// Shade a color: mix a color with black\n@function shade-color($color, $weight) {\n @return mix(black, $color, $weight);\n}\n```\n\nmix方法，参见 https://sass-lang.com/documentation/modules/color#mix 是混合色彩所用。\n\n后续我们再分析下其它变量的设置。","tags":["色彩变量"]},{"title":"Bootstrap V5的一些新特性","url":"/2021/03/29/frontend/bs5/","content":"\n* 依旧是使用 `SASS` \n* 不出所料IE居然被移出 `Bootstrap V5` 支持范围。[官网链接](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#internet-explorer)\n\n\n\n发现有以下的一些新的特性\n\n**1.Accessibility 无障碍支持**\n\n无障碍看上去是个特别小众的需求，但是越来越重要。\n\nhttps://getbootstrap.com/docs/5.0/getting-started/accessibility/\n\n**2.RFS - Responsive Font Sizes**\n\nRFS是啥？\n\n> 原文\n> Bootstrap’s side project RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.\n> The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior.\n> 翻译\n> Bootstrap的辅助项目RFS是一个单元大小调整引擎，最初是为了调整字体大小而开发的（因此其缩写为Responsive Font Sizes）。如今RFS能够与单位值重新缩放最CSS属性等margin，padding，border-radius，或甚box-shadow。\n> 该机制会根据浏览器视口的尺寸自动计算适当的值。它将被编译为calc()具有rem和视口单元混合的函数，以启用响应式缩放行为。\n\n怎么使用待后续补充～暂时没明白应该如何使用。\n\n**3.RTL - Right To Left**\n\n目前处于试验阶段，主要作用是支持系统文字从右到左的切换。有些语系与众不同，不是从左到右的，是从右到左的。排列布局呢就需要特殊定义，看来bs5还是很考虑很全面的。点赞\n\n> Support for right-to-left text in Bootstrap across our layout, components, and utilities.\n\n如何使用，待续～\n\n","tags":["Bootstrap V5"]},{"title":"NPM依赖配置","url":"/2021/03/16/frontend/npm-dependence/","content":"\n记得在学习框架的前期，老是很奇怪，`npm` 安装依赖的时候，一会儿是加 `-D` 一会儿加 `--save`、`-dev`啥的，都是啥、啥、啥呀！\n\n\n\n好的，我们从头开始～\n\n## 1.“dependencies”和“devDependencies”\n\n通常我们的项目是从一行命令开始的：\n\n```\nnpm init\n```\n\n这个时候，会生成一个文件，它的名字叫 `package.json`，内容是这样的\n\n```json\n{\n \"name\": \"test\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"author\": \"\",\n \"license\": \"ISC\"\n}\n```\n\n当我们安装了依赖，`package.json`中会多依赖的配置：\n\n* dependencies： 表示生产环境下的依赖管理；\n* devDependencies： 表示开发环境下的依赖管理；\n\n项目上线以后依然是要继续使用的，我们就要安装在生产环境中，否则上线运行会产生问题。而是生成 `dependencies` 还是 `devDependencies`，主要就取决于安装依赖的方式。\n\n要安装开发环境下的 `devDependencies`，要使用 `--save-dev`.\n\n```\nnpm install --save-dev packageName\n# 简写\nnpm i -D packageName\n```\n\n要安装生产环境下的 `dependencies`，要使用 `--save`\n\n```\nnpm install --save packageName\n# 简写\nnpm i -S packageName\n```\n\n## 2.来点进阶的——“peerDependencies”\n\n参考：\n\n* https://nodejs.org/en/blog/npm/peer-dependencies/\n* https://www.cnblogs.com/ajaemp/p/12982101.html\n\n最近有遇到一个问题，可能会用到它！\n\n暂时还没整透彻，整透彻我再补充。\n","tags":["npm"]},{"title":"2021年小目标","url":"/2021/03/15/other/2021/","content":"\n第一个季度快过去了，制定一下迟来的2021年的个人小计划。\n\n每周在空余时间，或在单位休息时间完成：\n\n* 完成2道算法题练习和知识点学习，周三、周五完成。\n* 每周学习、复习一个前端知识点，形成记录上传blog，每周日前完成。\n* 每周阅读新文章，周四完成。\n\n每天坚持进步一点点！","tags":["目标和总结"]},{"title":"2019年中级软件设计师考试大纲","url":"/2021/03/11/other/software/","content":"\n一、考试说明\n\n1.考试目标\n\n通过本考试的合格人员能根据软件开发项目管理和软件工程的要求，按照系统总体设计规格说明书进行软件设计，编写程序设计规格说明书等相应的文档，组织和指导程序员编写、调试程序，并对软件进行优化和集成测试，开发出符合系统总体设计要求的高质量软件;具有工程师的实际工作能力和业务水平。\n\n2.考试要求\n\n(1)掌握计算机内的数据表示、算术和逻辑运算方法;\n\n(2)掌握相关的应用数学及离散数学基础知识;\n\n(3)掌握计算机体系结构以及各主要部件的性能和基本工作原理;\n\n(4)掌握操作系统、程序设计语言的基础知识，了解编译程序的基本知识;\n\n(5)熟练掌握常用数据结构和常用算法;\n\n(6)熟悉数据库、网络和多媒体的基础知识;\n\n(7)掌握C程序设计语言，以及C++、Java中的一种程序设计语言;\n\n(8)熟悉软件工程、软件过程改进和软件开发项目管理的基础知识;\n\n(9)掌握软件设计的方法和技术;\n\n(10)了解信息化、常用信息技术标准、安全性，以及有关法律、法规的基础知识;\n\n(11)正确阅读和理解计算机领域的英文资料。\n\n二、考试范围\n\n考试科目 1：计算机与软件工程知识\n\n1. 计算机科学基础知识\n\n1.1 数制及其转换\n\n二进制、八进制、十进制和十六进制等常用数制及其相互转换\n\n1.2 计算机内数据的表示\n\n数的表示（补码表示，整数和实数的表示，精度和溢出）\n\n非数值表示（字符和汉字表示，声音表示、图像表示）\n\n1.3 算术运算和逻辑运算\n\n计算机中的二进制数运算方法\n\n逻辑代数的基本运算\n\n1.4 其他数学基础知识\n\n常用数值计算\n\n排列组合，概率论应用，应用统计（数据的统计分析）\n\n编码基础\n\n命题逻辑、谓词逻辑、形式逻辑的基础知识\n\n运筹基本方法\n\n2. 计算机系统知识\n\n2.1 计算机硬件基础知识\n\n2.1.1 计算机系统的组成、体系结构分类及特性\n\nCPU、存储器的组成、性能和基本工作原理\n\n常用 I/O 设备、通信设备的性能以及基本工作原理\n\nI/O 接口的功能、类型和特性\n\nCISC/RISC，流水线操作，多处理机，并行处理\n\n2.1.2 存储系统\n\n虚拟存储器基本工作原理，多级存储体系\n\nRAID 类型和特性\n\n2.1.3 可靠性与系统性能评测基础知识\n\n诊断与容错\n\n系统可靠性分析评价\n\n计算机系统性能评测方法\n\n2.2 计算机软件知识\n\n2.2.1 数据结构与算法知识\n\n数组\n\n链表\n\n队列、栈\n\n树\n\n图的定义、存储和基本操作\n\n杂凑（Hash 表）\n\n常用的排序算法、查找算法、数值计算、字符串处理、数据压缩算法、递\n\n归算法、图的相关算法\n\n算法描述和分析\n\n2.2.2 操作系统知识\n\n操作系统的内核\n\n处理机管理\n\n存储管理\n\n设备管理\n\n文件管理\n\n作业管理\n\n网络操作系统和嵌入式操作系统基础知识\n\n操作系统的配置\n\n2.2.3 程序设计语言和语言处理程序知识\n\n汇编、编译、解释系统的基础知识和基本工作原理\n\n程序设计语言的基本成分（数据、运算、控制和传输），程序调用的实现\n\n机制\n\n各类程序设计语言的主要特点和适用情况\n\n2.2.4 数据库知识\n\n数据库模型（概念模式、外模式、内模式）\n\n数据模型，ER 图，规范化\n\n数据操作\n\n数据库语言\n\n数据库管理系统的功能和特征\n\n数据库的控制功能\n\n数据仓库和分布式数据库基础知识\n\n2.3 计算机网络知识\n\n网络体系结构\n\n传输介质，传输技术，传输方法，传输控制\n\n常用网络设备和各类通信设备的特点\n\nClient-Server 结构，Browser-Server 结构\n\nLAN（拓扑，存取控制，组网，网间互连）\n\nInternet 和 Intranet 基础知识以及应用\n\n网络软件\n\n网络管理，网络性能分析\n\n2.4 多媒体基础知识\n\n多媒体系统基础知识\n\n简单图形的绘制，图像文件的处理方法\n\n音频和视频信息的应用\n\n多媒体应用开发过程\n\n3. 系统开发和运行知识\n\n3.1 软件工程知识\n\n软件生存周期与软件生存周期模型\n\n软件开发方法\n\n软件开发项目管理\n\n软件开发工具与软件开发环境\n\n3.2 系统分析基础知识\n\n系统分析的主要步骤\n\n机构化分析方法\n\n3.3 系统设计基础知识\n\n概要设计与详细设计的基本任务\n\n系统设计的基本原理\n\n系统模块结构设计\n\n结构化设计方法\n\n面向数据结构的设计方法\n\n系统详细设计\n\n3.4 系统实施基础知识\n\n系统实施的基本内容\n\n程序设计方法\n\n程序设计的基本模块\n\n系统测试\n\n系统转换\n\n3.5 系统运行和维护基础知识\n\n系统可维护性的概念\n\n系统维护的类型\n\n系统评价的概念和类型\n\n3.6 软件质量管理基础知识\n\n软件质量特性（ISO/IEC 9126 软件质量模型）\n\n软件质量保证\n\n软件复杂性的概念及度量方法（McCabe 度量法）\n\n软件评审（设计质量评审、程序质量评审）\n\n软件容错技术\n\n3.7 软件过程改进基础知识\n\n软件能力成熟度模型 CMM\n\n统一过程（UP）与极限编程（XP）的基本概念\n\n4. 面向对象基础知识\n\n面向对象的基本概念\n\n面向对象分析与设计知识\n\n分析模式与设计模式知识\n\n面向对象程序设计知识\n\n面向对象数据库、分布式对象基础知识\n\n5. 信息安全知识\n\n信息系统安全基础知识\n\n信息系统安全管理\n\n保障完整性与可用性的措施\n\n加密与解密机制基础知识\n\n风险管理（风险分析、风险类型、抗风险措施和内部控制）\n\n计算机安全相关的法律、法规基础知识\n\n6. 标准化、信息化和知识产权基础知识\n\n6.1 标准化基础知识\n\n标准化意识，标准化组织机构，标准的内容、分类、代号与编号规定，标\n\n准制订过程\n\n国际标准、国家标准、行业标准、企业标准\n\n代码标准、文件格式标准、安全标准、互联网相关标准、软件开发规范和\n\n文档标准、基于构件的软件标准\n\n6.2 信息化基础知识\n\n全球信息化趋势、国家信息化战略、企业信息化战略和策略\n\n互联网相关的法律、法规\n\n个人信息保护规则\n\n远程教育、电子商务、电子政务等基础知识\n\n企业信息资源管理基础知识\n\n6.3 知识产权基础知识\n\n保护知识产权有关的法律、法规\n\n7. 计算机专业英语\n\n具有工程师所要求的英语阅读水平\n\n理解本领域的英语术语\n\n考试科目 2：软件设计\n\n1．外部设计\n\n1.1 理解系统需求说明\n\n1.2 准备进行系统开发\n\n选择开发方法、准备开发环境、制订开发计划\n\n1.3 设计系统功能\n\n选择系统结构\n\n设计各子系统的功能和接口\n\n设计安全性策略、需求和实现方法\n\n制订详细的工作流和数据流\n\n1.4 设计数据模型\n\n设计 ER 模型及其他数据模型\n\n1.5 编写外部设计文档\n\n系统配置图、各子系统关系图\n\n系统流程图、系统功能说明书\n\n输入输出规格说明、数据规格说明、用户手册框架\n\n设计系统测试要求\n\n1.6 外部设计的评审\n\n2．内部设计\n\n2.1 设计软件结构\n\n按构件分解，确定构件功能、规格以及构件之间的接口\n\n数据结构与算法设计\n\n采用中间件和工具\n\n2.2 设计输入输出\n\n2.3 设计物理数据\n\n2.4 构件的创建和重用\n\n创建构件、重用构件\n\n使用子程序库或类库\n\n2.5 编写内部设计文档\n\n构件划分图、构件间的接口、构件处理说明\n\n屏幕界面设计文档、报表设计文档、文件设计文档、数据库设计文档\n\n2.6 内部设计的评审\n\n3．数据库应用分析与设计\n\n设计关系模式\n\n数据库语言（SQL）\n\n数据库访问\n\n4．程序设计\n\n4.1 模块划分\n\n4.2 编写程序设计文档\n\n4.3 程序设计评审\n\n5．系统实施\n\n5.1 配置计算机系统及环境\n\n5.2 选择合适的程序设计语言\n\n5.3 用 C 程序设计语言以及 C++、Java 中的任一种程序设计语言进行程序设计\n\n5.4 系统测试\n\n指导程序员进行模块测试，并进行验收\n\n准备系统集成测试环境和测试工具\n\n准备测试数据\n\n写出测试报告\n\n6．软件工程应用\n\n6.1 软件开发周期模型\n\n6.2 需求分析\n\n6.3 软件设计\n\n软件设计的基本原则\n\n软件设计方法\n\n程序设计（结构化程序设计、面向对象程序设计）\n\n6.4 软件测试的原则与方法\n\n6.5 软件质量（软件质量特性、软件质量控制）\n\n6.6 软件过程评估基本方法、软件能力成熟度评估基本方法\n\n6.7 软件开发环境和开发工具\n\n6.8 面向对象技术\n\n面向构件技术\n\n统一建模语言（UML）\n\n软件过程改进模型和方法\n\n6.9 网络环境软件技术\n","tags":["软考"]},{"title":"web无障碍简介","url":"/2021/03/10/frontend/wcag/","content":"\n前两年有过无障碍实施的经验，最近又遇到了需求，再次整理下资料。\n\nWeb Content Accessibility Guidelines 简称 WCAG\n\n* WCAG 2.0 was published on 11 December 2008.\n* WCAG 2.1 was published on 5 June 2018.\n* WCAG 2.2 is scheduled to be published in 2021.\n\n> The WCAG technical documents are developed by the Accessibility Guidelines Working Group (AG WG) (formerly the Web Content Accessibility Guidelines Working Group), which is part of the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI).\n\nWCAG技术文档由可访问性准则工作组（AG WG）（以前称为Web内容可访问性准则工作组）开发，该小组是万维网联盟（W3C）Web可访问性倡议（WAI）的一部分。\n\n相较于2.0版本\n\n* [WCAG 2.1 新增内容](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/)\n* [WCAG 2.2 新增内容](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/)\n\n\n在最新的2.2版本中，有幸看到以下更新。\n\n* 2.4.11 Focus Appearance (Minimum) (AA) 终于出现了焦点样式的强化规范，等它太久了\n* 3.2.6 Findable Help (A) 提供 assistant 应答。该规范还是A级，也就是必须要达到的。有意思～\n* 3.3.7 Accessible Authentication (A) 总算等到验证码相关的规范了，还特别说不能只提供认知测试方面的验证，后端迎来新功能～","tags":["无障碍"]},{"title":"chrome tracing","url":"/2021/02/02/frontend/trace/","content":"\n在学习puppeteer写性能爬虫的时候，又发现一个知识点。\n\n我滴天，前端真是永无止境呀！\n\n```js\n// puppeteer中\nawait page.tracing.start({path: 'trace.json'});\nawait page.goto('https://www.google.com');\nawait page.tracing.stop();\n```\n\n在谷歌浏览器中，输入以下地址，点击`Load`按钮，导入trace.json。 \n\n```\nchrome://tracing/\n```\n\n你会发现\n\n\n\n好的，又发现一个知识点，“一波未平一波又起”呀～～泪奔～干他！\n\n待续～～\n\n---","tags":["chrome"]},{"title":"前端性能衡量标准","url":"/2021/01/28/frontend/fe-perform/","content":"\n## 1. 初识前端性能参数\n\n参考各种资料，各种文档，思考判断后觉得以下的标准更合理：\n\n* 页面加载速度——多快能出画面\n* 加载响应速度——多快能操作\n* 交互响应速度——操作的反馈速度\n* 视觉稳定性——界面稳定，元素位置不会因为加载而“乱动”\n* 交互平滑度——动画、过渡是否流畅\n\n上边这些都是感知上的，但无法通过这些指标来测量性能。所以我们以下边的一些公认的可量化的指标来测量：\n\n* FCP：从页面开始加载到屏幕上呈现页面内容的时间。\n* LCP：从页面开始加载到屏幕上最大的文本块或图像元素被渲染的时间。\n* FID：测量从用户首次与您的网站进行交互到浏览器真正能够访问之间的时间。\n* TTI：衡量从页面开始加载到可视化呈现之间，它的初始脚本（如果有）已加载以及可以可靠地快速响应用户输入的时间。\n* TBT：测量主线程被阻塞足够长的时间以防止输入响应的FCP和TTI之间的总时间。\n* CLS：衡量在页面开始加载到页面生命周期状态变为隐藏之间发生的所有意外布局转移的累积分数。\n\n## 2. 详解参数\n\n\n### 2.1 FP&FCP - First Paint & First Contentful Paint\n\n一般用FCP来衡量即可，FP一般都在FCP之前：\n\n* FP 记录页面第一次绘制像素的时间\n* FCP 记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间\n\nFCP指标:\n\n* 0-2s: Good \n* 2-4s: Need Improvement \n* 4s以上: Poor \n\n### 2.2 LCP - Largest Contentful Paint\n\nLCP指标代表的是视窗最大可见图片或者文本块的渲染时间。\n\n这个性能指标，可以测试用户感知到的页面加载速度，更可以让用户感受到这个页面的可用性。\n\n\n\n* LCP的官方api：https://wicg.github.io/largest-contentful-paint/#sec-largest-contentful-paint-interface\n* 插件：https://github.com/GoogleChrome/web-vitals\n\n### 2.3 TTI - Time To Interact\n\nTTI指的是页面可交互的时间。简单的说呢，就是页面从加载开始，到最快能操作的时间。\n\n在谷歌浏览器上没有办法直接看到，但是可以使用api计算\n\n```js\nvar timing = window.performance;\nvar tti = timing.domInteractive - timing.fetchStart;\n```\n\n## 3. 如何测试\n\n1.可以使用谷歌的performce，来查看性能。\n\n\n\nTimings 里`FP` `FCP` `LCP` `DCL` 等参数，做重点分析。\n\n2. 可以使用爬虫来抓，请见下篇文章[《前端性能爬虫方案》](http://yueziyao.site/2021/01/27/fe-spider/)\n\n> 参考：\n> [《以用户为中心的性能指标》- Google](https://web.dev/user-centric-performance-metrics/#user-centric_performance_metrics)\n> [《Best Practices for Speeding Up Your Web Site》- yahoo](https://developer.yahoo.com/performance/rules.html?guccounter=1#num_http)\n> [《解读新一代 Web 性能体验和质量指标》- segmentfault](https://segmentfault.com/a/1190000022744550)","tags":["性能优化"]},{"title":"前端性能爬虫方案","url":"/2021/01/27/frontend/fe-spider/","content":"\n性能爬虫，我也是刚接触到这个词，发现这篇文章，mark一下\n\nhttps://www.zoo.team/article/performance-detection\nhttps://juejin.cn/post/6844903933580673032#heading-5\nhttps://segmentfault.com/a/1190000020539159\n\n是不是我看得不仔细，这三篇文章写一个东西，都不太一样。\n\n可以结合前端性能、优化，一起看看。学习！\n\npuppeteer使用cnpm安装\n\n```\nnpm install -g cnpm --registry=https://registry.npm.taobao.org\n```\n\nmain.ts\n\n```js\nimport {performanceTest} from './performanceTest'\n\nasync function main() {\n // 检测页面url\n const url = 'https://www.baidu.com';\n // 检测次数\n const times = 1;\n await performanceTest(url, times)\n}\n\nmain()\n```\n\nperformanceTest.ts \n\n```js\nimport * as puppeteer from 'puppeteer';\n\ninterface Itiming {\n responseStart: number;\n navigationStart: number;\n responseEnd: number;\n connectEnd: number;\n connectStart: number;\n domInteractive: number;\n fetchStart: number;\n domainLookupEnd: number;\n domainLookupStart: number;\n}\n\nexport async function performanceTest(url: string, times: number) {\n\n const record = {\n whiteScreenTime: 0,\n requestTime: 0,\n tcpTime: 0,\n tti: 0,\n dnsTime: 0\n }\n\n for (let i = 0; i < times; i++) {\n const browser = await puppeteer.launch({ headless: false });\n const page = await browser.newPage();\n\n await page.goto(url);\n const res = JSON.parse(await page.evaluate(\n () => JSON.stringify(window.performance.timing)\n ))\n const timing: Itiming = res;\n // 等待保证页面加载完成\n await page.waitForTimeout(5000);\n // 白屏时间\n record.whiteScreenTime += timing.responseStart - timing.navigationStart;\n // 请求时间\n record.requestTime += timing.responseEnd - timing.responseStart;\n // TCP建立连接耗时\n record.tcpTime += timing.connectEnd - timing.connectStart;\n // tti\n record.tti += timing.domInteractive - timing.fetchStart;\n // DNS\n record.dnsTime += timing.domainLookupEnd - timing.domainLookupStart || 0;\n\n await browser.close();\n }\n \n const res = {\n \"DNS请求时间\": record.dnsTime / times + 'ms',\n \"TTI\": record.tti / times + 'ms',\n \"TCP建立连接耗时\": record.dnsTime / times + 'ms',\n \"白屏时间\": record.whiteScreenTime / times + 'ms',\n \"请求时间\": record.requestTime / times + 'ms'\n };\n console.log(res);\n}\n```\n\n后续可以增加static扫描","tags":["性能优化"]},{"title":"浅谈前端基建思路","url":"/2021/01/26/frontend/fe-base/","content":"\n前端基础设施建设，是一个“年轻”团队跨向“成熟”的必由阶段。\n\n如果把完成一个项目的开发，想象成制作一块木雕的话\n\n* 使用临时制作的石斧砍树，使用尖锐的石刀雕琢木材，这是前端“石器时代”。\n* 有了第一次的经验，提前准备了锋利的斧头、雕刻刀，以及提前准备木雕图，砍树、雕刻一气呵成，这是前端的“农耕时代”。\n* 虽然有了工具，但是依旧不能大批量自动化的生产木雕，那么提前设计了生产线。自动处理木材、雕刻木雕。效率不仅高，而且质量得到了保障。这是前端的“工业时代”。\n* 随着技术发展，工厂里使用智能机器人，能根据用户提供的信息，全自动创造定制的木雕。这是前端的“智能时代”\n\n### 石器时代，是启蒙\n\n在这个时代，我们创造简易工具，满足需求。\n\n代表产物：前端构建工具，框架\n\n### 农耕时代，是思考和沉淀\n\n在这个时代，我们使用更精良的工具，合理的规范，打造质量更佳的产品。\n\n代表产物：各种规范、中型工具（例如CLI）\n\n### 工业时代，是自动化\n\n在这个时代，使用大型系统，减少人肉操作，自动化情况下，快速输出标准产品。\n\n代表产物：可视化构建系统、CI\\CD\n\n### 智能时代，是AI\n\n在这个时代，AI取代系统，进一步减少人为干预，面向用户，面向需求，输出个性化、定制化产品。\n\n代表产物：各种自动化产物生成系统\n\n> ps: 目前我们团队也还介于“农耕时代”和“工业时代”之间，长路漫漫呀","tags":["前端"]},{"title":"Git Commit Message规范","url":"/2021/01/23/workflow/git-commit/","content":"\n好的提交代码注释，能让我们更快定位问题，了解提交的内容。也是一个很值得实施的规范。\n\n### 1. 格式\n\n每次提交，Commit message 都包含三个部分：Header，Body，Footer。\n\n```\n<type>(<scope>): <subject>\n// 空一行\n<body>\n// 空一行\n<footer>\n```\n\n* Header是必须的，Body 和 Footer 可以省略。\n* Header部分只有一行，包括三个字段：type（必需）、scope（可选）和subject（必需）。\n* type用于说明 commit 的类别，只允许以下7个标识。\n\n```\nfeat：新功能（feature）\nfix：修补bug\ndocs：文档（documentation）\nstyle： 格式（不影响代码运行的变动）\nrefactor：重构（即不是新增功能，也不是修改bug的代码变动）\ntest：增加测试\nchore：构建过程或辅助工具的变动\n```\n\n### 2. Webstrom注释格式填充\n\nwebstrom -> performance -> plugins\n\n搜索 `Git Commit Template` 插件，点击 install\n\n按照好后，原有提交界面会出现一个按钮，如下。\n\n\n点击它，填充应该填充的部分，即自动生成符合规范的有效注释。\n\n","tags":["Git"]},{"title":"nvm使用","url":"/2021/01/22/frontend/nvm-1/","content":"\n接上文说到，我们使用nvm来维护我们的nodejs版本。\n\n主要就是使用nvm安装、查询、切换功能\n\n### check - 检查当前系统所使用的版本\n\n```\nnvm list\n```\n\n### list available versions - 列出已发布的可用版本\n\n```\nnvm ls-remote\n```\n\n### install - 安装某个版本\n\n```\nnvm install node # 安装最新稳定版\nnvm install 10.14.3 # 安装 10.14.3 版本\n```\n\n### using - 切换版本\n\n```\nnvm use node # 切换到最近版本\nnvm use 10.14.3 # 切换 10.14.3 版本\n```\n","tags":["前端"]},{"title":"团队Git协作实践","url":"/2021/01/21/workflow/git-flow/","content":"\n## 描述\n\n本规范从以下两个方面规范团队git使用：\n\n1. Git分支操作规范\n2. Commit Message规范\n\n## 1. Git分支操作规范\n\n按照团队的情况做以下规范。\n\n### 1.1 分支说明\n\n| 分支英文名 | 分支中文名 | 解释 |\n| --- | --- | --- |\n| master | 主分支 | 稳定发布的代码|\n| test | 测试分支 | 只用于合并和测试的分支，发布到测试环境 |\n| feature | feature分支 |用于需求功能开发<br>基本格式：feature/name<br>（eg. feature/userManage） |\n| hotfix | hotfix分支 | 为解决线上突发问题的分支<br>基本格式：hotfix/date-description<br>（eg. hotfix/20200811-用户模块选中问题修复） |\n\n### 1.2 各分支操作\n\n#### master分支\n\nmaster分支，一直存在。\n\n* master合并的内容：本次上线的feature分支的需求。\n* master合并的时间：上线的时候。\n* master合并操作：只能由模块负责人进行操作，合并前需要review代码，要对风险负责。\n\n#### test分支\n\ntest分支，一直存在。\n\n* test分支的内容：合并当前要进行测试的feature分支。\n* test合并的时间：需要测试的时候。\n* test分支的合并要求：提测什么需求，就合并相关分支的代码（test分支只做合并操作）。\n\n#### feature分支\n\n按需创建，及时销毁。\n\n* feature分支的产生：从master上拉的一个新分支。\n* feature分支的合并到test，先在本地进行merge操作，解决冲突之后，再进行push。\n* feature分支的销毁：上线完毕后，由分支owner进行销毁。\n\n#### hotfix分支\n\n按需创建，及时销毁。\n\n* hotfix分支的产生：从master上拉的一个新分支。\n* hotfix分支的合并：如果需要经过测试，先合并到test分支，测试过后合并到master。如果属于紧急修复，响应时间作为第一参考标准的时候，经过自测，直接合并到master分支。\n* hotfix分支的销毁：上线完毕后，由分支owner进行销毁。\n\n### 1.3 分支操作流程\n\n1. 新的需求开发开始，先从 `master分支` 拉一个新的 `feature分支` ，分支需要遵循命名规范。\n2. 开发完成，把 `feature分支` 的代码合并到 `test分支` 。\n3. 测试阶段开始，测试提出的bug，在该 `feature分支` 上进行修复，修复完成持续合并到 `test分支`。\n4. 测试完毕后，收到测试结果邮件，需要发布release环境验证，在发布release环境之前，把 `master分支` 重新合并到 `feature分支`。\n5. release验收完成，需要正式上线，必须等产品确认才能把 `feature分支` 的代码合并到 `master分支` ，再进行发布生产环境。\n\ntips：hotfix分支的周期，同feature分支。区别点在于：hotfix在于线上问题的止损，出现问题，可能不会走测试流程。","tags":["Git"]},{"title":"OKR工作法","url":"/2021/01/21/other/okr/","content":"\n## 1. 读书笔记\n\n《OKR工作法》为我们讲述了一个创业公司通过采用“OKR工作法”，从濒临破产->解决问题->快速发展的故事。\n\n本书前三章讲述了一个有梦想的茶叶创业公司，遇到的问题：\n\n* 迫切解决的问题多\n* 什么都想做\n* 创业成员各有各的想法和关注点\n* CEO和CTO、团队成员间沟通不顺畅\n* ……\n\n采用了很多办法，也没有得到有效的解决，于是这些问题差点导致创业团队四分五裂。他们意识到往往光有好的想法还不够，必须要有一套方法来确保梦想能实现。\n\n后来，投资人为他们寻找了一位深谙“OKR工作法”的新CTO，在新CTO“OKR工作法”的推进下，团队步上正规，持续发展壮大。\n\n第四、五、六章详述“OKR工作法”的实施细节、场景以及建议。\n\n## 2. 思考\n\n结合本书和网上的资料，个人认为，OKR工作法不太适用于欠缺产品、需求环节，更类似于外包性质的团队。因为这种团队往往很难接触到真正的用户，也很少拿到生产数据，也无权针对某个问题，自发性对产品进行迭代更新。但是，如果将其作为员工的发展引导，倒不失为一个好的方案。\n\n## 3. OKR解析\n\n* O：Objective 目标、意图\n* KR：Key Results 关键成果\n\n强调用关键结果衡量工作绩效，每周一盘点执行过程，使用四象限图展示ORK:\n\n* 本周关注的任务\n* OKR当前状态\n* 未来四周计划\n* 状态指标\n\n每周五举办“庆祝”会议，大家分享成果，交流心得。\n\nOKR用来设定目标非常棒，但是没有一个系统能替你完成它。事情失败很容易，成功太难。OKR让所有人为目标承担责任，明确如何协作、明确前进方向，每周重复，那么OKR一定会实现。\n\n遵循SMART原则\n\n* Specific（具体的）\n* Measurable（可衡量的）\n* Attainable（可实现的）\n* Relevant（相关的）\n* Time-Based（有时间限制的）\n\n遵循五四原则\n\n* 不超过5个目标（O）\n* 每个目标（O）不超过4个KR（关键结果）","tags":["工作方法"]},{"title":"npm各种常用配置","url":"/2021/01/21/frontend/taobao/","content":"\n在日常前端开发过程中npm，可以说是我们最常用的包管理器。而其中配置，并不少所有小伙伴都了解的，下边我们介绍下一些最常用的。\n\n## 1. 下载依赖慢，老是网络中断怎么办？（registry配置）\n\n例如我在命令行中，输入\n\n```\n>npm config list\n\n//系统输出\nalex@AlexdeMacBook-Pro blog % npm config list\n; \"user\" config from /Users/xxx/.npmrc\n\nregistry = \"https://registry.npm.taobao.org/\" \n\n……\n\n```\n\n在上边 `registry = \"https://registry.npm.taobao.org/\"` 代表我设置了淘宝的registry仓库。\n\n> npm 默认设置是它的官方库 http://registry.npmjs.org ，这个大家如果涉及插件开发，都会往这上边传，后续再细说。淘宝的仓库其实也源于npm官方仓库，只不过它会即时去拉取，和使用官方库差不多。\n\n我们通常使用以下命令行去设置仓库指向，\n\n```\n// 设置成淘宝库\nnpm config set registry https://registry.npm.taobao.org\n\n// 设置回npm仓库\nnpm config set registry http://registry.npmjs.org\n```\n\n## 2. 设置别名\n\n如果你们公司有，nexus私有npm仓库,你们开发的插件需要存在里边，不推送到公网。那么,可以给你的所有操作，加上 `--registry` 后带仓库地址。\n\n```\n//登录\nnpm login --registry http://nexus.x.x/repository/npm-hosted/\n\n//发布\nnpm publish --registry http://nexus.x.x/repository/npm-hosted/\n```\n\n通常情况下，我们同时也想使用公有淘宝or npm 镜像，可以做以下配置。\n\n我们的插件以@yzy为组，设置特殊组插件使用私有镜像库。\n\n```\n//设置@yzy组的registry到私有库\nnpm config set @yzy:registry http://nexus.x.x/repository/npm-hosted/\n```\n\n只要包带 `@yzy`的，都会去 `http://nexus.x.x/repository/npm-hosted/` 下载\n\n## 3. 通过npm安装yarn\n\n如果npm使用烦了，可以偶尔使用下yarn\n\n按照指令\n\n```\nnpm i yarn -g\n```\n\n> npm是牛b的，这个命令翻译下就是：我（npm）允许你选择我的潜在对手（yarn），甚至我还帮你引荐！\n\n","tags":["npm"]},{"title":"前端设备参数详解","url":"/2021/01/18/frontend/screen/","content":"\n设备屏幕，有一些容易被我们忽略的知识点，特别是在做响应式的时候，我们老是会对一些基础的设备概念产生一些疑问，例如：\n\n1. px、pt有啥区别呀？\n2. 移动端到底能不能用px？\n\n我们先了解以下的一些概念。\n\n## 1. 物理像素 — Device Pixels\n\n显示屏的成像原理：通过一系列的小点排列成一个大的矩形，不同的小点通过显示不同的颜色来显示成图像。\n\n单位pt，属于真正的绝对单位，代表一个像素点。\n\n## 2. 逻辑像素 - Logical Pixel\n\n逻辑像素也可以称为设备独立像素 DIP(Device independent Pixel)\n\nCSS像素单位是px（CSS pixel），浏览器里的一切长度都是以 px（CSS像素）为单位。\n\n> 一般情况下来说， CSS像素 = 独立像素 = 逻辑像素 \n\n## 3. 设备像素比 — Device Pixel Ratio\n\n设备像素比(DPR)是默认缩放为100%的情况下，物理像素和逻辑像素的比值\n\n> DPR = 物理像素 / 逻辑像素(某一方向上)\n\n在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它就是DPR。\n\n```javascript\n> window.devicePixelRatio\n```\n\n例如 IPhoneX 的 devicePixelRatio = 3，如下图。\n\n\n\n而前几代 iphone 6/7/8 采用的同样的屏幕，devicePixelRatio = 2\n\n\n\n所以 IPhoneX 的屏幕比 IPhone7 更高清。\n\n## 4. 像素密度 - Pixels Per Inch\n\n每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。\n\n\n\n高PPI的设备中，一个CSS像素通常等于两个甚至三个物理像素。\n\n> PPI通常是判断设备屏幕清晰度的重要参数，所以我们买设备的时候可以重点关注这个参数哟（设备分辨率高可不一定代表高清哟～）\n\n","tags":["前端"]},{"title":"macOS GitHub访问过慢问题解决","url":"/2021/01/10/other/view-github/","content":"\n家里 GitHub 访问非常缓慢，百度了几个方法，亲测有效。\n\n方法：本地host地址绑定 \n\n1. 打开[dns查询工具网站](http://tool.chinaz.com/dns) 查询域名github.global.ssl.fastly.net解析获取其IP.\n2. MacOS找到host文件，在finder里边`command`+`shift`+`G`，前往文件夹`/etc/hosts`,里边的`hosts`文件，拷贝到桌面进行编辑后拷贝回来覆盖即可。\n\n```\n//hosts文件中\n127.0.0.1\tlocalhost\n151.101.109.194 github.global.ssl.fastly.net //新增\n```\n\n访问速度可以得到提升","tags":["GitHub"]},{"title":"macOS安装nvm 实现nodejs版本快速切换","url":"/2021/01/10/frontend/nvm/","content":"\n团队项目新老共存的情况下，某些时候不得不频繁切换nodejs版本。n模块比较难搞，有一些问题，还是推荐使用nvm。\n\n首先，强烈推荐看官网安装：https://github.com/nvm-sh/nvm\n（ps：因为如果插件更新了，下边的教程可能没那么及时更新～）\n\n## 1. 命令行下载及安装\n打开命令行工具，输入以下命令，等待安装成功\n\n```\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash\n```\n\n## 2. shell的配置\n安装完成后，注意区分你的shell是用的zsh和bsah，这里我们不做展开了，感兴趣的可以去看看这两个的区别。\n\n了解自己用的shell后，进行shell的配置如下\n\n```\n$ cd ~\n\n//下边二选一\n//如果是： zsh\n$ vim ~/.zshrc\n\n//如果是：bash\n$ vim .bash_profile\n```\n\n文件里加入（保存退出是用 `esc` 之后输入 `:wq`）\n\n```\nexport NVM_DIR=~/.nvm\nsource $(brew --prefix nvm)/nvm.sh\n```\n\n## 3. 刷新source\n\n```\n// 也是二选一\n// zsh\n$ source ~/.zshrc\n// bash\n$ source .bash_profile\n```\n\n## 4. 验证\n\n命令行中，输入\n\n```\nnvm v\n```\n\n如果正常返回版本号，就ok了！\n","tags":["系统"]},{"title":"macOS Big Sur osx系统引导盘制作","url":"/2021/01/07/other/macos-bigsur/","content":"> macOS启动优盘制作\n\n### 1.格式化U盘\n\n打开 “应用程序 → 实用工具 → 磁盘工具”，将U盘「抹掉」(格式化) 成「Mac OS X 扩展（日志式）」格式、GUID 分区图，并将 U 盘命名为「Install macOS Big Sur」\n\n### 2.下载系统，安装到本机应用\n\n系统在iTunes上下载即可\n\n\n### 3.使用命令行生成引导盘\n\n```\nsudo /Applications/Install\\ macOS\\ Big\\ Sur.app/Contents/Resources/createinstallmedia --volume /Volumes/Install\\ macOS\\ Big\\ Sur /Applications/Install\\ macOS\\ Big\\ Sur.app —nointeraction\n```\n\n* 其中 /Volumes/Install\\ macOS\\ Big\\ Sur 的Install macOS Big Sur为U盘名（第一步格式化的时候用,命令行里空格要加\\）\n* Install macOS Big Sur.app 是下载的app的名字，和 Mojave各有不同","tags":["系统"]}]