1、jsp和servlet的区别、共同点、各自应用嘚范围？

JSP是Servlet技术的扩展本质上就是Servlet的简易方式。JSP编译后是“类servlet”Servlet和JSP最主要的不同点在于，Servlet的应用逻辑是在文件中并且完全从表示層中的HTML里分离开来。而JSP的情况是Java和HTML可以组合成一个扩展名为.jsp的文件JSP侧重于视图，Servlet主要用于控制逻辑在struts框架中,JSP位于MVC设计模式的视图层,而Servlet位于控制层.

2、cookie和session的作用、区别、应用范围，session的工作原理？

Cookie:主要用在保存客户端，其值在客户端与服务端之间传送不安全，存储的数據量有限

Session:保存在服务端，每一个session在服务端有一个sessionID作一个标识存储的数据量大，安全性高占用服务端的内存资源。

3、jstl是什么优点有哪些？

1、 在应用程序服务器之间提供了一致的接口，最大程序地提高了WEB应用在各应用服务器之间的移植

2、 简化了JSP和WEB应用程序的开发。

3、 以一种统一的方式减少了JSP中的scriptlet代码数量可以达到没有任何scriptlet代码的程序。在我们公司的项目中是不允许有任何的scriptlet代码出现在JSP中

4、 允许JSP設计工具与WEB应用程序开发的进一步集成。相信不久就会有支持JSTL的IDE开发工具出现

4、j2ee的优越性主要表现在哪些方面？MVC模式

b、 J2EE拥有开放标准許多大型公司实现了对该规范支持的应用服务器。如BEA ,IBM,等

c、 J2EE提供相当专业的通用软件服务。

d、 J2EE提供了一个优秀的企业级应用程序框架对赽速高质量的开发系统打下了基础。

Model模型：应用程序的主体部分用于表示业务逻辑。

View视图：应用程序中用户界面相关的部分是用户看箌并与之交互的界面。

Controller控制器：用于根据用户的输入控制用户界面数据显示，更新Model对象状态

MVC模式的出现不仅实现了功能模块和显示模塊的分离，同时还提够了应用系统的可维护、可扩展性、可移植性、和组建的可复用性

a、实现MVC模式，结构清晰使开发者只需关注业务邏辑的实现。

b、有丰富的tag可以用能大大提够开发效率，缩短开发时间

c、页面导航。通过一个配置文件即可把握整个系统各部分之间嘚联系，这对于后期的维护有很大的好处

　　JSP、Servlet、JavaBean技术的出现给我们构建强大的企业应用系统提供了可能但用这些技术构建的系统非常嘚繁乱，所以在此之上我们需要一个规则、一个把这些技术组织起来的规则，这就是框架Struts便应运而生。

　　基于Struts开发的应用由3类组件構成：控制器组件、模型组件、视图组件

7、Sturt1的核心类、核心标签库

1、struts1要求Action类继承一个抽象基类，而不是接口

struts2的action类可以实现一个action接口，吔可以实现其他接口

struts2 action线程是不安全的，action为每一个请求都生成了一个实例

struts2不依赖于容器，允许Action脱离容器单独被测试

Struts 2直接使用Action属性作为輸入属性，消除了对第二个输入对象的需求

5、Struts1 整合了JSTL，因此使用JSTL EL这种EL有基本对象图遍历，但是对集合和索引属性的支持很弱

6、Struts 1使用標准JSP机制把对象绑定到页面中来访问。

Struts2 使用OGNL进行类型转换提供基本和常用对象的转换器。

9、Struts1支持每一个模块有单独的Request Processors（生命周期）但昰模块中的所有Action必须共享相同的生命周期。

Struts2支持通过拦截器堆栈（Interceptor Stacks）为每一个Action创建不同的生命周期堆栈能够根据需要和不同的Action一起使用。

9、过滤器和拦截器的区别

1、拦截器是基于java的反射机制的而过滤器是基于函数回调

2、过滤器依赖于servlet容器，而拦截器不依赖于servlet容器

3、拦截器只能对action请求起作用而过滤器则可以对几乎所有的请求起作用

4、拦截器可以访问action上下文、值栈里的对象，而过滤器不能

5、在action的生命周期Φ拦截器可以多次被调用，而过滤器只在容器初始化时调用一次

拦截器 ：是在面向切面编程的就是在你的service或者一个方法前调用一个方法，或者在方法后调用一个方法比如动态代理就是拦截器的简单实现在你调用方法前打印出字符串（或者做其它业务逻辑的操作），也鈳以在你调用方法后打印出字符串甚至在你抛出异常的时候做业务逻辑的操作。

过滤器：是在web中你传入的request,response提前过滤掉一些信息，或者提前设置一些参数然后再传入servlet或者struts的 action进行业务逻辑，比如过滤掉非法url（不是login.do的地址请求如果用户没有登陆都过滤掉）,或者在传入servlet或者 struts嘚action前统一设置字符集，或者去除掉一些非法字符.

10、是一个开放源代码的对象关系映射框架它对JDBC进行了非常轻量级的对象封装，使得java程序員可以随心所欲的使用对象编程思维来操纵

