一个合格(优秀)的前端都应该阅读这些文章

的确,有些标题党了。起因是微信群里,有哥们问我,你是怎么学习前端的呢?能不能共享一下学习方法。一句话也挺触动我的,我真的不算是什么大佬,对于学习前端知识,我也不能说是掌握了什么捷径。当然,我个人的学习方法这篇文章已经在写了,预计这周末会在我个人公众号发布。而在此之前,我想展(gong)示(xiang)一下,我平时浏览各个技术网站,所记录下来的文章。如果你能做到每日消化一篇,或许,你只要一年,就能拿下各个大厂 offer!

不由感慨,好文太多!吾等岂能浪费,还整日怨天尤人。

 

一个合格(优秀)的前端都应该阅读这些文章_第1张图片

 

个人好文收藏

收藏截止时间:2019-07-24 11:50:49

typescript

  • TypeScript,初次见面,请多指教
  • 可能是你需要的react + typescript 50条规范和经验
    • 一些使用规范

CSS

  • css加载会造成阻塞吗
  • 不可思议的纯 CSS 滚动进度条效果
  • CSS实现水平垂直居中的1010种方式(史上最全)
  • rem布局解析
  • 布局的下一次革新
  • 彻底搞懂word-break、word-wrap、white-space
  • 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
  • css加载会造成阻塞吗?
  • 从青铜到王者10个css3伪类使用技巧和运用,了解一哈
  • CSS性能优化的8个技巧
  • 个人总结(css3新特性)
  • CSS设置居中的方案总结-超全
  • Web开发者需要知道的CSS Tricks
  • CSS 常用技巧

前端工程(架构、软实力)

  • 前端缓存最佳实践
  • 写给前端看的架构文章(1):MVC VS Flux
  • 前端数据校验从建模开始
  • 前端也需要了解的 JSONP 安全
  • 网站性能优化实战——从12.67s到1.06s的故事
  • 5 分钟撸一个前端性能监控工具
  • 浏览器页面资源加载过程与优化
  • 现代化懒加载的方式
  • 用 preload 预加载页面资源
  • 干货!各种常见布局实现+知名网站实例分析
  • 前端数据结构与算法
  • 前端工程师为什么要学习编译原理?
  • jsonp的原理与实现
  • 懒加载和预加载
  • 50行代码的MVVM,感受闭包的艺术
  • 不好意思!耽误你的十分钟,让MVVM原理还给你
  • 2018 前端性能优化清单
  • 网页图片加载优化方案
  • 把前端监控做到极致
  • 如何优雅处理前端异常
  • 经典面试题:从 URL 输入到页面展现到底发生什么
  • 前端同构渲染的思考与实践
  • 前端构建秘籍
  • 大型项目前端架构浅谈(8000字原创)
  • 一名【合格】前端工程师的自检清单

