1. 前端开发工程师必读书籍有哪些值得推荐
1、HTML/HTML5基础：
1.0、语义化H5标签
1.1、H5引进了一些新的标签，特别注意article、header、footer、aside、nav等，注意HTML的标题结构
1.2、理解浏览器解析HTML的过程，理解DOM的树形结构，及相应API
1.3、理解HTML标签在各个浏览器上的默认样式（代理样式），理解CSS中的重置样式表的概念
1.4、理解Canvas、SVG、video等功能性标签
1.5、理解form、iframe标签，理解文件提交过程
推荐书籍：
A、《HTML5秘籍》
2、高健壮性CSS
2.1、学习基础知识，包括大部分常用属性、选择器的用法，要对大多数标签有个基础概念,在日常使用的基础上，尝试学习浏览器兼容性问题，要知道兼容性的主要问题及解决方法
2.2、深入理解盒子模型，区分块级元素、行内元素，有几个比较重要的属性：display、float、position，一定要弄清楚区分盒子、行内盒子的概念另外可以考虑学一些预编译语言：sass、less，都很简单
2.3、学习常用框架，可以使用bootstrap构建项目
2.4、学习框架的代码组织方式包括：12格栅系统、组件化、组件的风格化等
2.5、学习CSS 3的新功能，特别是动画效果、选择器
2.6、认真学习一些CSS对象化思想，学习编写简洁性、高复用性、高健壮性的CSS
2.7、有空的话，可以看看所谓的扁平化设计，还有简洁性
2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念
学习方法：
1、多看别人的代码，一些设计的不错的网站就是很好的学习素材，比如拉勾网
2、一定要学会使用grunt、gulp压缩CSS
3、display + position + float 可以组合出很复杂的效果，多想想盒子模型
4、尝试在不用float，且position不为absolute的情况下实现等高、等宽等布局
推荐书籍：
1、《图灵程序设计丛书:HTML5与CSS3设计模式》
2、《Web开发技术丛书:深入理解Bootstrap》
3、《高流量网站CSS开发技术》
4、《CSS设计彻底研究》 这个一定要
5、《Web开发技术丛书:深入理解Bootstrap》
6、可以找一些专门讲SASS的书，但是我没找到
7、《CSS权威指南(第3版)》
3、深入学习js
3.1、重新学习JS语法，注意：表达式（特别是函数访问表达式）、语句、类型（包括类型判断)注意，这个时候主要倾向于“原生”JS哦，不要使用框架
3.2、深入理解JS的“一级函数”、对象、类的概念,学会使用函数来构造类、闭包，学会用面向对象的方式组织代码
3.3、深入理解JS的作用域、作用域链、this对象（在各种调用形式中，this的指向）理解函数的各种调用方法（call、apply、bind等）
3.4、理解对象、数组的概念
理解对象的“[]”调用，理解对象是一种“特殊数组”
理解for语句的用法
深入理解JS中原始值、包装对象的概念（重要）
3.5、学习一些常用框架的使用方法，包括：JQUERY、underscore、EXTJS，加分点有：backbone、angularjs、ejs、jade
通过比较多个框架的使用方法，想清楚“JS语言极其灵活”这一事实
总结常见用法，提高学习速度
学习模块化开发（使用require.js、sea.js等）
3.6、适当看一些著名框架的源码，比如jQuery（不建议看angularjs，太复杂了）
重要的是学习框架中代码的组织形式，即设计模式
3.7、了解JS解释、运行过程，理解JS的单线程概念
深入理解JS事件、异步、阻塞概念
3.8、理解浏览器组成部件，理解V8的概念
学习V8的解释-运行过程
在V8基础上，学会如何提高JS性能
学会使用chrome的profile进行内存泄露分析
学习方法：
1、提高对自己的要求，要有代码洁癖
2、适当的时候看看优秀框架的源码，特别是框架的架构模式、设计模式
3、多学学设计模式
4、学习原生JS、DOM、BOM、Ajax
推荐书籍：
1、《O’Reilly精品图书系列:JavaScript权威指南(第6版)》 必看
2、《JavaScript设计模式》
3、《WebKit技术内幕》
4、《JavaScript框架高级编程:应用Prototype YUI Ext JS Dojo MooTools》
5、《用AngularJS开发下一代Web应用》
6、跨终端
6.1、理解混合APP的概念
6.2、理解网页在各类终端上的表现
6.3、理解网页与原生app的区同，重在约束
6.4、理解单页网站，特别要规避页面的内存泄露问题
6.5、入门nodejs，对其有个基础概念，知道它能做什么，缺点是什么
推荐书籍：
1、《单页Web应用:JavaScript从前端到后端 》
2、《Web 2.0界面设计模式》
3、《响应式Web设计:HTML5和CSS3实战》
5、工具
学会使用grunt进行JS、CSS、HTML 压缩，特别是模块化js开发时候的压缩
会用PS进行切图、保存icon
入手sublime、webstorm
学会使用chrome调试面板，特别是：console、network、profile、element
进阶：
4、性能
1.1、理解资源加载的过程
包括：TCP握手连接、HTTP请求报文、HTTP回复报文
1.2、理解资源加载的性能约束，包括：TCP连接限制、TCP慢启动
1.3、理解CSS文件、JS文件压缩，理解不同文件放在页面不同位置后对性能的影响
1.4、理解CDN加速
1.5、学会使用HTTP头控制资源缓存，理解cache-control、expire、max-age、ETag对缓存的影响
1.6、深入理解浏览器的render过程
推荐书籍：
1、《Web性能权威指南》
2、雅虎网站页面性能优化的34条黄金守则
5、HTTP及TCP协议族
2.1、学习http协议，理解http请求-响应模式
2.2、理解http是应用层协议，它是构建在TCP/IP协议上的
2.3、理解http报文（请求-响应报文）
2.4、理解http代理、缓存、网关等概念，指定如何控制缓存
2.5、理解http协议内容，包括：状态码、http头、长连接（http1.1）
2.6、学习http服务器的工作模型，对静态文件、CGI、DHTML的处理流程有个大致概念
推荐书籍：
1、《HTTP权威指南》
2、《TCP/IP详解》
3、《图解TCP/IP(第5版)》
更多前端书籍推荐：
《JavaScript半知半解》 《Web开发实战》
推销自己的前端技术书籍-博客-云栖社区-阿里云
今天主要自我推销两本前端技术书籍！
《JavaScript半知半解》
《Web开发实战》
一、《JavaScript半知半解》
为什么写这本书？
因为之前作者在博客上洋洋洒洒地将之前学习JavaScript的笔记整理了出来，一共17篇，感觉查找和翻阅还是不方便，所以产生了编辑成电子书的念头，一来方便作者个人查找，二来方便后续内容的补充，三来也方便喜欢JavaScript的伙伴们阅读。
书籍阅读地址：《JavaScript半知半解》
大纲
二、《Web开发实战》
书籍阅读地址：《Web开发实战》
为什么写这本书？
网上的插件虽多，但大多数并没有深究到原理，故而产生了写一本前端实例的书籍。主要是为了想深入学习的伙伴们，书上的内容也许不是最优秀的，但会一步步讲解，会告诉你每一步的原理，让你学习后也可以自己造轮子！
大纲
《Web开发实战》集合了大量的前端开发案例，目前主要选择日常开发中会用到的加入本书，分为四部分：CSS实战篇、JavaScript实战篇、Canvas实战篇和移动实战篇。
2. 2020年Web前端自学之路指南
今天小编要跟大家分享的文章是关于2020年Web前端自学之路指南。许多人可能跟着网络上的各种教程就入了前端这行的门，但大多数都只是机械的学习着资料中的内容。俗话说，选择要比努力重要。那么学习开发，首先应该要有一个清晰的学习路线。希望这篇文章，能为大家在选择未来的发展方向时提供一些参考和帮助。下面来和小编一起看一看吧！
1、基础学习
●HTML+CSS基础：
HTML进阶、CSS进阶、div+css布局、排版、html+css整站开发，样式美化和浏览器兼容
●JavaScript基础：
掌握Js基本语法、条件、语句和循环、js内置对象常用方法、ECMAscript、DOM、BOM、定时器和焦点图，并学习增强逻辑的常用算法，实现木马、拖放、放大镜等常见的网络特效。
●JavaScript高级特性：
正则表达式与JSON、正则表达式案例、JavaScript原理与库封装、闭包、函数节流、作用域链、面向对象基础、事件与运动框架封装
●JQuery基础使用：
DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件的基本使用，开发复杂的交互功能和效果，并能熟悉JQuery的插件开发机制。
2、HTML5+CSS3和移动Web开发
●HTML5：
HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket
●CSS3：
CSS3新选择器、伪元素、颜色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作
●图像学：
Canvas、Canvas游戏、数据可视化、Heighcharts.js
●Bootstrap：
响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS
●移动Web开发：
跨终端WEB和主流设备简介、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、商城页面、滚屏
3、HTTP服务和AJAX编程
●WEB服务器基础：
服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍
●PHP基础：
PHP基础语法，使用PHP处理简单的GET/POST请求
●AJAX上篇：
Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用
●AJAX下篇：
JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI用法、使用Ajax实现瀑布流案例
4、面向对象进阶
●面向对象终极篇：
从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器
●面向对象三大特征：
继承性、多态性、封装性、接口
●设计模式：
面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程
5、封装一个属于自己的框架
●框架封装基础：
事件流、冒泡、捕获、事件对象、事件框架、选择框架
●框架封装中级：
运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装
●框架封装高级和补充：
JQuery框架雏形、可扩展性、模块化
6、模块化组件开发
●面向组件编程：
面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序
●面向模块编程：
AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS、CommonJS、ES6Moles
7、工程化&构建、主流的框架
●Web开发工作流：
GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack、打包案例
●MVC/MVVM/MVW框架：
Vue.js、React、Angular.js、Backbone.js、Knockout/Ember、项目驱动
8、Node.js全栈开发
●快速入门：
Node.js发展、生态圈、Io.js、Linux/Windows/OS
X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试;掌握node.js全栈的解决方案和在服务器端JS高效开发
●核心模块和对象：
全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO
●Web开发基础：
HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。
●快速开发框架：
Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。
●数据库：
mongoose/mongoDB、MYSQL
●Node.js开发电子商务实战：
需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块
9、微信系列
●微信公众号
JS-SDK配置、定制菜单、回调、定制分享内容、扫一扫、地理位置、微信音频、图像、语音识别功能、服务器端curl
库、支付、卡券、微店、微信开发模式与公众号分析、统计分析
●微信小程序
小程序项目、uni-app、mpvue
10、移动APP(Web/Native/Hybrid)
●ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API
●Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)
11、其他
●职业素养
沟通表达、团队合作、目标管理、时间管理、心态管理
●就业指导
简历&投递技巧、面试&笔试技巧
12、推荐一些编程学习网站
01、哔哩哔哩
这个网站如果让我评价，可谓是上边的视频都是非常高质量的，你可以去搜索看一下。
02、菜鸟教程
这个网站虽然不是视频网站，一听名字就知道适合菜鸟的，但是基础的知识写的非常详细，很清晰易懂，非常适合刚开始学习编程的小伙伴。
03、W3School
之前刚开始学WEB开发时，经常在该网站，就是结合w3school学习前端，开发时，如果遇到记不清的标签，就去w3school搜索，平常有时间，就来慕课看前端视频。
类似这样的学习网站还有很多，该开始入门的话上面的网站足矣。其他的网站推荐还有腾讯课堂、实验楼、果壳MOOC学院等、知乎、掘金......
以上就是小编今天为大家分享的关于2020年Web前端自学之路指南的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
文章来源：原创前端猿前端猿指北
3. seajs是什么
js的一种框架
追求简单、自然的代码书写和组织方式，具有以下核心特性：
简单友好的模块定义规范：Sea.js 遵循 CMD 规范，可以像 Node.js 一般书写模块代码。
自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。
Sea.js 还提供常用插件，非常有助于开发调试和性能优化，并具有丰富的可扩展接口。
4. Seajs的使用
seajs.config
alias
别名配置，配置之后可在模块中使用require调用 require('jquery');
paths
设置路径，方便跨目录调用。通过灵活的设置path可以在不影响base的情况下指定到某个目录。
vars
变量配置。有些场景下，模块路径在运行时才能确定，这时可以使用 vars变量来配置。
vars 配置的是模块标识中的变量值，在模块标识中用 {key}来表示变量。
map
该配置可对模块路径进行映射修改，可用于路径转换、在线调试等。
preload
使用preload配置项，可以在普通模块加载前，提前加载并初始化好指定模块。
注：preload中的空字符串会被忽略掉。
注：preload中的配置，需要等到 use 时才加载。比如：
注：preload 配置不能放在模块文件里面：
debug
值为true时，加载器不会删除动态插入的 script 标签。插件也可以根据debug配置，来决策 log 等信息的输出。
base
Sea.js 在解析顶级标识时，会相对 base 路径来解析。
charset
获取模块文件时，<script> 或 <link> 标签的charset属性。 默认是utf-8
charset还可以是一个函数：
seajs.use
用来在页面中加载一个或多个模块。seajs.use(id, callback?)
注意：seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行，需要使用 jquery 等类库来保证。比如
注意：use方法第一个参数一定要有，但是可以是null，也可以是一个变量
seajs.cache
通过 seajs.cache，可以查阅当前模块系统中的所有模块信息。
比如，打开 seajs.org，然后在 WebKit Developer Tools 的 Console 面板中输入 seajs.cache，可以看到：
seajs.reslove
类似require.resolve，会利用模块系统的内部机制对传入的字符串参数进行路径解析。
seajs.data
通过 seajs.data，可以查看 seajs 所有配置以及一些内部变量的值，可用于插件开发。当加载遇到问题时，也可用于调试。
5. Seajs优缺点 什么是CMD 和AMD 如何使用
1.简介
Seajs，一个Web模块加载框架，追求简单、自然的代码书写和组织方式，：Sea.js 遵循 CMD 规范，模块化JS代码。依赖的自动加载、配置的简洁清晰，可以让程序员更多地专注编码。
2.优缺点
优点：
1).提高可维护性。
2).模块化编程。
3).动态加载，前端性能优化
缺点：
1).学习文档偏少且混乱，会更改团队使用JS的编写习惯，必须使用模块化编程。
2).不太适合团队目前的情况，多JS文件但少改动，动态加载优势和模块化优势不明显。
3). 需要配套使用SPM工具，JS的打包和管理工具。
2.什么是CMD 和AMD ？
异步模块定义（AMD）是Asynchronous Mole Definition的缩写，是 RequireJS 在推广过程中对模块定义的规范化产出。
通用模块定义（CMD）是Common Mole Definition的缩写，是SeaJS 在推广过程中对模块定义的规范化产出。
RequireJS 和 SeaJS 都是模块化框架的代表，AMD和CMD，是他们各自定义模块化的方式，大同小异，主要是代码风格和API不同。
3.如何使用？
代码如下:<script src="../js/examples-master/sea-moles/seajs/seajs/2.1.1/sea.js"></script>
<script>
//配置js路径
seajs.config({
alias:{
"jquery":"../examples-master/sea-moles/jquery/jquery/1.10.1/jquery.js"
}
});
//加载模块
seajs.use('../js/seajs/init',function($){
$("#test_div").click(function(){alert(1);});
});
</script>
代码如下:
//init.js
define(function(require,exports,mole){
var $ = require('jquery');
return $;
});