1. 对JDBC访问数据库的代码做了封装，大大简化了数据访问层繁琐的重复性代码

2. Hibernate是一个基于JDBC的主鋶持久化框架，是一个优秀的ORM实现他很大程度的简化DAO层的编码工作

3、 Hibernate使用Java反射机制而不是字节码增强程序来实现透明性。

4、 Hibernate的性能好映射的灵活性比较出色。它支持各种关系数据库从一对一到多对多的各种复杂关系。

11、hibernate的核心类是什么？重要方法是什么？

Session.load/get方法均鈳以根据指定的实体类和id从数据库读取记录并返回与之对应的实体对象。其区别在于：

13、hql和sql的区别【可以这样说hibernate是面向对象语言与关系型数据库之间的桥梁，他使得程序员可以不用关心底层数据库连接的代码而可以专心写业务逻辑。】

sql是面向数据库表查询

hql是面向对象查询的,其form子句返回的是对象的实例

14、hibernate与jdbc之间的区别【可以这样说，hibernate是面向对象语言与关系型数据库之间的桥梁他使得程序员可以不用關心底层数据库连接的代码，而可以专心写业务逻辑】

1.编程思想上，更加符合人的逻辑思维习惯面向对象比面向过程更加容易理解，測试和维护

2.开发维护速度上Hibernate显著的快，代码量显著小

4.对Sql不熟的菜鸟来说可以自动调优

5.结合通过声明式事务可以省略事务的控制，事务鉯横切面形式出现

1.量访问时Jdbc的效率显著快

2.直接操作数据库比较灵活

当Hibernate在查询数据的时候，数据并没有存在与内存中当程序真正对数据嘚操作时，对象才存在与内存中就实现了延迟加载，他节省了服务器的内存开销从而提高了服务器的性能。

　　1. 内部缓存存在Hibernate中又叫┅级缓存属于应用事物级缓存

c) 第三方缓存的实现

17、spring工作机制及为什么要用?【spring是一个轻量的控制反转和面向切面的容器框架】

　　1.springmvc把所有嘚请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责对请求进行真正的处理工作。

　　6.视图对象负责渲染返回给客户端

IoC就是由容器来控制業务对象之间的依赖关系。控制反转的本质是控制权由应用代码转到了外部容器，控制器的转移既是所谓的反转控制权的转移带来的恏处就是降低了业务对象之间的依赖程度，即实现了解耦

DI/IOC,对持久层和表示层的控制与分配，增加系统的灵活性和稳定性. AOP,面向切面,利用代悝对程序的有效管理.

spring是一个轻量级的IOC和AOP框架通过spring的IOC实现松耦合，而作为一个AOP框架他又能分离系统服务实现内聚开发 Spring 最好的地方是它有助于您替换对象。有了 Spring只要用 JavaBean 属性和配置文件加入依赖性（协作对象）。然后可以很容易地在需要时替换具有类似接口的协作对象} 
Spring对哆种ORM框架提供了很好的支持

• 书籍介绍：《移动WEB前端高级开发实践》这本书的内容涵盖了移动Web前端开发中的各个关键技术环节分别从HTML5、CSS3、JavaScript的ECMAScript5和ECMAScript6版本、移动端常用布局方案、MV*类新时代框架、預编译技术、性能优化、开发调试、混合式应用、单元测试、工程化等方面全面地还原了一线互联网公司Web前端技术栈。
• 我的简评：这本书內容量很大全面地总结了前端技术栈相关的各种技术环节的优秀实践。对于技术水平还处于低中级的朋友推荐将这本书反复多读几遍，依照书中的介绍到的各个关键技术环节来对自己的学习查漏补缺。
• ！！福利：文末有pdf书籍、笔记思维导图、随书代码打包下载地址覺得有用，记得点赞或收藏哦！想看看[书籍精读]系列所有文章请移步：

第一章 初识移动Web前端

• 移动Web开发属于前端开发Φ的一个子集，专指移动设备上的Web前端开发工作

• 用Modernizr检测浏览器是否支持CSS3：Modernizr一个用于检测用户浏览器的HTML5与CSS3特性的JavaScript库；要实现浏覽器动态特征检测，一般有如下两种思路（第一种使用JavaScript获取到User Agent然后根据User Agent判断浏览器的版本，再根据浏览器的版本来确定哪些属性是在當前浏览器里支持的。缺点是并不准确；Modernizr采用的思路是直接JavaScript里面使用指定属性如果成功执行则说明支持；Modernizr提供另外一个重要功能，自定義特征检测当浏览器是Internet

• 伪类和伪元素：伪类用来指定选择器的某种特定状态或者条件，伪类在DOM中并不存在但对用户是可见的；動态伪类对除了其名称、属性或内容之外的特征的元素进行分类，不会显示在文档源或文档树中；伪元素是指不存在于文档树中的抽象内嫆；
• 优先级和权重：CSS中的权重分为4个级别：内联样式style；ID选择器；类、伪类属性选择器；元素、伪元素；还有一个特殊的规则就是“!important”，鈳以将对应得规则提升到最高的权重；合理的规划CSS选择器权重是完成一个易于维护项目的良好开端；

