网站

浏览器兼容信息查询 lodash官网

无广告的百度开发者搜索-Beta-让技术搜索更简单高效 (baidu.com)

《CSS世界》官方论坛 (cssworld.cn)

web 开发视野microsoft 安全问题论坛

JavaScript项目实践规范

自动转化JSON文本等json相关操作 图形代码注释

书籍

红宝书《javascript高级程序设计》可以借助该书来系统过一遍语法，然后开始看代码实践

犀牛书 加深理解，强烈推荐阅读第15章 浏览器中的JavaScript

HTML5布局之路-刘国利-推荐！关于HTML、CSS、JavaScript的实践，搬一位网友的推荐评语

你不知道的javascript上中下 拓宽思路

《javascript悟道》作者知识框架非同一般，对javascript语言展开广度对比和深度原理介绍，很有感触。目前javascript还在不断发展，新语法层出不穷，乱花渐欲迷人眼，我们应该怎么使用新语法，作者基于自己长期的经验积累给出了自己的解答。

head first设计模式

大前端技术分享会

构建

个人博客推荐

JavaScript基础数据结构 - 掘金 (juejin.cn)

JavaScript语言的对象的属性设计及相关 - 掘金 (juejin.cn)

JavaScript基于原型的继承机制和类 - 掘金 (juejin.cn)

JavaScript函数、作用域、闭包 - 掘金 (juejin.cn)

单线程JavaScript的异步编程 - 掘金 (juejin.cn)

单线程JavaScript的多线程方式：工作者线程 - 掘金 (juejin.cn)

JavaScript迭代模式-生成器 - 掘金 (juejin.cn)

前端DOM基础 - 掘金 (juejin.cn)

JavaScript API扩展了解 - 掘金 (juejin.cn)

前端BOM基础 - 掘金 (juejin.cn)

JavaScript用户事件 - 掘金 (juejin.cn)

JavaScript表单脚本 - 掘金 (juejin.cn)

JavaScript异常处理机制 - 掘金 (juejin.cn)

JavaScript模块化 - 掘金 (juejin.cn)

JavaScript代理proxy - 掘金 (juejin.cn)

JavaScript一些常见语法 - 掘金 (juejin.cn)

JavaScript实现常见排序算法 - 掘金 (juejin.cn)

浏览器的同源策略、跨域限制 - 掘金 (juejin.cn)

安全问题：SQL 注入、XSS、CSFR攻击 - 掘金 (juejin.cn)

浏览器原理：解释运行JavaScript相关 - 掘金 (juejin.cn)

谈谈HTTP协议发展、及HTTPS的底层加密 - 掘金 (juejin.cn)

HTTP强缓存与协商缓存机制、报文信息、离线应用开发 - 掘金 (juejin.cn)

从display理解布局原理 - 掘金 (juejin.cn)

传统布局、网格布局、flex布局解决居中问题 - 掘金 (juejin.cn)

两边固定大小，中间自适应的布局：流体布局、双飞翼与圣杯... - 掘金 (juejin.cn)

数据传输JSON与XML - 掘金 (juejin.cn)

围绕cookie的职能-用户追踪、身份验证、存储展开，包含token、web存储storage、indexedDB - 掘金 (juejin.cn)

vue的模板编译，静态节点原理 - 掘金 (juejin.cn)

vue响应式原理及使用、自己写一个Mobx风格响应式框架demo - 掘金 (juejin.cn)

React基础学习 - 掘金 (juejin.cn)

React函数式组件Hooks开发 - 掘金 (juejin.cn)

Node服务器端JavaScript - 掘金 (juejin.cn)

HTML支持2D、3D绘图 - 掘金 (juejin.cn)

防抖、节流【e.g:无限滚动】 - 掘金 (juejin.cn)

webpack基础了解 - 掘金 (juejin.cn)

SEO初步了解 - 掘金 (juejin.cn)

小白自学两个月找到实习、秋招斩获offers的学习路线

一、语言学习阶段-html、css、JavaScript

这一阶段主要是编程语言的语法功能、计算机原理、多媒体技术等的学习，为后面的工程实践作基础能力的培养，可以理解为底层的硬实力

template模版元素提前在页面中做标记，让浏览器自动将其解析为DOM子树，但先跳过渲染，后面在运行时使用JavaScript实例化，通过template.content拿到一个DocumentFragment类型的引用
innerHTML
document.createElement
document.createFragment

JavaScript

可以结合前端工程应用的特性，了解一下设计模式、语言性质、编程风格（观察者模式、脚本语言、数据类型、函数式编程...），从设计目的、发展过程、使用方法出发，多维度学好一门语言。

• 了解设计模式在框架中的应用，单例模式、工厂模式
• 语言是具有发展性的，学习语法要适当关注它目前的应用性、有没有被更好的语法替代、实现原理是否导致它存在很多缺陷。

typeof检测原始值很有效
不能区别未初始化变量和未定义变量
不能区别null、object、array
typeof NaN是number

二、软件开发能力

复杂的软件必须有清晰合理的架构，否则无法开发和维护，这一阶段重在宏观系统的设计能力的学习。

MVC是最常见的软件架构之一，由此也衍生了 MVP 和 MVVM 三种架构的区别

react、vue 、Angular就是给出了数据响应视图的方案的框架

数据响应视图框架react、vue 、Angular

• 这里只看框架最核心的部分，可以把框架简单地理解为构建用户界面的JavaScript库，对部分底层进行了抽象规范的包装，有DOM Diff算法性能优化、跨平台等众多能力，给开发者减负。
• 最需要关注的改变是提供了声明式编程能力：不需要DOM操作，虚拟DOM

命令式：JQuery 时期，更新 UI 需要先取到对应的 DOM 再更新 UI，这样数据和业务的逻辑就和页面有强耦合

MVVM 前端框架【操作数据就等同于操作 UI】：

提供了双向数据绑定-页面元素变化会触发 View-model 中对应数据改变，反过来 View-model 中数据变化也会引发所绑定的 UI 元素数据更新。

• Angluar 的脏数据检测
• react 虚拟DOM diff算法
• Vue 中的数据劫持

数据管理方案-Mobx/Redux

这一阶段更多是基于工程的数据场景特点，自由地选取一种或者组合多种风格

开发工具了解

• Prettier标准方式格式化代码 使用git管理源代码，可以通过hook以 --write选项调用Prettier,从而让代码在检入之前自动格式化

配置代码编辑器每次保存文件自动运行Prettier

• Jest JavaScript单元测试的一站式解决方案。 测试功能：测试运行器、断言库、模拟数据。Jest 囊括所有测试功能

JavaScript有很多测试工具和库，很多以模块化方式编写，所以可以组合使用。

• 性能测试：Benchmark.js库+isPerf.com网站

优化更应该关注大局：关键路径上的优化以及避免落入类似不同的JavaScript实现细节的陷阱

• ci/cd : Jenkins