2018前端规划思考

一、性能优化方向
1、资源缓存通用方案。

利用localStorage等技术缓存前端静态资源，并提供发布更新机制，大幅提升页面加载速度，做成通用的解决方案。用老技术解决大问题。
2、使用Flex布局，关注Grid布局。
flex基本已经被所有主流浏览器支持。而grid，是下一代的布局方式。
https://www.jianshu.com/p/6262c3e48443
二、中前端NodeJS方向
1、搭建中前端基础服务
承接页面渲染、API层封装的工作。
目的：可以在同构、加载性能等方面让前端发挥更加灵活；进一步解耦前后端服务，前端专注更多用户端上的问题，服务端专注提供服务。
风险：前端目前经验能力可能相对不足，需要补充比较多的服务端知识和经验，比如机器运维、监控报警、日志问题排查等。
三、通用搭建方向
1、继续SPA的通用搭建
四、工程化方向
1、parcel替代webpack尝试
高性能、零配置。
当然webpack也在不断进化，可能使parcel优势没有那么明显。
2、typeScript的使用
https://tasaid.com/Blog/20171011231943.html?sgs=sf
3、通用构建器
可以考虑继续基于DEF实现。
五、新技术实验室
1、PWA渐进式WEB应用（持续关注，两年内规划，前期可以考虑开发特定版本供高级浏览器用户体验）。

优势：开发接近原生APP的体验及功能，可离线工作，持续更新，去中心化。

缺点：浏览器支持不够全面。苹果Safari 短时间内不会支持，5 年计划里可能实施。
https://www.w3cplus.com/pwa/nextgen-web-pwa.html
https://blog.csdn.net/lecepin/article/details/64906620?fps=1&locationNum=14

2、WebAssembly技术（五年内规划）
可能极大提升浏览器端性能，各大浏览器未来会统一支持。
https://segmentfault.com/a/1190000008402872

三方包依赖收集推荐
NodeJS
koa-proxy：灵活实现服务端代理。
crontab-ui：提供UI方便地管理定时任务系统文件；
node-crontab：Crontab-based task scheduler for node。
jszip：A library for creating, reading and editing .zip files with JavaScript, with a lovely and simple API
Browser
Base64.js：≈ 500 byte* polyfill for browsers。
rich-scroll-bar：一个兼容到ie8的滚动条。
clipboard.js：Modern copy to clipboard. No Flash. Just 3kb gzipped。
getCurrAbsPath：获取当前正在执行的js文件的绝对路径。
core-js：Modular standard library for JavaScript. Includes polyfills for ECMAScript 5, ECMAScript 6: promises, symbols, collections, iterators, typed arrays, ECMAScript 7+ proposals, setImmediate, etc. Some additional features such as dictionaries or extended partial application. You can require only needed features or use it without global namespace pollution。
cool-FileUpload: React-FileUpload。
qrcodejs：二维码生成库。
Both
md5：将字符串转换为md5值。
markdown-js：将markdown内容转换为html。
markdown-it：插件化的markdown解析工具。
web-pty：一个浏览器端的ssh工具，通过此工具，可以在浏览器中远程连接到linux服务器并进行管理，支持express和koa框架。

Webpack打包IE兼容记
1、ES3中保留字问题
default、class、catch等属于保留字，通过对象直接调用obj.default在IE下会报错（缺少标识符），转换为保留字加引号的形式就可以解决。
使用es3ify可以解决这个问题，在webpack中使用es3ify-loader进行前置编译即可：
config.module = {
rules: [{
enforce: 'pre',
test: /.js$/,
exclude: /node_modules/,
loader: 'es3ify-loader',
}]
};
但是，如果同时使用了webpack.optimize.UglifyJsPlugin压缩，可能会把上面保留字的引号给去掉了。
为了避免这种情况的发生，需要加特殊配置compress.properties=false和output.quote_keys=true：
config.plugins = [new webpack.optimize.UglifyJsPlugin({
compress: {
properties: false
},
output: {
quote_keys: true
}
})];
2、

Jsonp可能的安全问题
参考：http://www.csdn.net/article/2015-07-14/282520
解决方案
严格遵守以下处理，基本可以做到安全防范。
1、处理返回结果
使用以下格式：
//xxx从callback参数动态获取
window'xxx';
将callback回调函数作为字符串在window下调用，可以防范js注入。
举例：
请求/api/jsonp?callback=alert(1);时，返回代码window'alert(1);';不会执行通过callback传入的js代码：
2、处理callback参数
上面虽然杜绝了js注入，但是直接浏览器中访问jsonp接口，会按照html解析，有XSS漏洞风险。
所以进一步对callback参数处理，服务端过滤掉<、>标签以及单引号、双引号、;。
这样就能杜绝xss攻击。
举例：
尝试时，返回代码window'scriptalert(1)/script';，会报错Uncaught TypeError: window.scriptalert(1)/script is not a function，不会执行通过callback传入的片段。
尝试引号截断执行注入的js，请求/api/jsonp?callback='];alert(1);['时，返回代码window[']alert(1)';，会报错Uncaught TypeError: window.]alert(1)[ is not a function，不会执行通过callback传入的js脚本。
服务端经过以上处理即可杜绝js注入和xss的安全问题。

转载于:https://my.oschina.net/amor9/blog/2991159