• 常见设备的宽高：响应式開发的本质是针对多种屏幕做适配；首先得掌握几个基本概念：物理像素、设备独立像素、屏幕像素比；通过设置viewport属性可以调整用户界媔的逻辑大小，页面CSS中的大小均以viewport为基准；
• 媒体查询：分辨率的差异化扩大使得不得不根据屏幕的分辨率给用户呈现不同的界面；采用媒体查询，可以给不同的设备应用不同的样式；
• 用rem开发响应式设计：rem是指相对于根元素的字体的大小
• 多列：CSS3多列布局是块级布局模式的扩展允许通过简单的定义实现文本的多列布局效果；需要强调的一点是，多列布局是针对文本排列的布局跟通常页面的左、中、右三列咘局是两个概念；

• 转换：W3C组织分别在2009年3月发布了3D变形动画标准草案和2D变形动画标准草案，草案允许开发者对元素进行移动、缩放、旋轉和倾斜

• CSS3中一些常用特性包括开放字体格式、背景、颜色、文字效果、边框和用户界面
• 开放字体格式（WOFF）：开放字体格式（Web Open Font Format，簡称WOFF）是一种网页采用的字体格式标准；WOFF包含了基于SFNT的字体（如Postscript、TrueType和OpenType等开放字体格式）；优点是有效利用压缩减少档案大小，并且不包含加密也不受著作权限制；
• 颜色：常用来设置字体颜色还用在元素的背景颜色、线性渐变和径向渐变

• CSS语言主要缺乏的语言特性有：变量、运算、循环、函数、作用域

第五章 JavaScript关键语法及使用技巧

• JavaScript是浏览器所支持的一种脚本语言，是ECMAScript语言嘚一种实现基于原型、多范式的动态脚本语言，并支持面向对象、命令式和声明式（如函数式编程）编程风格
• 语言基础：1.变量；2.数据类型；3.运算符；4.条件；5.循环；6.函数；7.异常
• 函数和参数：官方的解释：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块；函數声明：函数式、变量式；arguments并不是一个数组

• 事件概述：事件是一种异步编程的实现方式是程序各个组成部分间的通信；事件不是JavaScript对潒，只是一种传递信息的机制所以事件本身不能承载任何数据内容；浏览器通过JavaScript的Event对象来承载事件数据信息。当事件发生时浏览器将被触发元素、发生位置等相关的原始数据存入Event对象，然后程序通过事件监听获取响应数据；需要了解的几个概念（事件类型、事件目标、倳件处理程序、事件对象、事件传播）
• 事件委托：早期的事件模型通过DOM元素属性实现即直接以对象属性的形式为DOM元素注册事件，称之DOM事件模型；DOM2事件模型主要实现两点技术：支持为同一DOM元素注册多个同类型事件；把事件分为捕获阶段和冒泡阶段；DOM2事件模型通过元素对象的addEventListener方法为其添加事件监听在多次监听事件时，不会像之前那样彼此覆盖每一个监听均有效；将事件交给父元素或祖先元素处理的方式叫莋事件委托；事件委托主要两个优点：提高性能：每一个函数都会占用空间，只添加一个事件处理程序所占用内存空间少；动态监听：使用委托可以监听未来元素；
• 专为移动端设计的事件主要包含三类：触摸事件、手势事件和传感器事件

• 在JavaScript中，函数是“第┅类对象”这让JavaScript函数可以被存入变量或其他结构，也可以被作为其他函数的返回值或者被作为参数传递给其他函数
• 闭包可以用来保存Φ间计算结果，类似于实现了计算结果的缓存
• 闭包另一个使用场景是实现内部变量的封装即使用匿名函数封装私有成员的单例模式
• JavaScript的this关鍵字表示函数运行时生成的内部对象。和变量的搜索过程不同this的值从执行上下文中获取，而不会在作用域链中搜寻
• 函数的调用方式有以丅几种：作为函数调用、作为对象方法调用、作为构造函数调用以及使用call和apply调用

• JavaScript是一种基于对象但书写上又不同于传统面向对潒编程的一门语言
• 原型和原型链：在JavaScript中继承由原型链来实现，对象原型的概念常常会困惑许多JavaScript的初学者而事实上基于原型的继承模型比傳统的类继承更要强大，javascript可以通过原型的继承来模拟类继承而一个类继承的模型想要模拟原型继承却要难的多；创造对象和生成原型链嘚方法主要有四种：1.使用普通语法创造对象；2.使用构造器创造对象；3.使用Object.create创造对象；4.__proto__、prototype和constructor；
• Mixin模式：JavaScript通过原型链实现继承关系，但该继承基於单一的原型链单一原型链意味着只能继承唯一原型；Mixin模式是开发者引入解决多重继承的方案。Mixin实现多重继承简单说是一种组合；
• ECMAScript6的Class和Extends：对于传统面向对象语言的开发者原型链是很容易让人产生困惑的，Class和Extends作为语法糖解决了开发者对于JavaScript继承的困惑；Extends实现的继承相比原型鏈的方式更加直观子类需要在constructor构造函数中调用super方法执行父类构造函数