React 技术栈

  • React 源码解析
  • 从零搭建React全家桶框架教程
  • 让虚拟DOM和DOM-diff不再成为你的绊脚石
  • 《React源码解析》系列完结!
  • 怎样学习React?当然是自己动手实现一个React啦
  • 从setState promise化的探讨 体会React团队设计思想
  • React 应用设计之道 - curry 化妙用
  • 如何评价React的新功能Time Slice 和Suspense?
  • React的新引擎—React Fiber是什么
  • React源码解析(三):详解事务与更新队列
  • React中的Transaction
  • React 源码剖析系列 - 玩转 React Transition
  • 如何提高你的 React 应用的性能
  • 将 React 应用优化到 60fps
  • 如何写出更好的 React 代码?
  • React中型项目的优化实践
  • React 源码剖析系列 - 生命周期的管理艺术
    • 生命周期主要通过三种状态进行管理:MOUNTING、RECEIVE_PROPS、UNMOUNTING
  • 深入React的生命周期(上):出生阶段(Mount)
    • 仅生成React组件不会触发生命周期的调用
    • componentWillMount和render父组件先调用,与componentDidMount顺序恰巧相反
  • 深入React的生命周期(下):更新(Update)
    • 虽然props的更改会引起componentWillReceiveProps的调用;但componentWillReceiveProps的调用并不意味着props真的发生了变化。
  • 你真的了解React吗(上)如何设计组件以及重要的生命周期
  • React v16.3 版本新生命周期函数浅析及升级方案
  • React ref 的前世今生
  • 谈谈 react 中的 key
  • React Mixin 的前世今生
  • 你真的了解React吗(中)组件间的通信以及React优化
  • 深入框架本源系列 —— Virtual Dom
  • 探索Virtual DOM的前世今生
  • 深入框架本源系列 —— Virtual Dom
  • React 源码剖析系列 - 不可思议的 react diff
    • 关于两个list的比较还是比较深入的,可以重点研究
  • 浅入浅出图解domDIff
  • 深度剖析:如何实现一个 Virtual DOM 算法
    • 代码实现可作为参考
  • React 源码剖析系列 - 解密 setState
    • setState是同步的,事务需要了解
  • setState的秘密
  • setState 之后发生了什么 —— 浅谈 React 中的 Transaction
  • 你真的理解setState吗?
  • React 中的高阶组件及其应用场景
  • React 最佳实践
  • 完全理解React Fiber
  • React Fiber架构
  • React Fiber 架构介绍资料汇总
  • 你不知道的Virtual DOM系列
  • 【译】通过Recompose库掌握React函数组件
  • React-Redux源码分析
  • 源码看React setState漫谈(一)
  • 源码看React setState漫谈(二)
  • 精读《用160行js代码实现一个React》
  • 还在用 Redux,要不要试试 GraphQL 和 Apollo
  • React 同构实践与思考
  • React 实现 Table 的思考
  • React实践 - Component Generator
  • ReactEurope 2016 小记 - 上
  • ReactEurope 2016 小记 - 下
  • Mobx 思想的实现原理,及与 Redux 对比
  • 组件库设计实战 - 复杂组件设计
  • redux middleware 详解
  • 深入理解 react-router 路由系统
  • Immutable 详解及 React 中实践
  • React-Redux源码分析

webpack/babel

  • Webpack 源码(一)—— Tapable 和 事件流
  • 手把手教你撸一个 Webpack Loader
  • 面试官: 你了解过Babel吗?写过Babel插件吗? 答: 没有。卒
  • Write Better JavaScript With Webpack
  • 手把手教你撸一个简易的 webpack
  • 带你走进webpack世界,成为webpack头号玩家
    • webpack 优化方法讲解较多、prod/dev 配置文件、loader/plugin 的简单编写介绍
  • webpack打包之后的文件过大的解决方法
  • webpack详解
  • webpack4-用之初体验,一起敲它十一遍
    • 从零配置,基础配置,c3 前缀,热更新、提取公共代码等
  • 基于Webpack搭建React开发环境
    • 简单借鉴 webpack-merge
  • 入门babel--实现一个es6的class转换器
  • webpack 中那些最易混淆的 5 个知识点
  • 关于webpack4的14个知识点,童叟无欺

Test

  • ESLint里的规则教会我,无规矩 不编程

