Tweb2019年腾讯前端技术大会不完全总结
上周末，我有幸去深圳参加了2019年腾讯前端大会。本文是对本次分享的不完全总结。是时候了解一下WebIDLby 吴小倩 - W3C中国总经理
吴小倩老师，为我们介绍了WebID —— 制定web
上周末，我有幸去深圳参加了2019年腾讯前端大会。本文是对本次分享的不完全总结。
是时候了解一下WebIDLby 吴小倩 - W3C中国总经理
吴小倩老师，为我们介绍了WebID —— 制定web规范的标准语言。Web IDL的关键在于定义了如何把DOM和相关的Web API映射到语言里，尤其是ECMAScript。之前的标准都使用OMG IDL，没有正式的对这些映射关系作出定义，实现者需要从字里行间猜测。一个统一的、规范的、标准的语言，可以避免各个浏览器厂商在实现同一个web api时出现差异，带来兼容性问题。吴老师介绍了最新的关于网页端支付的web api标准：
[SecureContext, Exposed=Window]interface PaymentRequest : EventTarget { constructor( sequence methodData, PaymentDetailsInit details, optional PaymentOptions options = {} ); [NewObject] Promise show(optional Promise detailsPromise); readonly attribute DOMString? shippingOption;}作为一名开发者，了解WebIDL，可以帮助我们更好的读懂DOM API的定义，更好地认识浏览器和web，同时，有助于我们更好地书写对web的想法提案，为web的发展贡献自己的思考。
Headless CMS - 小微项目的业务中台解决方案by 张云龙 - 巧子科技创始人
张云龙老师给介绍了strapi：一个数据到API的自动生成系统，为产品运营人员提供数据管理后台。对于企业中的小微项目来说，strapi是一个很不错的解决方案，对于个人开发者来说，strapi就是一个外包神器。
Flutter在腾讯企鹅辅导上的实践之路by 涂金林 - 腾讯教育flutter负责人
涂金林老师首先介绍了flutter，并且从实践框架及页面栈管理、性能优化这两个方面，介绍了flutter在腾讯企鹅辅导上的实践之路。最后，介绍了对项目中某个模块进行flutter for web改造的过程。整个演讲还是有不少干货的，对其他flutter的使用者有一定的借鉴意义。
大型Web项目可用性提升优化by 郭林烁 - 腾讯AlloyTeam高级前端工程师
郭林烁老师介绍了腾讯文档在可用性提升上的实践。
1、脚本错误监控、优化和持续跟进。从最基本的脚本错误监控开始，使用CORS避免Script Error，结合sourcemap定位错误代码。发现问题后，通过代码历史提交记录，找到开发者，作为问题的处理人。接着生成bug单，推送报警给问题处理人，并跟踪问题的解决过程。同时，将监控前移，上线前使用自动化测试等流程减少Bug数量。
2、前端日志系统的搭建、优化和打通。在关键点上报日志，且上报是可以采用worker等方式避免日志上报对主线程的影响。使用特定的id，打通全链路日志，并且时刻关注用户的反馈，通过反馈不断更新、优化测试用例，避免问题再次出现。
3、腾讯文档白屏监控体系和优化。优化资源的加载，加载失败时，进行重试，并且及时给用户反馈。可以使用SRI来保证资源加载的完整性，使用CSP保证加载正确的资源。在页面卡死时，可以结合上面两点的日志定位问题，然后进行修复。
腾讯文档搭建了一整套完善的可用性监控体系，其流程和经验是值得学习的。所有的这些工作，都是为了给用户提供更好的体验。
微信小程序同构方案新思路by June - 腾讯web前端高级工程师
June老师为我们介绍了微信小程序同构方案的新思路 —— kbone.
目前市面上有许多的小程序同构方案，如mpVue等。这些同构方案让我们可以直接使用vue、react等进行小程序开发，一套代码，多端运行。这些同构方案都是同一个思路：将Vue模板静态转换为WXML模板，再交由小程序渲染。但是这个方案有一定的问题：对于一些复杂的模板语法无法转化，比如富文本渲染、过滤器、图片预览等等。这是因为vue的模板语法毕竟和wxml语法不对等。
换一种思路，直接仿造DOM的接口，在小程序内创建一个仿造的DOM树，交由小程序渲染。这样的话，完全不用对上层的vue代码进行改造，就能完成同构。
接下的问题是：1、如何创建仿造DOM树；2、如何将仿造的DOM树渲染到页面上；3、如何监听页面事件
尽可能按照标准来仿造Dom接口，如createElement、appendChild等。借助小程序自定义组件的可嵌套性实现仿造的DOM树，交给小程序渲染。由于小程序的事件系统与web端不一样，仿造了浏览器的事件系统，接管小程序的事件。
在实现过程中，有许多的细节问题，比如性能优化、如何DOM树更新策略等，June老师都一一做了介绍。不过，这种同构方案也有问题：由于整个适配器逻辑都是运行时逻辑，当页面复杂性增加，节点变多时，kbone的性能问题就显现出来了。
目前，kbone已经成为了小程序官方推荐的多端同构方案。
极致SSR:高效率构建高性能Web同构页by 段隆贤 - 腾讯web前端高级工程师
段老师首先给出了极致SSR的目标：1、更短的首次有效绘制时间；2、更短的可交互时间；3、有更好的交互体验，给用户更好的过度动画和预期。
为了达到极致SSR的目标，首先采用了分块传输的策略，不需要等待页面所有的接口返回， 页面头部接口响应即可响应页面。在实现分块的时候，采用的是自动化分块，由模板的语法树， 分析代码的上下文， 分析数据和模板间的依赖， 用异步数据分割模板， 分块逐步输出。
然后是Vue编译优化方案，由Vue语法树，在编译时生成线性字符串的拼接， 无需构造和遍历VDOM树形性能更高。
降低不必要的同构DOM量，采用局部同构的方案，加快可相应时间。
段老师给我们分享了他在SSR方面的思考和实践，干货满满。
Serverless SSR实践by 水澜 - 阿里巴巴前端技术专家
来自阿里的水澜老师，给我们带来了Rax的分享。Rax是一套遵循React标准的跨端解决方案。同时，Rax拥有将工程快速转变为Faas的能力，使得ssr和serverless的结合更加快捷，方便。
Web编辑器的实现，从简单编辑到专业排版
by 张祥 - 腾讯文档Word / TIM Andorid负责人
张祥老师首先介绍了如何实现一个简单的编辑器，核心的就是contenteditable这个属性。
实现一个编辑器需要解决许多的问题，最主要的就是排版上的各种坑。
腾讯文档的整体架构如下：
由于腾讯文档是一个多人协作的产品，在多人协作时也需要考虑很多的问题，最主要的就是需要实现操作的原子化。腾讯文档采用了模块化、插件化的设计，并且有计划开放编辑器SDK，打造一个社区。
原文：微信处搜索 符合预期的CoyPan
我自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！
如果你也想学习前端，那么帮忙转发一下然后再关注小编后私信【1】可以得到我整理的这些前端资料了（私信方法：点击我头像进我主页有个上面有个私信按钮）
感谢您的阅读。最近都没太多时间回复大家，很抱歉，因为实在太多BUG要修了。文章干货程度不多，但是任然坚持分享，希望大家谅解~！忙完这阵子，一定加倍分享2020年最新最全最实用的干货文章！祝大家明年开春，收获理想中的offer、致谢
WEB前端的认识？
Web前端的认识
经常听到的一句话就是：“那谁谁谁是开发...”，解读起来有两种意思：
1 一种是牛逼，表达一种敬佩和对成为一个开发者的向往。在中国的大环境中这种意思的表达，经常来自“测试”或UE。
2一种是苦逼，表达一种轻视和对开发人员纯技术思维的不屑。这种声音常常来自于市场或所谓的产品经理们。
今天我们不讨论测试与开发，产品与开发的对立战争，仅仅狭义上聊一聊另一种开发，一种真正的苦逼+牛逼的开发-Web前端开发。实际上大多数的开发人员对于Web前端开发都有所接触或涉猎。传统意义上的Web前端开发仅仅处理静态HTML+CSS，再由其他开发人员加入JavaScript。从这个方面来看成就了这个职业的苦逼。而Web前端开发独立是由JQuery的出现所引发的。今几年伴随着前后端分离，Node.js的出现，更是一发不可收拾，Web前端开发更是成为了一种香饽饽同时也造就了这个职业的牛逼。
伴随着时间推移、技术的革新HTML、CSS、和JavaScript 已经有了相当的大改变，细心的读者可能已经注意到三剑客的图中HTML下面一个大大的5，它不是HTML的logo，仅仅表明目前HTML已经是第5版。同时CSS已经是第3版。通常把它们称为HTML5和CSS3,每个版本的发布都会给标记语言增加许多新的特性。但几乎不会移除任何旧的功能。因为在Web开发中有个一原则：
新的浏览器不能中断地旧网页的支持，网页一旦用Web的标准建立起来就能够永远正常显示和工作。
随着这些语言增加了越来越多的功能/特性,最好的开发实践也会改变，但这不代表过去最好的开发实践会立即失效。作为一个Web开发者需要紧跟着技术潮流，并且能够分辨新旧技术，区分过去的黄金标准和未来的科技趋势。请记住：
Web技术一直在改变，没有一种技术可以一直流行。
说了这么多，但这仅仅只一个开篇。因为见了很多开篇没有开好同学，说是要学Web开发，上来就直接学习写JS,写CSS...
不会走的时候，不要尝试着去跑..
只有一个开篇，肯定不能成为一个Web前端工程师。
有很多人长时间的停留在入门阶段，用3个月工作经验，重复了3年了，然后攒了4年有工龄...可惜，可叹！
不管你用什么样的学习方式，分享以下几点，还望借鉴！
[1].培养开发者的思维方式
首先给大家分享一下程序员买瓜的笑话：
当程序员的老公打电话：“下班顺路买一斤包子带回来，如果看到卖西瓜的，老婆给买一个”
结果是什么？程序员被罚跪键盘了...当然这只是开发者的一种逻辑笑话。一个开发者不仅要有较强的逻辑思维能力，用代码说话，用代码交谈，将自己的所想所思，用程序的方式展式出来；一个开发者更要有工程的观点，才可以称为一个工程师，简单来说比如先做什么后出什么...还要有全局观，能透过一点而看全貌；一个开发者还要借鉴需多的设计思想，像已经被提出来经常实践用到的设计模式，这些凝聚，沉淀了前辈们思想的结晶；
这个不是一朝一夕能够习的，这个才是一个开发者工作经验所体现的地方...工作经验不是你掌握了多少流行的技术，而是你对这些流行技术背后所蕴藏的思维方式吸收了多少。从事前端这么多年，对于前端这个行业的动态了如指掌，这几天刚参加玩腾讯公司举办的“web前端技术交流峰会”前端技术在以后会发展的更好，但是希望新手不要急功近利，没有用。学习路线，学习方法，学习效率不懂的可以随时问我，下面有我的web前端裙113485407，如果你只是来凑热闹的，那你别加，这里只希望真想学习前端的人加入，也有非常精品的学习视频免费分享。
[2]. 认识大脑
大脑在想什么？我们的大脑总是在渴求一些新奇的、刺激点的东西，它一直在搜寻、审视、期望着不寻常的事情发生。我们每天都会遇到很多按部就班的事情，比如走过的路口，这些事情很普通，对于这样一些例行的事情或者平常的东西，大脑是不会在意的，它的想法很简单，就是不让这些平常的事情大脑真正的工作。那么它所谓的真正的工作是什么？记住那些会引起神经元会“点火”、情绪爆发，能释放出一些化学物质的东西。我不认为听着音乐看书，听着音乐写代码是可以并行的！
让你的大脑专注的工作并且认为这是个很重要，大脑才会接收这些东西...
web前端开发前景何去何从
web前端就是用代码的形式，还原UI设计师设计的界面，并实现各种交互效果。web前端工程师是程序员里面入行门槛较低的一个职业，就前端应用开发框架而言，已经形成了HTML5、CSS3、《Ecmascript 6》标准规范。
要学的内容主要有：
①计算机基础以及PS基础
②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）
③移动开发
④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）
⑤小程序开发
⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）
⑦就业拓展（网站SEO与前端安全技术）
互联网行业目前还是最热门的行业之一，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。
想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，能够在校期间取得大专或本科学历，中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的，建议实地考察对比一下。
祝你学有所成，望采纳。
