好文章推荐系列——前端

前端领域的 “干净架构”

今天我们来看一种前端架构的模式，原作者称它为“干净架构（Clean Architecture）”，文章很长，讲的也很详细，我花了很长时间去读完了它，看完很有收获，翻译给大家，文中也融入了很多我自己的思考，推荐大家看完。

英文原文：https://dev.to/bespoyasov/clean-architecture-on-frontend-4311
本文中示例的源码：https://github.com/bespoyasov/frontend-clean-architecture/

前端100万行代码是怎样的体验？

近年来，阿里数据中台产品发展迅速。核心产品之 Quick BI 连续 2 年成为国内唯一入选 Gartner 魔力象限的国产 BI。Quick BI 单一代码仓库源码突破了 100万行。整个开发过程涉及到的人员和模块都很多，因为下面分享的一些原则，产品能一直做到快速迭代。

《蚂蚁前端研发最佳实践》文字稿

作者：陈成，Umi & Dva 等开源库作者。以下是我在 2019.11.15 成都全栈大会分享的文字稿，介绍了蚂蚁前端研发的最佳实践，其中我提取了三个比较重要的点，每个点都是我们实践和深入思考后的结果，希望能对大家有所启发，欢迎探讨。

写给初中级前端的高级进阶指南

这篇文章会提到非常非常多的学习路线和链接，如果你还在初中级的阶段，不必太焦虑，可以把这篇文章作为一个进阶的路线图，在未来的时日里朝着这个方向努力就好。
我也并不是说这篇文章是进阶高级工程师的唯一一条路线，如果你在业务上做的精进，亦或是能在沟通上八面玲珑，配合各方面力量把项目做的漂漂亮亮，那你也一样可以拥有这个头衔。本文只是我自己的一个成长路线总结。

Web前端技术简介技术分享大纲（入门级）

这篇分享的主要目的是为大家普及前端的发展历程，以及简单介绍相关的开发工具及其用途，从而使大家对当前web前端开发有个大概的了解。由于时间有限，我们不能十分深入地讨论每一项技术的具体细节。不过，在了解大概技术种类之后，我们可以投票选出大家最想深入了解的主题，在今后的技术分享中，可以深入讨论具体细节。在本次分享之后，我希望你能了解到：

现代前端跟传统前端开发有何不同？
现代前端开发的工具有哪些？
作为非前端开发者，学会基本的前端开发可以做什么？

所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。
良好的用户体验设计，是产品每一个环节共同努力的结果。
除去一些很难一蹴而就的，本文将就页面展示、交互细节、可访问性三个方面入手，罗列一些在实际的开发过程中，积攒的一些有益的经验。通过本文，你将能收获到：

了解到一些小细节是如何影响用户体验的
了解到如何在尽量小的开发改动下，提升页面的用户体验
了解到一些优秀的交互设计细节
了解基本的无障碍功能及页面可访问性的含义
了解基本的提升页面可访问性的方法

现代 CLI 和 GUI 方案指南

提到初始化项目，那就必须提到脚手架这个名词，那为什么这篇文章的标题不是关于脚手架而是关于初始化项目呢？脚手架这个名词来源于建筑工程领域，百度百科对其的解释是“脚手架是为了保证各施工过程顺利进行而搭设的工作平台”，也就是说脚手架为工人提供了施工的基础功能。将其引申到软件工程领域，又是什么含义呢？

前端性能优化指北-关于有些细节和思路

这份清单综合性很强，几乎介绍了所有的可用的优化方式。那么，如果你只有一个小时进行优化，你应该干什么呢？让我们从中总结10个最有用的来。别忘了在你开始优化前和结束优化后，记录你的结果，包括开始渲染时间以及在3G，有限连接下的速度。

但没关系，本文只是一个普通大纲（希望能做到综合性强），你应该根据自己的工作环境列一份适合自己的清单。最重要的，在开始优化之前，先对项目中存在的问题有一个明确的了解。

业务线前端 7 年之 “感”

业务压力大也许只是一时的，可以选择压力小一点的业务线，或是找到应对压力的办法；没有话语权也许是因为本身能力不够或是沟通不到位，不能帮助合作伙伴解决问题；至于成长，核心在于自己是否愿意挤出时间、挤出精力，持续地学习。

前端搞基建|堂主 - 如何推动前端团队的基础设施建设

本文根据 2020.02.29 日，《第二届前端早早聊大会》的“前端基建”专场分享整理而来。

本文是契合大会所有分享都以 “如何” 为切入的要求，同时也是最近一年，对我所负责的团队在前端技术基础设施建设方面如何从 0 到 1 的一次沉淀总结。

Contemporary Front-end Architectures