JavaScript

  • 发布订阅模式,在工作中它的能量超乎你的想象
  • 谁说前端不需要懂-Nginx反向代理与负载均衡
  • CSS世界中那些说起来很冷的知识
  • WebSocket是时候展现你优秀的一面了
  • socket.io让每个人都可以开发属于自己的即时通讯
  • WebSocket 是什么原理?为什么可以实现持久连接
  • JavaScript 如何工作:对引擎、运行时、调用堆栈的概述
    • 了解JavaScript调用栈
  • 理解 JavaScript 中的执行上下文和执行栈
    • 执行上下文、变量环境、词法环境 再看一遍
  • 这一次,彻底弄懂 JavaScript 执行机制
  • JavaScript开发者应懂的33个概念
  • 前端js实现字符串/图片/excel文件下载
  • JavaScript 复杂判断的更优雅写法
  • 性感的Promise,拥抱ta然后扒光ta
  • 近一万字的ES6语法知识点补充
  • 深拷贝的终极探索(90%的人都不知道)
  • 前端路由跳转基本原理
  • 九种跨域方式实现原理
  • 发现 JavaScript 中闭包的强大威力
  • 你可能不熟悉的JS总结
  • JavaScript中高阶函数的魅力
  • 小邵教你玩转JS面向对象
  • AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解
  • ES6、ES7、ES8特性一锅炖
  • 如何在 JavaScript 中更好地使用数组
  • 7分钟理解JS的节流、防抖及使用场景
  • ECMAScript 6 六级考试
  • javascript: Airbnb JavaScript 代码规范
  • Promise实现原理(附源码)
  • 可能是最好的正则表达式的教程笔记了吧...
  • 一些 JavaScript 中的代码小技巧
  • 急速JavaScript全栈教程
  • 理解异步之美 --- promise与async await (三)
  • ES9已经来了 Are you ready?
  • 使用原生 JavaScript构建状态管理系统
  • Promise 必知必会(十道题)
  • JS正则表达式完整教程(略长)
  • 防抖和节流原理分析
  • JavaScript 实用技巧和写法建议
  • 编写自己的代码库(javascript常用实例的实现与封装)
  • import、require、export、module.exports 混合使用详解
  • WebSocket:5分钟从入门到精通
  • JavaScript 运行原理解析
  • 简单了解JavaScript垃圾回收机制
  • 一次记住js的6个正则方法
  • 几道JS代码手写题以及一些代码实现
  • JSBridge的原理
  • 面试官: 你了解前端路由吗?
  • 深入剖析 JavaScriptCore
  • JavaScript闭包的底层运行机制
  • JavaScript 中的多线程 -- Web Worker
  • 解锁多种JavaScript数组去重姿势
  • Promise不会??看这里!!!史上最通俗易懂的Promise!!!
  • 前端将数据转化为弹幕效果的实现方式
  • 浅谈 instanceof 和 typeof 的实现原理
  • 一起学习造轮子(一):从零开始写一个符合Promises/A+规范的promise
  • 前端性能相关:防抖、节流
  • 7种方法实现数组去重
  • 如何实现一个HTTP请求库——axios源码阅读与分析
  • 面试官:既然React/Vue可以用Event Bus进行组件通信,你可以实现下吗?
  • 高阶函数,你怎么那么漂亮呢!
  • 面试官:请你实现一个深克隆
  • 前端模块化:CommonJS,AMD,CMD,ES6
  • 小邵教你玩转promise源码
  • Promise原理讲解 && 实现一个Promise对象
  • 浅谈 HTTP/2 Server Push
  • 开发更好用的 JavaScript 模块
  • JavaScript复杂判断的更优雅写法
  • 我从来不理解JavaScript闭包,直到有人这样向我解释它
  • 重新认识构造函数、原型和原型链
  • 如何在 Web 关闭页面时发送 Ajax 请求
  • 用 Proxy 追踪 JavaScript 类
  • 「中高级前端面试」JavaScript手写代码无敌秘籍
  • JavaScript的环境模型
  • 面试官(6): 写过『通用前端组件』吗?
  • 抱歉,学会 Proxy 真的可以为所欲为
  • 中级前端工程师必须要掌握的 28 个 JavaScript 技巧
  • 前端路由原理解析和实现
  • 正则表达式不要背
  • 前端必知必会--操作URL的黑科技
  • 送你43道JavaScript面试题

Node

  • 一篇文章构建你的 NodeJS 知识体系
  • 200 多行代码实现 Websocket 协议
  • 浏览器与Node的事件循环(Event Loop)有何区别
  • NodeJS与模块系统

