不管做什么事情,最重要的就是要学会归类,通过归类能够起到事半功倍的效果,下面是对秋风大佬对前端内容进行的总结,共十类,一起共勉。
工程化
面试
前端新方向
前端基础知识
效率提升
性能优化
React
Vue
前端安全
个人成长
2020前端报告
????2020全球JS现状报告
????2020全球CSS现状报告
工程化
Google DoubleClick 研究表明:如果一个移动端页面加载时长超过 3 秒,用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒,用户就会流失 10%。
为什么要做这个监测用户停留的呢?原因很简单,如果我们要分析这个页面对我们的产品有没有价格,本文很好地对此进行了阐述。
本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。
通过AST自动添加埋点,解放你的双手
为更精准的触达用户痛点,定位转化低点,提升业务赋能,基于数据分析的优化策略势在必行。
通过分析无用依赖、Tree-shaking、DLLPlugin 对项目进行了优化。
更快的发现问题并解决;为产品提需求提供可靠的依据,为业务拓展提供更多的可能性,通过搭建前端监控系统来满足我们的需求。
说了这么多的工程化,到底什么属于工程化呢?本地一一带你来进行实践。
浏览器、ESM规范、模块化、webpack和vite之间联系?
2015年,TC39(一群浏览器厂商代表组成的委员会)发布了ES6规范,ES Modules才被世人所知,也就是ESM,那么从模块化标准诞生的过程中,各种名词你知道关系吗。
bundless的解决方案,秒级开发,本文基于 snowpack 2.x 以及源码层面进行了剖析。
本文以有趣的图文方式,来讲解webpack模块化实现的过程。
对于一个大项目而言,webpack是必须的,那么其中各种插件的繁琐配置,可以看看这篇。
害怕被 node_modules 支配的恐怖吗,赶紧试试吧。
基于1.x对snowpack的使用方式进行了介绍
《模块化系列》彻底理清 AMD,CommonJS,CDM,UMD,ES6
理清楚模块化发展过程中的几个名词以及实现原理。
【漫游Github】无编译/无服务器,实现浏览器的 CommonJS 模块化
从0到1实现一个浏览器能够执行的的模块化系统
面试
从输入URL到现实背后的故事面试必备题
专科也能进大厂,作者的5年卧薪尝胆。
10000小时定律,做任何事只要坚持,总有回报。
15位前端专家(阿里、力扣、政采云)分享面试与招聘视角|1.5w字
第八届前端早早聊前端大会的心得与体验
一道出自学弟的字节原题
你知道CSS规范吗,本文从规范角度解释了面试题。
前端新方向
前端可视化、前端跨端跨栈、微前端等等热议的话题的最新进展资讯
基于 Web Components 跨框架组件开发实践,告别重复轮子
也许跨框架的 Web Components 会成为未来的趋势。
low-code,no-code 是2020年比较火的词语,来看看各个大厂是如何实现
vite 也是 2020 兴起之秀,来看看他的原理吧
low-code?与 20 年前的 Dreamweaver 有什么区别?
前端基础知识
Cook Cookie, 我把 SameSite 给你炖烂了
SameSite 虽然出来一段时间了,但是这次炖烂了给品尝。
惯性滚动,虽然是一个简单的原理,但是增加了无数的体验感。
曾经你以为我是在打游戏,其实我是在学习
上 SSR 也许你会有顾虑,来看看这篇文章是如何分析的
掘金上摸鱼的新发现,无限滚动(infinite-scroll)
摸鱼摸鱼,摸到了无限滚动
几个你不常用,但是非常有用的快捷技巧
从浏览器下载到后端推流,从json到excel,各个方面讲解了文件下载。
原以为前端是弱小的,但是还能通过浏览器直接多线程下载大文件。
从Cookie + Session 、Token 、SSO 单点登录、OAuth 第三方登录分别讲解了前端登录。
听说你还不知道Promise的allSettled()和all()的区别?
利用 JavaScript 和 CSS 来进行媒体查询,是响应式设计与自适应设计结合的方案,俗称融合响应式设计。
ES2017 异步函数的最佳实践(async
/await
)
讲述了原生语法、渐进增强型框架、转化型框架如何选择
「 Map最佳实践」什么时候适合使用 Map 而不是 Object
看阿宝哥如何利用 web 玩转 word
俗话说,人靠衣装,佛靠金装,JS也是会装饰的
这一次真的放大招了,10种方式,涵盖所以场景。
也许你对文件上传很害怕,淦了这一篇,理解从前端到后端。
效率提升
在多人协作的项目中,如果Git的 「提交说明」 精准,在后期协作以及Bug处理时会变得有据可查
性能优化
让我们看一下在 React Hooks 中使用 fetch
和Abort Controller
取消Web请求从而来避免内存泄露!????
本文会介绍使用 虚拟列表
的方式,来同时加载大量数据。
当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?
React
同事写的 React 高阶组件详解
Recoil、MobX、XState、Redux (with hooks)、Context 5种流行的状态管理比较
如果你想读React源码,但又被React庞大的代码量劝退,我相信这个项目适合你起步。
虚拟 DOM (Virtual DOM )这个概念相信大家都不陌生,从 React 到 Vue ,虚拟 DOM 为这两个框架都带来了跨平台的能力(React-Native 和 Weex)
使用 React.lazy 来实现React 原生动态加载
在编写自定义Hook时,很容易产生过于复杂的解决方案,5种帮助简化定制Hook的方法。
在本教程中,我们将在服务器和客户端使用 TypeScript、React、NodeJS、Express 和 MongoDB 从头开始构建一个 Todo 应用程序。
利用 90 行代码来实现 React Hooks
Vue
提升用户开发体验、API设计、特性开关。错误处理、来看看 17w star 的 Vue.js 思路。
原来vue和液晶屏也有爱。
Vue 3 已经发布一段时间了,其组合 API 多少有点 React Hooks 的影子在里面,通过这种方式来学习下组合 API。
Typescript 在 Vue 中的实践(包含2.x、3.x)
Vue3.0 使用 Typescript 如丝般顺滑。
前端安全
即使是lodash这样的库也曾经出现了安全漏洞。
前端能否限制用户截图?这个问题,真的说明一切的前端安全,其实都是纸老虎。
从明暗水印详细谈了前端安全,还附带破解示例。
讲解了HTTPS 底层是如何对数据进行安全保障
HTTPS
协议的安全依赖于它的证书机制,本文讲解如何预防 HTTPS
证书伪造。
个人成长
1.如果觉得这篇文章还不错,来个分享、点赞、在看三连吧,让更多的人也看到~
2.关注公众号执鸢者,领取学习资料,定期为你推送原创深度好文
3.扫描下方添加进群,里面大佬多多,一起向他们学习
1. 图解JavaScript——代码实现(Object.create()、flat()等十四种代码原理实现不香吗?)
2. 图解JavaScript——代码实现【2】(重点是Promise、Async、发布/订阅原理实现)
6. 图解浏览器安全(同源策略、XSS、CSRF、跨域、HTTPS、安全沙箱等串成糖葫芦)
8. (2.6w字)网络知识点灵魂拷问(上)——前端面试必问
9. (2.6w字)网络知识点灵魂拷问(下)——前端面试必问
12. 理论与实践相结合彻底理解CORS
13. 三步法解析Express源码
17. 一文彻底搞懂前端监控
18. 前端的葵花宝典——架构
19. canvas从入门到猪头
21. 2021 年前端宝典【超三百篇】
22. 前端也要懂机器学习(上)
23. 前端也要懂机器学习(下)
24. 学架构助力前端起飞