旨在帮助任何 web 开发人员对现代 web 应用程序架构有一个全面的了解，篇幅较长

Making GitHub’s new homepage fast and performant

This post is the third installment of our five-part series on building GitHub’s new homepage:

How our globe is built
How we collect and use the data behind the globe
How we made the page fast and performant
How we illustrate at GitHub
How we designed the homepage and wrote the narrative

2020年大前端技术趋势解读

前端正在通过持续的技术革新和技术融合不断突破自身边界，进而重新定义自身价值。在这种大变革的时代背景下，腾讯IMWeb前端团队也正在与时俱进得进行着技术更新、优化与升级，结合自身这一年的快速发展，IMWeb团队为大家带来2020年大前端技术趋势解读

滨江前端沙龙分享：前端团队研发效能提升的探索与实践

读者受益:

研发效能定义：知道研发效能是什么？（对「研发效能」的定义有一个经得起推敲的参考）
研发效能提升：知道如何提升技术团队的研发效能？（对提升自己所在团队研发效能有一些想法/灵感）
技术的价值：当被问到自己（技术/技术人）的价值时，能从容的去回答
职业发展：关于自己的职业发展，可以想的更清楚
成长抓手：关于自己在工作中成长的抓手，可以拿捏得更精准

一文带你层层解锁「文件下载」的奥秘

最近有研究一些媒体相关的工作，因此打算对下载做一个整理。

不能说的秘密——前端也能玩的图片隐写术

隐写术算是一种加密技术，权威的 wiki 说法是“ 隐写术是一门关于信息隐藏的技巧与科学，所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。” 而用前端如何实现呢？

从破解某设计网站谈前端水印(详细教程)

作者对前端实现水印的几种方式进行了深入研究，同时对他们的可靠性也进行了测试。

如何有效地进行代码 Review？

研发都知道代码 Review 的重要性，在腾讯代码 Review 也越来越受大家重视，作为腾讯专有云平台研发的一员，我参与了大量的代码 Review，明显地感受到有效的代码 Review 不但能提高代码的质量，更能促进团队沟通协作，建立更高的工程质量标准，无论对个人还是团队都有着重要的价值。本文就为什么要做代码 Review 以及如何有效地做代码 Review 分享一下个人的看法。

前端冷知识

来自月影，分享一些在前端开发中，你不知道的JavaScript、CSS和HTML趣味知识，增加你的知识面。

对 OzJS 的一些疑惑、建议与探讨

这是 13 年的一个 Github issue，来自阿里玉伯和目前已入职字节的大佬的对话，信息量很大，可以学到不少东西。。

ReactJS Roadmap 🗺 For Developers 💻

这个系列的文章包括 5 篇，分别是 React、FrontEnd、Bootstrap、JS、Vue 的

Ultimate RoadMap with so many resources for Front-End Development 💥💥

I’ve got you everything covered. This is the final you need.
The best resources with the best road map. You definitely need this if you are curious how to start with front-end development. This post covers everything about front-end development.

高质量前端快照方案：来自页面的「自拍」

本文基于html2canvas和canvas2image，从快照的内容完整性、清晰度和转换效率等多个方面，介绍了前端页面生成高质量快照的解决方案。

我的前端成长之路

来自阿里玉伯：“全情投入、守正出奇、愿等花开”

前端项目自动化部署——超详细教程（Jenkins、Github Actions）

本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。

第一部分是使用 Gitea 配置局域网 git 服务器，再使用 Jenkins 将 Gitea 下的项目部署到局域网服务器。
第二部分是使用 Github Actions 将 Github 项目部署到 Github Page 和阿里云。

阅读本教程并不需要你提前了解 Jenkins 和 Github Actions 的知识，只要按照本教程的指引，就能够实现自动化部署项目。不过教程中所有的操作均在 windows 下运行，其他操作系统上可能会有一些区别。

从 VSCode 看大型 IDE 技术架构

主要回答了以下几个问题：

大型复杂 GUI 软件（如 IDE 类）如何组织功能模块代码
如何使用 Electron 技术将 Web 软件桌面化
如何在打造插件化开放生态的同时保证软件整体质量与性能
如何打造一款好用的、流行的工具软件

你所需要知道的代码整洁之道

每次 review 过往写的代码，总有一种不忍直视的感觉。想提高编码能力，故阅读了一些相关书籍及博文，并有所感悟，今将一些读书笔记及个人心得感悟梳理出来。抛转引玉，希望这砖能抛得起来。

宋代禅宗大师青原行思提出参禅的三重境界：

参禅之初，看山是山，看水是水；禅有悟时，看山不是山，看水不是水；禅中彻悟，看山仍是山，看水仍是水。