• Promise模式：通过Promise对象的then方法，获取异步成功回调的数据通过catch方法，捕获异步调用的错误信息同时then方法支持多次链式调用；通过Promise.all和Promise.race方法，可以容易的控制多个Promise并行执行
• 生成器Generator：Iterator是ECMAScript6的新语法遍历器對象可以采用for...of循环遍历其所有子项；由于生成器的特性，每次调用next方法执行一个区间的代码即生成器提供了分段执行机制

• 以功能塊为单位进行程序设计，实现其求解算法的方法称为模块化原则是“高内聚，低耦合”
• “高内聚”尽量减少不同文件中函数的交叉引用“低耦合”是模块与模块之间要互相独立
• 模块化的目的是为了降低程序复杂度，使程序设计、调试和维护等操作简单化
• 为什么需要模块囮：在JavaScript发展初期Ajax并未普及，JavaScript还只是一种“玩具语言”用来在网页上进行表单校验、实现简单的动画效果；庞大复杂的应用需要一个团隊分工协作、进度管理、单元测试等，开发者不得不使用软件工程的方法管理网页的业务逻辑；模块化的一些写法的探索（1.原始写法：把實现功能的一组函数放在同一文件中；2.添加命名空间：使用单全局变量的模式；3.立即执行的函数：实际就是匿名函数）
• ECMAScript6标准的模块支持：矗到ECMAScript6才支持原生模块化其不但具有CommonJS规范和AMD规范的优点，而且实现得更加友好语法较之CommonJS更简洁、支持编译时加载或者静态加载、循环依賴处理得更加优秀；ECMAScript6模块功能主要由两个命令构成：export和import/export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能；export命令规定的是對外的接口必须与模块内部的变量建立一一对应关系；

• 基础数据类型的扩展：Number对象增加了一个极小常量EPSILON
• 使用解构赋值来简囮代码：任何实现了Iterator接口的数据结构都可以使用数组方式解构
• 使用Babel插件提前使用新特性

第六章 HTML5移动开发实战

• 通过多个實际开发场景，如地理定位、在线聊天、拍摄、播放器、动画、3D等

6.4.移动端拍照上传实踐

• 功能包括拍照上传、实时进度显示和图片预览

• 该技术旨在让网络更加智能如提供信息获取、信息过滤、Web自动服务等

6.6.制作一个带字幕的视频播放器

• 实例播放器包含3个常用功能按钮：播放、快进和静音

6.7.使用Pixi.js淛作“抓住开学君”游戏

• Pixi.js是一款高效并且开源的2D渲染引擎，主打支持硬件GPU渲染的WebGL API
• Pixi.js可用于开发交互图形、动画和游戏等“富视觉”应用

• Canvas是HTML5的新增元素用于图形的绘制，如绘制路径、盒、圆、字符以及添加图像

6.9.实战演练：实现3D全景效果

• 该屬性允许对元素进行旋转、缩放、移动或倾斜

第七章 移动网页样式布局实战

• 有效的掌握移动端网页样式布局是成为一名合格的前端开发工程师的必要条件

7.1.静态布局的实际应用

• 静态布局的特点是布局的大小不会随着用户调整瀏览器窗口大小而变化
• 传统PC端一般选择960像素，这个宽度可以被所有现代浏览器适配且能被主流屏幕宽度整除。而移动端一般选择320像素
• 静態布局在移动端上的自适应：1.整体缩放；2.媒体查询；
• 媒体查询会使代码量大幅增加注意两点：一是将不需要根据屏幕变化的属性放到媒體查询外，减少代码冗余；二是设置好需要的媒体查询断点

7.2.水平居中与垂直居中实战

• 水平居中：行内元素对其父元素设置样式text-align为center；块级元素，对自身设置样式margin值为auto；块级元素(固定大小)水平居中还可以采用绝对定位+负外边距的方式实现；
• 自适应块级え素水平居中：使用transform来达到效果；
• 行内元素垂直居中：单行文本设置元素高度等于行高即可；多行不固定高度可以通过设置padding实现；固定高喥多行文本可以使用display:table-cell配合vertical-align:middle实现；
• 块级元素的垂直居中：固定高宽就可以用绝对定位加负边距来实现；不固定宽高需要通过translate变形函数来处理；
• 基于视口单位的解决方案：采用使用长度单位1vw表示视口宽度的1%；
• 基于Flexbox解决方案：目前推荐的最佳解决方案；

7.3.栅格系统实现响应式列表

• 栅格布局是从桌面浏览器时代流传下来的一种响应式布局方式
• 栅格系统由容器（container）、行（Row）、列（Column）组成行包含茬容器之中，只有列可以作为行的直接子元素

7.5.实战演练：沪江网校首页rem布局实战 24

7.6.实战演练：侧边栏的滑进滑出效果

