项目中遇到的问题

实习后

实现图片预加载工具函数

export preLoadImage(imageItems,imageType){
    imageItems.forEach((imageItem)=>{
        let image = new Image();
        image.src = imageItem.path;
        image.onload = function(){
            //success
         }
        image.onerror = function(){
            //fail
        }
    })
    
}

页面渲染优化

通过生命周期处理（shouldComponentUpdate）控制组件渲染次数与时机，实现页面优化。
父组件重新渲染，但是子组件并不需要重新渲染，如果不终止子组件的重新渲染，那么会影响到性能。

粘性定位

解决页面抖动问题（display：none）
display（none）会导致页面重排。
sticky本身属于正常文档流，切换的时候不会引起重排。

图片懒加载

使用react－lazy－load

实现图片容错加载

路由级别组件懒加载工具

react-loadable + webpack import

import Loadable from "react-loadable";
import PageLoading from "./PageLoading";
export default function asyncComponent(componentPromise){
 return Loadable({
    loader:componentPromise,//loader接受一个promise对象，结合webpack代码切割
    loading:LoadingPage
})   
}
const homeComponent = asyncComponent(import("./homeComponent"))
<Route exact path="/" component={homeComponents} />

问题：自适应问题

PC端

媒体查询。

移动端

Rem。第一次做，用别人的方案，不是特别成熟，导致做了很多无用功，主要体现在手动计算rem的值，没有使用辅助工具。比较完美的方案： flexible+px2rem-loader。

flexible：动态计算font-size，也解决1px问题。内部也做了函数节流优化，避免频繁更新。

px2rem-loader：自动计算rem，需配置webpack，remUnit的值。

Rem的缺点：

开头要引入一段js代码，单位都要改成rem(font-size可以用px)，计算rem比较麻烦(可以引用预处理器，但是增加了编译过程，相对麻烦了点)。pc和mobile要分开。
会出现出计算出小数的情况，不同浏览器的行为表现可能不同。
若手机修改了默认字体大小，可能会出现意想不到的情况，布局错乱。

问题：webscoket

做的好的：

保证能连接上：try，catch递归连接。连接失败，catch之后执行重新连接函数。

心跳检测：建立连接之后开启一个定时器。在规定时间内若收到正常的广播，定时器清0，若规定时间内没收到广播，发送过一个心跳包，若正常返回，重新置空定时器，否则，执行重新连接函数。

改进：

更深层的容错，多学习其他源码。

问题：build之后bundle太大

使用webpack进行gzip压缩。

安装插件

1	npm install compression-webpack-plugin

配置参数，/config/index.js

1	productionGzip:true

问题：数据加载与组件渲染速度的问题

很多时候会出现数据还在异步加载，组件就渲染了。或者数据还没加载出来，但是后续有操作数据节点的dom操作，会报错。

解决方案：使用async。async是generator的语法糖，主要是将内部的多个异步操作“同步化”。async内置执行器，不用手动调用next；async更语义化；async返回的是promise。

场景：做一个电梯导航，电梯的锚点是动态的。需要后端返回数据之后再去获取各个锚点节点的数据。没做处理的情况下：数据还没获取，锚点还没生成，因此dom操作会报错。因此，可使用如下思路：

renderComponent: async function () {
    //先获取数据，渲染页面
    await renderData();
    //开始生成电梯导航
    await renderElevator();
},

问题：前端工程化的看法

前后端分离开发，只要在开发之前商量好接口格式，就可以并行开发。

开发模块化，组件化，公司内部可以生成适合自己的组件库，方便复用，加快开发。

问题：公司项目与学校项目的区别

做学校的项目压力没那么大，老师追得也不是特别紧。公司的项目deadline是什么时候就要什么时候做完，有时候别人的进度会间接影响你的进度，但没办法，有时候需要加班搞定，就例如我前端页面需要设计给图，设计到时间还没给图，也会影响我的进度。

学校的项目UI都是由我们自己决定，学校的意思是功能实现，用户体验没那么差就行了。公司的话UI会给设计稿，用户体验要求很高，所以需要做各种优化，当时公司里用了webpack gzip压缩还有cdn加速。

问题：最近在干什么

从零开始搭建vue-cli
看源码，双向绑定、diff
复习，看书，看文档

问题：有没有遇过兼容性问题

touch事件

PC与手机不同，移动端300ms延时

flex兼容性：

