本周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周榜单。国内外新闻热点，前端最新动态PWA能否带来新一轮前端技术大洗牌？:本文由BrilliantOpenWeb团队成员和百度高级前端工程师彭兴分享了他对PWA和大前端技术的看法。本文回顾了Web在移动时代遇到的两大枷锁：用户体验枷锁和用户留存枷锁，讨论了PWA作为解开枷锁的钥匙的可行性，并分析了它是否真的能够弥补网络。77%的网站仍在使用易受攻击的JavaScript库：上周，Snyk发布了一份开源社区安全状况报告，发现随着开源社区变得更加活跃，开源代码中包含的安全漏洞范围它们的影响也在扩大。本文从网络安全的角度对数据进行深入分析，发现在统计的43.3万多个网站中，77%至少使用了一个包含已知漏洞的前端JavaScript库；更详细的数据说明请参考原文。循序渐进的开发教程，掌握基本技能基于CSSGrid的常用响应式布局：CSSGrid允许我们在二维坐标系上排列元素。在主流桌面浏览器逐渐完善支持后，CSSGrid也开始登陆移动端浏览器；本文主要介绍如何使用CSSGrid实现常见的响应式布局。本文介绍了图文混合布局、整页图库、卡片布局、圣杯布局等；更多CSSGrid相关信息在这里。2018年值得使用的React组件库：工欲善其事，必先利其器；作者根据自己的实践经验和GitHub、StackOverflow等社区的活跃度，在本文中推荐了十多个值得学习的组件。试用React组件库，提升应用开发效率。本文作者讨论的组件库包括ReactMaterialUI、React-Bootstrap、React工具箱、ReactBelle、ReactGrommet、KhanAcademy的ReactComponents、MaterialComponentsWeb、AntDesignReact、SemanticUIReact、OnsenUI、React虚拟化等；有关React的更多信息，请参阅此处。基于Rust编写高效安全的Node.js原生模块：RisingStack一直致力于提升Node.js的运行效率；然而，它在去年面临一个困境：它已经达到了Node.js本身的瓶颈。为了突破天花板，RisingStack决定将关键的计算模块以原生的方式实现；在比较技术选择后，他们决定使用Rust而不是C++来编写原生模块。本文首先分析了Node.js服务器速度的瓶颈，然后展示了如何使用RustFFI和RustNeon实现一个简单的URL解析模块，最后对比两者与Node.js实现的性能；更多Node.js.js学习参考以简单的术语解释Node.js全栈架构。使用Angular和Vue.js实现同样的功能对比：Angular和Vue.js都是优秀的Web组件框架，两者在一些语法风格上也有相似之处。本系列就是使用这两个框架编写的相同的、简单易扩展的应用，要仔细比较两者。本系列包括四篇博文。首先，从项目文件结构的角度对两者进行比较；然后仔细分析了学习资料，组件语法中的相似代码等，最后讨论了如何使用TypeScript开发Vue.js应用程序。更多AngularJS和Vue.js学习资料可以在这里找到。工程实践基于实践，提出如何在实际层面显着提升React应用的性能：应用性能优化是一个普遍存在的问题，随着我们应用业务需求的不断变化，性能问题层出不穷；这篇文章是另一篇关于React应用程序性能优化的优秀讨论文章。本文依次讨论不合适的shouldComponentUpdate和误用PureComponent会导致反优化，如何快速修改DOM元素，如何避免过于频繁的事件触发和回调执行。更多关于React的内容，可以阅读React与前端工程实践。Helmet和Express应用程序安全性：Express是一种流行的Node.js服务器端框架。本文介绍如何使用Helmet等框架来增强Express应用的安全性。本文详细介绍了X-DNS-Prefetch-Control、X-Frame-Options、Strict-Transport-Security、X-Download-Options、X-Content-Type-Options、X-XSS-Protection等字段HTTP响应头含义及作用；更多Node.js学习参考资料深入浅出地讲解Node.js全栈架构。或许class属性中的箭头函数并不如你所想：ArrowFunction箭头函数是ES6重要的语法特性之一，可以优化我们代码的可读性，自动绑定当前的this对象。但是，本文作者表示，我们在类属性中使用箭头函数时，往往不符合直觉判断；classattribute-stylearrowfunctions会被转换为constructors，因此不能被子类继承，而且这种模式的性能也比boundfunction模式差。更多JS学习请参考《现代JS语法基础与工程实践》。深度阅读，深度思考，升华开发智慧我是如何在7分钟内黑进40个网站的：本文作者详细介绍了对一个存在漏洞的网站进行渗透提权的过程。这是一个很好的安全实践教程。作者使用Nmap进行嗅探，使用gobuster进行路径枚举，构建虚拟邮箱，上传WebShell；然后从cgi-admin/pages获取明文数据库密码，成功获取所有数据库权限。更多网络安全相关知识，可以阅读《现代Web开发工程实践》。RemoteCodeExecutioninAtom：本文作者对Atom1.21.1版本的Markdown解析漏洞导致的远程代码执行（RCE）进行了深入分析，也很好的了解了common的影响桌面应用程序文章中的Web安全问题。本文首先介绍了Atom是如何通过CSP来限制XSS的，然后分析了Atom是如何解析Markdown文件的，如何针对这种解析机制构造本地DOMXSSPayload，以及如何执行本地任意代码和加载执行远程代码；更多Web安全相关知识可以阅读《现代Web开发工程实践》。使用Node.js和OpenCV进行人脸识别：近年来，人工智能和深度学习的概念开始流行，相关理论技术也被广泛应用于工程项目中。周榜还推荐了如何使用JavaScript实现机器。学习算法；本文将逐步介绍如何使用Node.js构建一个简单的人脸识别应用程序。本文从准备数据集开始，然后讨论如何训练识别器，如何进行模型测试等；更多Node.js学习参考资料深入浅出地讲解Node.js全栈架构。开源项目乐于分享，共同推动前端开发node-prune：node-prune是一个简单的工具，用于去除./node_modules中不需要的文件，如MarkDown、TypeScript源代码文件等；从而尽可能减少node_modules中的文件数量，以加快应用程序的部署速度。react-i18next：react-i18next是一个方便易用的React国际化辅助库，可以帮助我们快速实现应用的国际化。bundle-buddy-webpack-plugin：BundleBuddy是一个知名的工具，可以在多个JavaScriptChunks/Splits中找到冗余源代码，以便我们选择合适的代码拆分参数来提高页面加载性能。bundle-buddy-webpack-plugin是基于BundleBuddy封装的WebpackPlugin，方便我们集成到现有的开发流程中。aws-amplify：AWSAmplify是一个供web前端和移动端开发者构建云应用的工具库；它由AWS开源，目前仅支持AmazonWebServices，但其初衷是为各种云或自定义服务器提供插件化、功能化的工具。Amplify提供声明式接口，可以帮助开发者快速添加使用情况收集、权限验证等功能。逃出北京的程序员说：我要工作到70岁：本文是二叉树出品的10集纪录片第三集。旅行;这个梦幻般的词是如此昂贵，以至于对许多人来说，它是一种奢侈。而踏上这条“逃亡”之路的从业者真的如愿以偿吗？本文不谈具体技术，而是从生存和生活的角度谈技术人员的道路选择。前端置顶《前端置顶》是InfoQ旗下专注于前端技术的垂直社区。加入前端Top学习群，请关注“前端Top”公众号，回复“进群”。投稿请发邮件至editors@cn.infoq.com，并注明“前端投稿”。