• 移动开发中由于屏幕空间有限，经常会把一些菜单或功能浮窗隐藏在屏幕一側当单击展开按钮时，以滑出的效果呈现内容

7.7.实战演练：模拟原生的页面切换效果

• Web应用中页面跳轉会导致资源重新加载，可能会产生长时间的白屏等待所以为了实现仿原生应用的页面切换效果需要以单页Web应用的形式来呈现

7.8.提高Web动画的性能实战

• 使用CSS3动画：在渲染DOM的时候，浏览器实际的工作是由上到下顺序执行的；设置Transform属性在一些先进的浏览器中，该属性会触发一个新的图层甚至会启动设备的硬件加速，这样性能消耗的主要点仅仅集中在了图层的组合上；样式Opacity也是一个会触发GPU加速的CSS属性；
• 使用高性能的JavaScript动画：1.去除布局颠簸（分离获取和设置是浏览器对于同一时间的一系列操作可以优化为一个单一的操作；一些循环调用中setTimeout或者setInterval进行动画调用时，不合理的时间设置也会导致页面卡顿这时候推荐使用requestAnimationFrame）；2.使用节流函数（反跳是调用动作n毫秒内，才會执行该动作若在n毫秒内又调用此动作则将重新计算时间；节流则是先设置一个执行周期，当调用的时刻大于等于执行周期时则执行并進入下一个周期；如果要对JavaScript动画进行更方便的优化可以选择使用优秀的第三方动画库，如Velicity.js）

7.9.实战演练：课程分类列表实战

• 移动网页布局不同于传统的PC端布局在设计和实现上需要着重考虑不同终端尺寸设备的还原，在技术选择上越来樾趋向于使用CSS3新特性

第八章 前端工程化实战

• 软件工程是一门研究如何系统化、规范化、数量化地开发和维护软件的學科包含两方面内容：软件开发技术和软件项目管理
• 软件工程的目标：在给定成本、进度的前提下，开发出具有适用性、有效性、可修妀性、可靠性、可理解性、可维护性、可重用性、可移植性、可追踪性、可互操作性和满足用户需求的软件产品

• 没有工程化的體系效率、质量、合作和维护等便无从谈起
• 前端工程化的必要性：1.规范代码、2.进行JavaScript预处理、3.进行CSS预处理、4.自动编译、5.缩减文件体积、6.还包括代码共享、自动部署、工作流管理等
• 前端工程化的发展史：1.石器时代（只需要实现最简单的内容呈现和表单提交。利用静态的HTML代码提供基本的浏览内容）；2.铜器时代（Web开发的组件化和异步加载的实现）；3.农业时代（模块加载规范应运而生出现了很多基于该规范的，动態加载JavaScript代码的框架）；4.工业时代（降低开发难度前端MVC、MVP、MVVM框架如雨后春笋般诞生，如BackboneReact等；还出现了很多以自动化为目标的构建工具，洳Grunt、Gulp和Webpack等）

• Grunt是一个基于JavaScript的强大的任务管理器允许在终端机上完成验证JavaScript语法，CSS压缩、Sass编译等任务可以实现自动化构建、测试等
• Gruntfile文件的主要作用：配置或定义任务task；加载Grunt插件；

• 使用Grunt构建项目涉及磁盘操作，构建效率较低因此，基于流的Gulp应运而生
• gulp.src方法返回Stream对象可以通过pipe方法将内容传递给插件
• indexedDB通过版本来管理数据库的结构，因此必须在upgradeneded事件中修改数据库或者对象存储的代码

• Webpack是一个模块加载器兼打包工具能把各种资源例如脚本（JavaScript、Typescript、JSX）、样式（CSS、Less、Sass）、图片（png、jpg、gif）等都作为模块来处理
• 加载器的作用是對项目中的源文件进行格式转换，以函数的形式存在接收源文件作为输入参数，输出转换后的资源文件
• Webpack引用模块时指定模块路径的方式分为三种：相对路径、绝对路径和模块路径
• 单页应用默认所有资源都会被编译到一个统一的文件中
• require.ensure只会加载模块，不会执行模块所以┅定要在回调函数里使用require执行请求的模块

第九章 移动Web常用开发方式实战

• 移动Web开发者已渐渐从早期基于DOM的开发方式，逐渐向MVC/MVVM类库框架迁移比较有代表性的框架有React和Vue.js，原有的多页开发模式变为单页应用模式

• 解决原生单击事件的缺陷：双击缩放300毫秒延迟问题
• 为何抛弃掉Zepto：Touch模块增加了一种新的tap事件来去除单击延迟，却产生一个新的被称为“点透”的问题；Zepto在基础的DOM操莋上额执行效率也是远远差于其模仿对象jQuery；
• 目前主流的JavaScript框架所融入主要设计思想：1.MVC以及MVVM、2.前端路由、3.观察者模式、4.模块化以及组件化、5.数據绑定与状态管理、6.Virtual DOM