同理，编程同样存在境界：编程的一重境界是照葫芦画瓢，二重境界是可以灵活运用，三重境界则是心中无模式。唯有多实践，多感悟，方能突破一重又一重的境界。
最后，愿大家终将能写出自己不再讨厌的代码。

前端极致性能优化手册大全

非常详尽地从以下几个方面介绍了前端如何进行性能优化：

webpack
图片
缓存
浏览器渲染
服务器

Fast load times

这其实是一系列文章的集合，总结了一些前端性能优化相关的文章，包括：

Set performance budgets
Optimize your images
Lazy-load images and video
Optimize your JavaScript
Optimize your resource delivery
Optimize your CSS
Optimize your third-party resources
Optimize WebFonts
Optimize for network quality
Measure performance in the field
Build a performance culture

哪些技术会决定前端开发者的未来发展？

2019年下半年即将到来，上半年狂风骤雨般的裁员浪潮让每一位从业者背脊发凉，在经历了五六年黄金发展期之后，前端开发这个行业似乎也进入了转折点。作者在该文章里阐述了他认为的一些前端开发者需要关注的技术，仅供参考吧。

中文技术文档的写作规范

出自阮一峰，介绍了写中文技术文档（主要是 Markdown）时的规范，包括：标题、文本、段落、数值、标点符号、文档体系等方面

前端如何在项目中做出亮点

作者对前端在项目中如何做出亮点给出了自己的答案，作为程序员，我们很容易成为“搬砖仔”、“切图仔”、“页面仔”，但是其实如果我们再往前一步，就可以站得更高，走的更远

if 我是前端团队 Leader，怎么制定前端协作规范?

记录了作者在制定前端协作规范时的一些思考，万字长文全是干货。

现代 Web 开发的现状与未来（JSDC 2019 演讲全文）

本文是 “JS黑客，GUI大法师，WebApp工匠，虚拟世界建筑师，奇幻科幻PC游戏动漫宅”——Dexter.Yy 受邀在台北的 JSDC 2019 活动中做的一次分享，从内容上来说已经可以算的上他的 2019 跨年演讲，内容非常多且详尽，可以开阔视野，展望未来。下图是作者自我介绍的：

从零做一个前端开源项目

该文已录制成免费的视频教程，想看视频的点击：https://www.imooc.com/learn/1003

什么是开源？
为何做开源？
做什么？
注册账号
搭建开发环境
提交代码
创建官网
如何宣传？
持续迭代
总结

从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

该文梳理了一个较为完整的前端向知识体系，内容超多

玉伯《从前端技术到体验科技（附演讲视频）》

我想，玉伯大神应该不用过多介绍了吧，从之前的 seajs 到现在的 ant design，而玉伯大神也从一名前端工程师“进化”为一名架构师，这篇文章是玉伯大神在 SEE Conf 大会上的演讲记录，同时文章末尾还有演讲视频链接，不喜欢看文字的朋友可以直接看演讲视频。

哔哩哔哩（B站）的前端之路

作者总结了 B站的前端进阶之路，前端的轮子很多，作者介绍了 B站是如何选型的以及遇到了哪些坑。

深入剖析 WebKit

这篇文章和他的题目一样，真的很“深入”，因为你可以看到滚轮滑动的速度。。不过图文并茂的表现形式并不会让你产生“看不下去”的感觉，来张目录感受一下是不是干货：

前端文章- 收藏集 - 掘金

掘金上面关于前端的文章集合，闲暇时间看一下，可能会有意想不到的收获

前端工程——基础篇

fis 作者张玉龙对于前端工程的理解，从组件化到资源管理都阐述了自己的观点，这是一篇 2015 年的文章，但是文中的某些观念到现在看来仍然是字字珠玑，相信看完之后的你可以对前端有更深层次的理解。

大公司里怎样开发和部署前端代码？

又是张玉龙的文章，通过一个实际的场景一步步的告诉你大公司的前端代码是如何开发和部署上线的。

Web 前端知识体系精简

从前端三剑客：HTML、CSS、Javascript 的角度分析了前端的知识体系，涉及到的领域比较广泛，很适合前端新人开拓视野和寻找学习方向，同时总结的也很全面，是一篇不错的入门教材。

移动时代的前端加密

这篇文章篇幅很长，对于前端来说，很多人感觉“加密”是莫须有的一种东西，其实这是一种误解，“加密”并不意味着绝对安全，这篇文章将从这个角度向你阐述前端加密的正确姿势。

前端疲劳

有这么多不同的前端技术栈，不同的前端框架，不同的前端工具和库像水一样包裹着我，我不去学就不会，学了又学不完。在前端的海洋里越陷越深的我究竟该如何自救呢？这篇文章可能有你要的答案

