Grid布局是微软在2010年提出来的一种新的布局方式，到2016年的时候提交了该布局的草案，经过这三四年的发展，grid布局慢慢变的成熟，兼容性也越来越好，可以适当学起来用起来了

本次学习的几个点：

• CSS布局发展过程
• Grid布局的优点以及相关术语介绍
• Grid布局的使用
• 注意事项、备注
• 参考资料

vue-router 是 Vue 官方的路由管理器，用法简单、功能强大。但在移动端场景中，特别是 hybrid 项目，我们在使用中遇到了一些问题。

开篇

组件库能帮我们节省开发精力，无需所有东西都从头开始去做，通过一个个小组件拼接起来，就得到了我们想要的最终页面。在日常开发中如果没有特定的一些业务需求，使用组件库进行开发无疑是更便捷高效，而且质量也相对更高的方案。

目前的开源组件库有很多，不管是react还是vue的体系里都有很多非常优秀的组件库，比如我经常使用的就有elementui和iview。当然也还有其他的一些组件库，他们的本质其实都是为了节省重复造基础组件这一轮子的过程。也有的公司可能会对自己公司的产品有特别的需求，不太愿意使用开源的组件库的样式，或者自己有一些公司内部的业务项目需要用到，但开源项目无法满足的组件需要沉淀下来的时候，自建一套组件库就成为了一个作为业务驱动所需要的项目。

chrome 扩展是什么

chrome 扩展是用传统的 HTML、CSS、JS、图片等静态资源开发并最终打包成后缀为 .crx 的一个压缩包。所以，它和我们平常开发的页面没有多大的区别，所以如果你想引入前端开发所用的各种框架，组件库，构建工具也都是可以的。主要区别只有 2 个:

1. 扩展的页面、js 和普通的页面运行位置不同
2. 扩展可以调用 chrome 提供的更多的 API 来增强我们扩展的能力

前言

掘金传送门

组件化思想并不是前端独有的，但却是前端技术的延伸

随着三大框架崛起，前端组件化逐渐成为前端开发的迫切需求，一种主流，一种共识，它不仅提高开发效率，同时也降低了维组件内聚原则护成本
开发者们不需要再面对一堆晦涩难懂的代码，转而只需要关注以组件⽅式存在的代码⽚段

这是一场新的挑战！

一、背景

话不多说，先上图，这是得到 App 静态资源更新服务的 CPU 使用率监控，可以看到 7 月 2 号到 7 月 3 号后，cpu 使用率发生了爆涨，在八点的早高峰和下午六点的晚高峰，几乎可以把 cpu 打满。发现问题当机立断，升级配置将 2 核 4g 升级至 4 核 8g，先保证服务稳定，我们再继续查问题。

下图是升级配置后的截图，所以看到的图已经温柔很多了，本人当时看到监控的时候，所有波峰都是打在红线以上的，虽然还没有引起报警，但是默默掏出小本本记下找时间查问题。