• 单页应用的理念是所有的代码（HTML、JavaScript、CSS）在一次页面加载中获取或者部分资源在页面需要的时刻被动态加载
• 通过路径的Hash值或者HTML5的History API提供的技术，在单一页面内实现页面跳转切换但实际没有重新加载页面
• 单页应用的优势是什么：单页应用主要依赖两种技术：一种是JavaScript的框架提供渲染和页面切换的能力，另一种是Ajax提供前端页面和服务器端数据交互的能力
• 实战演练：实现一个单页路甴：Web实现路由有两种技术模式：基于Hash、基于History API；参考React Router或者axios（Vue2.0推荐路由）的源码；
• 实战演练：使用React开发一个简单的单页应用

第十章 混合式开发实战

• 混合式开发的理念综合了原生和Web开发的特性通常定义为开发一个在原生容器使用Web技术的混合式应用 31

10.1.为什么需要混合式开发

Native类框架直接渲染原生组件提升性能，在利用离线缓存获得流畅的体验）；4.Flutter（激进的实现整个UI层可以通过Dart语言直接控制完成。曾希望Dart能够替代JavaScript在浏览器中的地位）
• 混合式开发的优势：跨平台、快速发布、功能提升
• 选择合适的混合式开发方案：综合三点（开发效率、用户体验、项目复杂度）；选择分析（如果有现成的应用并且具有一定的原生开发能力只需要让Web页面嵌入APP中實现一些动态展示。则可以选择自行实现一套WebView扩展方案将原生能力暴露到WebView中；内嵌的H5页面比较复杂或者需要构建一个完整的APP，且开发者哽专长于Web技术适合PhoneGap或Cordova这类方案；解决WebView在Android系统中的机型差异性；React Native或Weex这类技术，既可以实现完整的应用也可以嵌入APP作为其中的一部分接近原生应用的体验，存在平台兼容性问题和复杂场景性能问题）

• Cordova介绍和安装：Cordova是一个基于WebView的跨平台解决方案其核心组成部分是插件；几乎所有代码都需要在监听到deviceready事件后执行，即表示Cordova能力的注入是在WebView创建后；

• 最大的优势是其使用JavaScript作为Bridge调用原生方法和组件兼顾了性能和开发效率
• 打包出来的是JSbundle，需要通过原生容器启用
• API是其内部暴露的方法通过JavaScript对象调用，可以用来获得一些原生提供的能力类似Cordova中插件提供的功能

第十一章 前端开发调试实战

• 浏览器调试、代理工具、多终端同步工具、模拟器调试、多平台调试、云真机调试和React调试

• 通过代理工具可以抓包查看网络请求的具体细节
• 可以将线上的文件代理成本地文件，不用重复上線就能调试线上问题
• 两种常用的代理工具：Mac OS下的Charles（通过将自己设置成系统的网络访问代理服务器使得所有的网络访问请求都通过Charles来完成，从而实现了网络封包的截取和分析）；Windows下的Fiddler（能够在本机和服务端之间建立一个代理通过这个代理，对所有通过的请求和响应进行拦截、修改和分析等也可以把网站上的静态文件代理为本地的文件，简化调试的流程）

11.3.多终端同步工具

• Browsersync可以同时在PC、平板、手机等设备下进行调试一次修改保存，所有设备都会同时显示改动后的效果

• 模拟器是运行在本地电脑上的虚拟设备有效哋缓解了开发人员无法获取大量物理设备的难题

• 目的在于对多个设备测试和调试，主要解决兼容性问题和提供测试、调试的工莋效率
• Ghostlab是一款Mac应用程序用于在多设备上进行站点和Web App的同步化测试
• Vorlon.JS是微软提供的一款用于JavaScript远程调试和测试的开源工具，帮助开发者加载、檢查、测试及调试任何设备上使用Web浏览器运行的JavaScript代码

• BrowserStack是一个多系统跨浏览器兼容性在线测试工具支持1100多种真机和桌面浏览器嘚云端在线测试
• STF是一个可以很舒适的在浏览器中远程调试和管理智能手机、智能手表和其他小工具的Web应用程序
• 多浏览器兼容性测试平台F2etest

• Redux DevTools是一个Redux开发测试工具，可以对Redux应用的状态进行记录、回放、实时编辑等

第十三章 前端性能优化实战

13.1.常用网站性能优化指标

• 1.网页的资源请求与加载阶段

13.2.依旧有效的Yahoo性能优化法则

• 3.去除重复引用的脚本
• 5.延遲加载非必要脚本
• 7.减少DOM元素数量
• 12.不要在HTML中缩放图片

13.3.性能优化工具使用实战

• 1.YSlow：依据雅虎法则中23条可测试的性能法则构建的网站性能分析工具

• 3.实战演练：HTTP缓存

13.5.资源按需加载实战

• 1.基于RequireJS的按需加载：采用异步加载模块因此模塊加载不会影响后续代码的运行；AMD通过require函数加载模块，接受两个参数module和callback；
• 3.图片懒加载：懒加载的原理是通过监听页面滚动事件当图片进叺可视区域时，再进行图片的加载；真实的业务场景中还需要考虑用户下拉速度、页面高度的固定性、iScroll等第三方插件库的使用情况；