精读前后端渲染之争

前后端渲染一直以来都是一个带有争议的话题，而该文章的作者对国外一篇关于前后端渲染的文章进行了精读，介绍了前后端渲染各自的优缺点，以及我们在实际项目中如何取舍。

技术雷达之「微前端」- 将微服务理念扩展到前端开发

看标题就知道，这是一篇基本上看不懂的文章，不过图文并茂的形式让这篇文章生动了很多，内容很充实，覆盖面很广

理解 Web 路由

关于路由，其实是一个很抽象的概念，而这篇文章对经常提到的前端路由和后端路由的实现和区别进行了很详细很清晰的讲解，同时对动态路由和严格路由也进行了介绍。

一站到底—前端基础之网络

这篇文章算是近几年来我读过的信息量最大、知识点最全的文章了，作者从访问一个网址说起，为读者建立了一个健全的网络知识体系，该文章解答了以下问题：

必会：

http 报文都有哪些内容？
HTTP 协议头含有哪些重要的部分，HTTP 状态码？
HTTP 状态码状态码都有哪些？
什么是强缓存？什么是弱缓存？
浏览器的现缓存机制是什么？如何设置 HTTP 缓存？
你知道有哪些 HTTP 方法？POST 和 PUT 有什么区别？
如何对数据进行压缩（ZLIB），Gzip? 压缩的范围是什么，请求头会压缩吗？
跨域，为什么 JS 会对跨域做出限制？如何允许跨域?

基础：

影响网速的原因有哪些？网络丢包的主要原因是什么？
网络体系结构的五层参考模型都是什么？它们之间的关系是什么？
我们常听到报文、段（分组）、数据报、帧、和数据包，它们有什么关系？
Ajax 能发送 http 请求，它和 http 有什么样的关系？
HTTP1.0 到 HTTP1.1 解决了什么问题？
http2 有什么特性？
http1.1 为什么会有队首阻塞？
SSL 与 TLS 关系？HTTPS 协议如何实现？

补课与拓展：（慢慢更新）

常用的传输层协议有哪些？TCP 和 UDP 分别有什么特点？
解释一下 TCP 的三次握手和四次挥手？
为什么说 TCP 可能是网络通信的瓶颈？如何解决 TCP 队首阻塞？
谷歌新出 QUIC 为什么要基于 UDP？
QUIC 有哪些新特性，解决了什么问题？

WEB 服务器探究

作者介绍了 web 服务器的基本概念，和常见的服务端演替路线。图文并茂的方式很容易理解，干货满满。

网站性能优化实战——从12.67s到1.06s的故事

作者将自己的在线简历进行了性能优化，首屏时间从 12.67s 降低到了 1.06s，这个过程中作者踩了很多坑，翻阅了很多书籍，最终总结出了这篇文章。文章涉及到的知识点比较全面，对性能优化进行了系统的介绍。

现代 Web 开发基础与工程实践

前端大牛@王下邀月熊的著作，对 Web 开发基础与工程实践的相关博客、示例代码与开源项目、整理成的系列书籍等内容进行了总结，信息量异常庞大，包含以下篇章：

导论篇: Web 开发简史与运行机制，数据流驱动的界面，模块化与组件化，工具化与工程化，前后端分离与 GraphQL，大前端与 WebAssembly。
基础篇: 对于 HTML、CSS、DOM 等 Web 开发中涉及的基础知识与理念的总结介绍。
工程实践篇: 构建工具，测试，安全，WebAssembly。
架构优化篇: 组件化，状态管理，性能优化，PWA。
React 篇：近年来前端领域百花齐放，各种技术方案争妍斗艳，各领风骚。本书立足于其中的佼佼者 React，深入浅出的介绍 React、Webpack 、 ES6、Redux 、 MobX 等常见前端开发工具与开发库的用法，帮助初学者能够迅速成为一名合格前端工程师。而本书也不仅局限于工具使用的层面，探寻各种技术方案背后蕴含的设计思想与架构模式，从前端工程化的角度讨论前端开发者在进阶过程中需要掌握的工程实践、模块化与组件化、质量保障、性能优化等知识要点。最终帮助开发者在前端开发中能够因地制宜的指定合理方案，以尽可能快的速度实现可信赖的产品。
Vue 篇：本部分目前正逐步启动，笔者的初衷是希望能够保证本书章节与 React 与前端工程化实践尽可能一致，从而更方便地去介绍不同技术栈下相通的设计理念；目前本书的目录只是拷贝自 React 与前端工程化实践，未来笔者会逐步完善。