文档章节

2018前端规划思考

丶不将就
 丶不将就
发布于 2018/12/20 18:06
字数 1187
阅读 10
收藏 0

一、性能优化方向
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://www.cnblogs.com/AmorR/p/8717708.html

丶不将就
粉丝 1
博文 61
码字总数 0
作品 0
杭州
程序员
私信 提问
前端 Leader 如何做好团队规划?阿里内部培训总结公开

摘要: "行成于思,毁于随"——韩愈 在阿里从一线前端工程师到技术 TL(Team Leader) 也三年有余了,最重要最难的就是做规划,你可能会遇到如下几个问题: 业务压力巨大,前端是瓶颈,如何做...

lunaqi
2018/05/16
0
0
2018:坎坷前行 | 掘金年度征文

2017年的年年底,在本子上手写了年度总结和来年的规划,结果就是18年再也没有翻开过那本日记本,18年的总结在掘金上以这种形式记录下来,希望19年能时不时打开看看,警醒自己。 背景 先做个简...

william_li
01/19
0
0
2018-某熊的技术之路: 做些有趣的产品

2018-某熊的技术之路: 做些有趣的产品 年初的时候,我就在想,今年的主题词是什么;上半年考虑的较多的是所谓研发效能的提升,下半年却渐渐发现自己更多的会在想产品这两个字。从代码出发,在...

王下邀月熊
2018/12/31
0
0
奇舞周刊第 259 期:数据驱动改进前端体验的 Guess.js

记得点击文章末尾的“阅读原文”查看哟~ 下面先一起看下本期周刊摘要吧~ 时间过得好快,转眼又到周五~ 上穷碧落下黄泉,周刊君从数十篇文章中,为你挑选了本期的九篇文章,愿你有(gei)所(...

奇舞周刊
2018/05/18
0
0
iDeepWise+NXP丨儿童们的“AI机器人”来了

  6月20-21日,深思考人工智能受邀参加2018恩智浦半导体大中华区MICR合作伙伴技术交流会,积极参与产品推广并促使双方共同进步。      恩智浦半导体在众多半导体产品市场长期位于领先的...

深思考人工智能
2018/06/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

八、Docker Swarm

Docker Swarm有两件事:一个企业级的Docker主机安全集群,另一个是用于协调微服务应用程序的引擎。 在集群方面,它将一个或多个Docker节点组合在一起,并允许你将他们作为一个集群来管理。开...

倪伟伟
昨天
5
0
Fragment懒加载其实很简单

前言 记得去年面试的时候, 面了一家小公司, 那个面试官问我, fragment的懒加载做过吗?我说没做过(确实没做过).后来面试快结束了, 又问我, 懒加载没做过是吗?后来可想而知也没收到offer, (ಥ_...

天王盖地虎626
昨天
4
0
聊聊dubbo的TimeoutFilter

序 本文主要研究一下dubbo的TimeoutFilter ListenableFilter dubbo-2.7.2/dubbo-rpc/dubbo-rpc-api/src/main/java/org/apache/dubbo/rpc/ListenableFilter.java public abstract class Liste......

go4it
昨天
7
0
方法与数组

方法 方法就是完成特定功能的代码块;在很多语言里面都有函数的定义,函数在Java中被称为方法 格式: 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2…) throw 异常{ 函数体;...

凹凸凸
昨天
6
0
死磕 java同步系列之StampedLock源码解析

问题 (1)StampedLock是什么? (2)StampedLock具有什么特性? (3)StampedLock是否支持可重入? (4)StampedLock与ReentrantReadWriteLock的对比? 简介 StampedLock是java8中新增的类,...

彤哥读源码
昨天
19
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部