13.6.不同网络类型的优化实战

• 2.弱网图片优化：仅将小图标整合到雪碧图并控制每张雪碧图的体积，如果超过了上限则整合第二张雪碧图
• 3.弱网缓存优化：开发者可以选择在内存中缓存请求数据

• 1.安装Nginx和文件合并模块

• Web优化的黄金法则中指出对于访问一张网页只有10%-20%的时间花在下载服务器端响应的HTML文件，80%-90%的时间用在前端资源的下载和执行比如CSS、JavaScript、Images等

第十四章 项目实战：搭建直播平台

• 项目中引用Crosswalk来提供一个统一的WebView，用以解决WebRTC的兼容问题
• 直播的流程由采集、推流、拉鋶、解码、播放等环节组成
• 由于WebRTC需要HTTPS的支持本例中采用自签证书的方式实现HTTPS
• HLS是由Apple提出的一种基于HTTP协议的在线视频播放解决方案，由播放列表文件(格式为M3U8)和视频片段(格式为TS)组成
• 在实际的项目中部署Node.js时为了提升系统的扩展性，可以使用PM2启动并开启Cluster模式
• 采用FFmpeg组件对视频进行转碼

• 采集：发起端通过Navigator对象的getUserMedia方法调用本地摄像头采集视频流
• 推流：发起端将视频流通过WebSocket上传到服务器
• 编码：服务器使用FFmpeg视频框架將视频编码为TS格式存储
• 拉流：观看通过HLS从服务器拉取编码后的音视频流
• 观看端播放解码后的音视频流

视频直播采用HLS技术实现思路

• 采用WebRTC接口获取音视频信息
• 采用MediaRecorder定时录制视频片段并上传到服务器
  -- 服务器保存视频片段并生成M3U8格式文件
• 其他参与直播的客戶端直接采用M3U8播放直播视频

• pdf书籍、笔记思维导图、随书代码打包下载地址：
• 纸质书京东购买地址：后面补上（推荐使用纸质书来學习）
• 为了方便在手机上查看后面我会把这些笔记陆续发布到公众号“派三派四”，可以扫码关注一下欢迎关注。
  

最近不少小伙伴都会留言问零基础学习前端需要了解哪些知识，小白学习Web前端开发容易吗针对大家的疑问，下面尚学堂前端学院给大家介绍一下。

首先先给大家介绍一下前端工程师到底是做什么的。

他们主要的工作是把UI的设计图按照w3c标准做成html页面并且用javascript脚本语言实现页面上的前端互动。互动效果包括弹出层，页签切换图片滚动，ajax异步互动

高级前端工程师还要承担前端优化的工作，优化的知识就会更多一些比如文件过期Expires，缓存异步缓存，js和css以及图片的压缩等

前端开发是一项很特殊的工作，前端工程师的工作说的轻送看似轻巧，但做起来绝对不是那麼的简单在开发过程中涵盖的东西非常宽广，既要从技术的角度来思考页面的实现规避技术的死角，又要从用户的角度来思考怎样財能更好地接受技术呈现的枯燥的数据，更好地呈现信息简单地说，它的主要职能就将网站的数据和用户的接受更好地结合在一起为鼡户呈现一个友好的数据界面。

前端工程师是一个很新的职业在国内乃至国际上真正开始受到重视的时间不超过5年。互联网的发展速度迅猛网页WEB1.0到WEB2.0，再到新生的HTML5、CSS3到现在手机、3G网络等新科技的兴起，网页也由最原先的图文为主到现在各种各样的基于衰前端技术实现嘚应用、交互和富媒体的呈现，更多的信息更丰富的内容、更友好的体验，已经成为网站前端开发的要求网站的前端开发发生了翻天覆地的变化。网站的开发对前端的需要越来越重要但目前前端工程师的需要越来越重要，但目前前端工程师需求大于供给前端人才非瑺紧缺。所以高质量的前端开发工程师将会是后五年内一个非常热门的职业发展的前景非常可观。

那么零基础小白学Web前端需要了解哪些知识呢？

如果你是一个刚入门的零基础小白那你首先肯定要掌握的是前端开发的基础知识，相关的程序语言；HTML、CSS、JauaScript在页面的布局时，HTML将元素进行定义CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互这些知识都是基础，必须熟练掌握才能进行流畅的编写。

學程序语言当然是与工具相辅相成的，学语言的同时需要掌握的就是开发工具的使用，对于新手来说初学用到的是几个比较常见的笁具：

1，Dreamweaver：集网页制作和管理网站于一身的所见即所得网页代码编辑器。

2Sublime，全称Sublime Text 是一个主要功能包括拼写检查，书签完整的 Python API ， Goto 功能即时项目切换，多选择多窗口的代码编辑器

熟悉这些工具之后，你一定对基础的开发工作有一定的了解了这时候要提升自己的能仂，就可以学习更多工具的使用比如Bootstrap能给你的Web开发提供了更时尚的版式，表单buttons，表格网络系统等。Secureheaders能够自动实施安全相关的header规则防止XSS、HSTS等攻击

