PWA作为2018最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。

PWA是Progressive Web App的英文缩写，也就是渐进式增强WEB应用。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的

安装和离线等功能。

我们需要理解的是，PWA不是某一项技术，或者某一个新的产物；而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准，可以从安

全、性能和体验三个方面，优化我们的Web App。所以，其实PWA本质上依然是一个Web App。

定义：轻量级、高性能的 Web 服务器，在现今的大型应用、网站基本都离不开 Nginx，已经成为了一项必选的技术；其实可以把它理解成 入口网关。

当你去银行办理业务时，刚走进银行，需要到入门处的机器排队取号，然后按指令到对应的柜台办理业务，或者也有可能告诉你，今天不能排号了，回家吧！ 这样一个场景中，取号机器就是 Nginx(入口网关)。一个个柜台就是我们的业务服务器(办理业务)；银行中的保险箱就是我们的数据库(存取数据)；🤣

特点

1. 轻量级，配置方便灵活，无侵入性；
2. 占用内存少，启动快，性能好；
3. 高并发，事件驱动，异步；
4. 热部署，修改配置热生效；

怯懦的我终于和领导提出了离职，从8月11号入职以来，jenkins打包管理、bugatti自动化部署等等惊艳到了在上家公司还是用手动发包javac的我，学到了更正规的软件开发流程体系和产品线的迭代，KA项目的定制化。从1月开始一直用RN做相关的微应用，期间虽然也做过小程序、mui的H5、antd的中后台系统，但大多数时间还是用RN写业务应用。经过几个应用的锻炼、改造，已经封出了一些较能应付业务需求的组件。复杂的集成调用框架那边都做了，其他部分做起来没有什么技术含量了。我知道已经毕业1年的我该做出些改变了。

芮 rui 四声

浏览器前缀 -webkit/chrome、safari -moz/firefox -ms/ie -o/opera

弹性伸缩flexbox布局

任何一个容器都可设为display:flex

行内元素 display:inline-flex

webkit内核浏览器（Safari） display:-webkit-flex; display:flex

设为flex布局以后，子元素的float、clear、vertical-align属性将失效。

Error Boundary

Error Boundary可以看作是一种特殊的React组件，新增了componentDidCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树。（注：它并不能捕获runtime所有的错误，比如组件回调事件里的错误，可以把它想象成传统的try-catch语句）

在Linux中，压缩与解压用得最多的是 tar 命令。

-c: 建立压缩档案 -x：解压 -t：查看内容 -r：向压缩归档文件末尾追加文件 -u：更新原压缩包中的文件

以上五个是独立的命令参数，压缩解压都要用到其中一个，可以和别的命令连用但只能用其中一个。下面的参数是根据需要在压缩或解压档案时可选的。

-z：有gzip属性的 gz -j：有bz2属性的 bz2

-J ：有xz属性的 xz -Z：有compress属性的 -v：显示所有过程 -O：将文件解开到标准输出

下面的参数-f是必须的

-f: 使用档案名字，切记，这个参数是最后一个参数，后面只能接档案名。

今天要说的是最简单的 for 循环，一个简单的 for 循环看似没有任何优化的意义，但实质上优化前后差距挺大的，那么该如何优化呢？

前端模块化发展之路： IIFE（自执行函数）>>AMD(RequireJS实现)>>CMD(SeaJS实现)>>CommonJS(NodeJs)>>ES6 Modules(模块化直接成为了Javascript语言规范中的一部分)。

一、前端模块化发展简介

1.CommonJS(require / module.exports / exports)

2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。这标志”Javascript模块化编程”正式诞生。nodeJs中的模块，一律为CommonJS 格式。

1.1 语法风格

1
2
3
4
5
6

//Math.js
module.exports = {
	'add': function(a, b) {
		return a + b;
	}
}

1
2
3
4

//main.js
const Math = require('./Math');
console.log(Math.add(2, 3));
console.log('done');

meta基础知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

1

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

ios竖屏拍照上传，图片被旋转问题

1
2
3
4
5
6
7

// 1.通过第三方插件exif-js获取到图片的方向
// 2.new一个FileReader对象，加载读取上传的图片
// 3.在fileReader的onload函数中，得到的图片文件用一个Image对象接收
// 4.在image的onload函数中，利用步骤1中获取到的方向orientation，通过canvas旋转校正，重新绘制一张新图
// 注意iPhone有3个拍照方向需要处理，横屏拍摄，home键在左侧，竖屏拍摄，home建上下
// 5.将绘制的新图转成Blob对象，添加到FormData对象中，然后进行校正后的上传操作
// 代码有点杂，待整理后上传，网上应该是可以找到的

ios：DOM元素固定一边，另一边滚动，滚动很卡的问题

1
2

// (横向滚动用的多些)简单粗暴的办法，样式添加如下属性
-webkit-overflow-scrolling: touch;

部分手机第三方输入法会将页面网上挤的问题

1
2
3
4
5
6

// 特定需求页面，比如评论页面，输入框在顶部之类的
const interval = setInterval(function() {
    document.body.scrollTop = 0;
}, 100)
// 注意关闭页面或者销毁组件的时候记得清空定时器
clearInterval(interval);

iPhoneX适配

1
2
3
4
5
6
7
8
9
10
11
12
13

// 1.viewport meta 标签增加属性viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
// 2.body元素增加样式
body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// 3.如有fixed底部的元素，也增加上面样式
xxx {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff; // 记得添加background-color，不然会出现透明镂空的情况
}

某些机型不支持video标签的poster属性，特别是安卓

1
2
3

用图片元素 <img />来代替poster
播放前显示<img />，隐藏 <video />
播放后显示<video />，隐藏 <img />

CSS透明度颜色设置问题

1
2

Android部分不支持 hex写法，推荐用rgba的写法
#0000009c --> rgba(0, 0, 0, 0.61)

flex对低版本的ios和Android的支持问题

1
2
3
4
5
6
7
8

// 使用postcss的autoprefixer插件，自动添加浏览器内核前缀，
// 并且增加更低浏览器版本的配置，自动添加flex老版本的属性和写法
autoprefixer({
    browsers: [
        'iOS >= 6',     // 特殊处理支持低版本IOS
        'Safari >= 6',  // 特殊处理支持低版本Safari
    ],
}),

ios 页面回退到长列表出现灰色遮挡问题

1
2
3
4
5
6

方案1：对列表数据进行缓存，比如redux之类的用法。
方案2：回退时，跳到页面顶部。
const timer = setTimeout(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
}, 0);

ios 日期转换NAN的问题

1
2

将日期字符串的格式符号替换成'/'。
栗子：'yyyy-MM-dd'.replace(/-/g, '/')

react未知错误异常，导致页面崩溃，空白

1
2

React 16.x 增加了componentDidCatch() 生命周期方法
捕获全局异常来进行页面的友好提示

移动端适配

• 媒体查询
• px2rem
• flexible
• flex
• grid
• 百分比