IE10部分支持2012，需要-ms-前缀
Android4.1/4.2-4.3部分支持2009 ，需要-webkit-前缀
Safari7/7.1/8部分支持2012， 需要-webkit-前缀
IOS Safari7.0-7.1/8.1-8.3部分支持2012，需要-webkit-前缀

css3兼容性：

chrome + -webkit前缀

firefox + moz前缀

IE + ms前缀

浏览器内核差异

微信浏览器内核本质上也是webkit，ios设备上强制用safari，浏览器内核版本存在差异。Angular-cli种子工程在微信浏览器上打不开。导入es6特性包。

移动端表单填写会放大，设置meta为viewport，user-scalable=no

ajax

一般是 new XMLHttpRequest

IE8及以下：new ActiveXObject

实习前

问题一：

ios微信表单填写时，点击之后表单被放大：

解决：在<meta>增加user-scalable：允许使用者缩放，1 or 0 (yes or no)

1	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

问题二：

ios微信返回时，会从缓存直接加载旧页面，有些事件不会再触发，旧页面一些标志也没有重置，会出现几个组件重叠。

解决：在二级页面的生命周期的destroy周期，放一个键值对到sessionstroage，返回是从sessionstroage中拿出这个值，如果这个值存在，执行reload()函数。
另一种思路：

//通过pageshow事件决定是否需要刷新页面
window.addEventListener('pageshow', function(e) {
    // 通过persisted属性判断是否存在 BF Cache
    if (e.persisted) {
        location.reload();
    }
});

问题三：

Angular-cli搭建种子工程无法在微信浏览器中打开。

解决：查看polyfills.ts文件，解注释：

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

在说这个问题之前要先搞清楚2件事，一是微信浏览器的内核究竟是什么，二是polyfills.ts这个文件有什么用。

关于浏览器内核，一个腾讯内部人员说微信6.1版本以上的android用户，都是使用的QQ浏览器的X5内核。5.4-6.1之间的版本，若用户安装了QQ浏览器就是使用的X5内核，若用户未安装浏览器，使用的是系统内核（微信浏览器到底是什么内核？）。X5内核在今年4月份，(Android)已经全面升级为Blink内核（Blink引擎基于WebKit2——苹果公司于2010年推出的新的WebKit引擎）。而ios版本一直使用的是safari的内核，也就是webkit。所以现在微信内置的浏览器的内核整体来说是比较统一的，但是微信魔改之后的Blink内核与chrome内核有所差异，所以在chrome调试之后放到微信还是会出现一些问题，就例如上面那个问题，Angular项目跑不动。
关于polyfills.ts，文档中有详细介绍。由于各个浏览器的javascript引擎有所差异，可以polyfills中导入一些兼容的包，实现浏览器缺失的某些javascript特性。

结论：微信浏览器内核可能不支持es6的新特新或者不支持其中的某个特性，把相应的包填充进去之后就能正常运行了。（感觉脱去了IE6的帽子之后又扣上了IE9的帽子。。）

浏览器兼容问题

使用babel将es6转化为兼容的es5语法。

使用polyfills。

Angular2 优势

跨平台

渐进式的WebApp

使用现代web平台的功能来实现应用程序般的用户体验。高性能、离线和零安装。

原生应用

通过使用Ionic Framework、NativeScript和React Native的策略来创建原生移动应用。

桌面应用

通过使用相同的、我们学过的、为了Web的Angular方法添加上可访问原生操作系统API的能力，来创建可在Mac、Windows和Linux多平台上安装的桌面应用。

Typescript

完全面向对象，静态类型，提供静态检查，现有 ES6+ 的超集，官方提供的编译器能够支持编译到 ES5，ES6，贴合工程化的需要，适合团队使用，学习成本不高

依赖注入：angular2的基于类型做依赖注入比基于变量名作依赖注入安全

命令行操作

命令行工具：从快速开始构建、添加组件和测试，然后到快速的部署。

个人问题：

优点：

能抗压，能为项目付出。

大二大三期间在学校实验室做项目，寒暑假基本都留校，晚上基本都是11，12点回宿舍。

实习期间，负责了一个小型项目，项目上线前基本都加班到11点，项目上线当天通宵跟进。

缺点：

debug不喜欢被打扰，会有烦躁的感觉。

实践经验少。

挫折：

大一第一学期专业流转，很多跟不上，很迷茫。但是每天会看书到1，2点。尽管效果不是很好。

自豪：

专业流转的时候是第二学期，过渡做的不好，但是大二跟上节奏并且拿了奖学金，并且经过筛选进入了创新班。