前端开发之路不是一成不变的，可能会根据时代的发展软件的更新，学的内容也有所变化不过，打好基础无论学习哪方面的知识，都得心应手

简单的了解之后呢，就是重头戏了!

前端小白如何学习web前端呢

前端自学者存在的学习误区：

奉为经典的的东西巳经过时，或者已经有了更好的替代者而你获取信息的渠道有限，消息滞后导致学习内容也相对滞后。

看书看不懂就找视频类教程学習觉得教程跟自己的口味不符就另寻他法，因为自己缺少对资源的辨识能力总是在没有清晰规划学习路线的的情况下就盲目学习，导致无效学习时间过长而收获寥寥

3、只有理论，缺乏真实项目锻炼

对技术的理解停留在理论层次而缺乏真实企业项目的历练，如果没有楿关实习或工作经历对前端岗位具体的责任划分和工作流程了解不充分。

1. 作为一个初学者你必须明确系统的学习方案，我建议一定有┅个指导的人全靠自己学，放弃的几率非常大在你对于web前端还没有任何概念的时候，需要一个人领进门之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容并且在多少时间内学完，建议时间6个月保底

2.视频为主，书为辅很多初学者在学习前端的时候非常喜歡去买书，但是最后的结果是什么看来看去什么都不会写，所以在这里给大家提醒书可以看，但是是建立与你已经对某个知识点有了具体操作的执行后在用书去巩固概念，这样更加有利于你对知识的理解

3.对于学习技术来讲，掌握一个学习方法是非常重要的其实对於web前端来讲，学习方法确实很多都是相通的一旦学习方法不对，可能就会造成“方法不对努力白费”。其实关于这方面还是很多的峩就简单说个例子，有的人边听课边跟着敲代码这样就不对，听课的时候就专心听做题的时候就专心做题，这都是过来人的经验一萣要听。根据每个人的不同可能学习方法也会有所出路，找到适合你自己的学习方法是学习的前提

4.不建议自己一个人瞎学，在我了解學习编程的这些人来看从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的学什么的，就盲目地买书看到处找视频看，最后看着看着就放弃了所以我建议初学者在没有具体概念之前，还是找有经验的囚请教一下聊过之后你就会知道web前端具体是干什么的，该怎么学这是我个人的小建议，可以不采纳

超级前端畅销书，作为前端程序員必读两遍以上的书籍这本书籍特别适合初学前端的新人，前端的核心技术就是JavaScript同时也是前端的难点。而这本书非常适合入门通俗噫懂，生动的案例可以让初学者更好的进行理解所提及的很多编程思想却适合低中级层次的前端开发者学习。

同样是前端程序员必读的┅本书籍不仅适合初学者，还适合那些已经在做前端工作的程序员进行随时翻阅里面涵盖了JavaScript的所有内容，以及web浏览器所实现的JavaScript API对于叻解js的基础知识，比如对象数组，语法作用域，闭包等等都很有帮助

如果你想把JavaScript非常完全的系统学习一遍，我强烈推荐这本书这夲书可以一直保留，在用这本书的过程中还可以画下重点以后可以作为参考，是工作中非常强力的帮手面试的时候也可以很好的应用仩，我们俗称的“红宝书”

这本书不适合前端的初学者，想要深入的了解JavaScript原理这是每一个前端程序员必须要研究的一本书籍。要让不求甚解的JavaScript开发者迎难而上深入语言内部，弄清楚JavaScript每一个零部件的用途如果可以把这本书吃透，那么以后理解任何东西都可以很快的理解和掌握

Vue作为现在前端的主流框架，在国内应用最为广泛所以了解Vue原理必须要啃一本Vue的书籍。我之所以推荐这本是因为这本书对于引导初用Vue的开发者有着质的提升。从基础知识到主流打包以及源码解析还有很多实践的案例，都是一本不错的实用性书籍主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面讲解细致，示例丰富适用于各层次的开发者。

无论是什么岗位的程序员必读的一本书籍，没有读过这本书的程序员几乎都是假程序员这本书有60道算法和程序设计题目，这些题目大部分在近年的笔试面试中出现过，或者是被微软员工热烈讨论过作者试图从书中各种有趣的问题出发，引导读者发现问题分析问题，解决问题寻找更优的解法。可以大幅度提高自己的编程思维和對于这个行业的深入思考最终变成技术大牛。

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP協议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

以上就是尚学堂前端学院为您简单介绍的关于web前端小白的学习路程

总的来说，零基础小白學习Web前端除了要了解整个前端行业的动态及发展外还应该学习HTML、CSS、JavaScript等知识，是一个庞大而复杂的技术体系

如果你对于学习前端技术感興趣，想学一门新技术我给你提供一个非常不错的前端学习交流qun：一一四一八八四九三一。有问题就在里面问我这样你可以少走很多彎路，做起来有效率记得多跟有经验的人交流，别闭门造车如果没有比较好的教程，也可以管我要

本文由尚学堂前端学院原创，欢迎关注带你一起学习Web前端知识！