Flutter

  • Flutter实战视频-移动电商
  • flutter中event_bus实现原理
  • Flutter 面试知识点集锦

Http

  • 设计一个无懈可击的浏览器缓存方案:关于思路,细节,ServiceWorker,以及HTTP/2
  • 你应该知道的前端——缓存
  • HTTP 缓存机制一二三
  • 都9102年了,还问GET和POST的区别
  • 通过HTTP的HEADER完成各种骚操作
  • 九个问题从入门到熟悉HTTPS
  • 谈谈 HTTPS
  • 你敢在post和get上刁难我,就别怪我装逼了
  • 图解TCP三次握手与四次分手
  • 面试带你飞:这是一份全面的 计算机网络基础 总结攻略
  • 小哥哥,小姐姐,我有一份tcp、http面试指南你要吗?
  • 看图学HTTPS
  • 分分钟让你理解HTTPS
  • 小哥哥,小姐姐,我有一份tcp、http面试指南你要吗?
  • HTTP2基本概念学习笔记
  • 都2019年了,还问GET和POST的区别
  • 前端基础篇之HTTP协议
  • 关于三次握手与四次挥手面试官想考我们什么
  • 寒冬求职之你必须要懂的Web安全
  • 前端基础篇之HTTP协议- [ ] 你真的了解 Cookie 和 Session 吗
  • 这几个概念你可能还是没搞清require、import和export

浏览器

  • 前端必须要懂的浏览器缓存机制
  • 浏览器的回流与重绘 (Reflow & Repaint)
  • 深入浅出浏览器渲染原理
  • 抛弃console.log(),拥抱浏览器Debugger

面试

  • Javascript 面试中经常被问到的三个问题!
  • 破解前端面试(80% 应聘者不及格系列):从 DOM 说起
  • 面试的信心来源于过硬的基础
  • BAT前端经典面试问题:史上最最最详细的手写Promise教程
  • 破解前端面试(80% 应聘者不及格系列):从闭包说起
  • 前端面试题整理
  • 中高级前端大厂面试秘籍,为你保驾护航金三银四,直通大厂(上)
  • 2018大厂高级前端面试题汇总
  • 2018前端面试总结,看完弄懂,工资少说加3K
  • 2018春招前端面试: 闯关记(精排精校)
  • 前端面试考点多?看这些文章就够了
  • 80% 应聘者都不及格的 JS 面试题
  • 一次弄懂Event Loop(彻底解决此类面试问题)
  • 中高级前端大厂面试秘籍,为你保驾护航金三银四,直通大厂(上)
  • 【半月刊】前端高频面试题及答案汇总
  • 一道被前端忽略的基础题,不信看你会几题
  • 腾讯校招前端三面,虐完继续撸
  • 2018阿里巴巴前端面试总结
  • 几道高级前端面试题解析
  • 26个精选的JavaScript面试问题
  • 前端高频面试题及答案汇总

数据结构与算法

  • 前端笔试&面试爬坑系列---算法
  • 漫画:什么是红黑树

其他

  • 四月前端知识集锦
  • web 项目如何进行 git 多人协作开发
  • Chrome插件编写
  • 用 yeoman 打造自己的项目脚手架
  • Weex 入坑指南:手把手编译 Playground
  • 什么是 PWA
  • 打造属于自己的cnpm/npm安装,生成自定义项目架构
  • 仿 vue-cli 搭建属于自己的脚手架
  • 教你从零开始搭建一款前端脚手架工具
  • 基于node.js的脚手架工具开发经历
  • 从零开始搭建脚手架
  • react组件从搭建脚手架到在npm发布的步骤实现

结束语

以上包括我已读还未移至已读的记录中(主要是由于感觉还需再度)。所有文章,我都会好好学习,没办法,毕竟比较菜。还有太多需要学习。

 

转载于:https://www.cnblogs.com/zhangycun/p/11256167.html

你可能感兴趣的:(一个合格(优秀)的前端都应该阅读这些文章)