A. web前端有哪些性能优
一，关键资源字节数
字节数也就是我通常说的减少资源文件（js,css,image,video...）的大小
1，压缩
前端使用uglify混淆压缩
后端开启gzip
对图片进行压缩，使用压缩比例更高的格式（webP）
强缓存（http状态码：200），不用请求服务器直接使用本地缓存
协商缓存（http状态码：304），使用时先请求服务器若被告知缓存没过期则使用本地缓存，不用下载资源
使用localstorage对数据进行存储
使用http2.0的多路复用合并请求
配置combo，在无法使用http2.0的情况下作为一种合并资源请求的手段
使用spite图
使用svg-symbol
2，缓存
3，针对首屏优化
对非关键资源延迟加载、异步加载，减少首屏资源大小
二，关键资源连接数
1，合并请求
2，减少图片请求数
3，针对一些场景采用css、js内联的方式
4，使用强缓存减少了一次服务器请求
5，非关键资源延迟、异步加载，减少了首屏资源连接数
三，关键渲染路径
网上有张关于页面渲染路径的图，这里我就不放了，大家有兴趣自己网络下
1，bigpipe分块输出
这里主要是因为要完成一整个页面的输出后端需要处理很多个任务，我们可以将这些多个任务进行分块，谁先完成谁就先输出，最终通过JS回填的方式输出DOM节点。这种方式主要解决了直出页面阻塞的问题
2，bigrender分块渲染
常规的手段就是采用前端模板渲染页面，针对首屏时间主要减少了首次构建DOM树时的节点数
3，针对reflow，repaint，composit路径处理
4，涉及到动画时关于layer的概念render layer、graphics layer
5，css放在头部、js放底部避免阻塞DOM树的构建，
关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。
核心：css资源不会阻塞DOM树的构建但会阻塞DOM的渲染，JS会阻塞DOM树的构建，CSS会阻塞JS的执行
B. web前端是什么
Web前端开发是从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。
随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显着，功能更加强大。Web前端主要是用来开发用户通过浏览器可以浏览和使用的Web页面的。一般而言，所涉及的内容主要包括W3C中的HTML、CSS和JavaScript这三方面的内容。
(2)web前端页面模版扩展阅读：
随着互联网的迅猛发展和普及，一个新型的行业和新兴的职位正在上升到技术的层面：web前端开发工程师
Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性
Web前端表现层及与前后端交互的架构设计和开发web前端开发工程师-web2.0时代
配合后台开发人员实现产品界面和功能
利用各种Web技术模拟开发产品原型
Web新技术调研和资讯整理
精通HTML/XHTML、CSS，熟悉页面架构和布局，对Web标准和标签语义化有深入理解
熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技术，掌握面向对象编程思想
C. web后端和前端是怎么连接的
WEB后端和WEB前端可以通过前端模板引擎与后端模板引擎进行连接。
后端模板引擎：
WEB前端开发人员开发好前端静态页面，然后交给WEB后端开发人员，他们再利用后端引擎模板（比如：freemarker）把前端页面与后端数据进行连接，形参一个动态页面。
前端模板引擎：
描述成前端模板引擎可能不太对，但是比较好理解吧。当前比较流行的Vue.js、Angular.js、React.js 等MVVM前端框架都自带了前端模板引擎。
WEB前端人员与WEB后端人员一起协定好数据接口格式（请求地址、数据格式、数据字段等），然后WEB前端人员与WEB后端人员同时进行项目的开发，WEB前端人员通过AJAX的方式从WEB后端获取到前端页面的相关JSON数据，然后通过MVVM前端框架把JSON数据渲染到页面里面，最终形成了一个动态页面。
D. 前端常用的框架有哪些
前端三大框架，是Angular、React、Vue，这三个框架现在是最为流行也是最多人用的框架。
React：
1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合。
优点：
1.速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2.跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3.模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
4.单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构5.同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。缺点：React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。
Vue：
Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。
它有以下的特性：
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
优点：
1.简单：官方文档很清晰，比Angular简单易学。
2.快速：异步批处理方式更新DOM。
3.组合：用解耦的、可复用的组件组合你的应用程序。
4.紧凑：~18kbmin+gzip，且无依赖。
5.强大：表达式无需声明依赖的可推导属性(computedproperties)。
6.对模块友好：可以通过NPM、Bower或Duo安装，不强迫你所有的代码都遵循Angular的各种规定，使用场景更加灵活。
缺点：
1.新生儿：Vue.js是一个新的项目，没有angular那么成熟。
2.影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3.不支持IE8。
Angular：
Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
它有以下的特性：
1.良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
优点：
1.模板功能强大丰富，自带了极其丰富的angular指令。
2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；3.自定义指令，自定义指令后可以在项目中多次使用。
4.ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
5.angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。
缺点：
1.angular入门很容易但深入后概念很多,学习中较难理解。
2.文档例子非常少,官方的文档基本只写了api,一个例子都没有,很多时候具体怎么用都是google来的,或直接问misko,angular的作者。
3.对IE6/7兼容不算特别好,就是可以用jQuery自己手写代码解决一些。
4.指令的应用的最佳实践教程少,angular其实很灵活,如果不看一些作者的使用原则,很容易写出四不像的代码,例如js中还是像jQuery的思想有很多dom操作。
5.DI依赖注入如果代码压缩需要显示声明。
E. web前端开发框架有哪些
常见的web前端开发框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。
2、html5-boilerplate：
该框架可以快速构建健壮，且适应力强的web app或网站。
3、Meteor：
Meteor是新一代的开发即时web应用的开源框架，它能在较短时间内完成开发。
4、Materialize：
基于材料设计的现代化响应式前端框架。可提供默认的样式，自定义组件。此外，Materialize还改进动画和过渡，为开发人员提供流畅的体验。
5、Amaze UI：
国内首个开源HTML5跨屏前端框架产品系列，中文排版支持更优、本土化组件丰富。该产品系列中有专门针对移动端的HTML5混合应用开发框架Amaze UI Touch以及针对跨屏HTML5网页开发的Amaze UI Web。
(5)web前端页面模版扩展阅读：
web框架程序的作用：
Web框架使得在进行Web应用开发的时候，减少了工作量。Web框架主要用于动态网络开发，动态网络主要是指现在的主要的页面，可以实现数据的交互和业务功能的完善。
使用Web框架进行Web开发的时候，在进行数据缓存、数据库访问、数据安全校验等方面，不需要自己再重新实现，而是将业务逻辑相关的代码写入框架就可以。也就是说，通过对Web框架进行主观上的“缝缝补补”，就可以实现自己进行Web开发的需求了。
以PHP为例，PHP可以在apache服务器上进行Web开发，而不必使用框架。使用PHP进行开的时候，在不适用框架的情况下，数据库连接就需要自己来实现，页面的生成和显示也是一样。比如框架的话可以完成避免sql注入的工作，而使用PHP在不用框架的情况下，这部分要自己做。
参考资料来源：网络-前端开发
F. Web前端课程都学什么
html、CSS3、js、node开发、vue、React、微信小程序等等。
G. web前端 和java
举个例子，对于广告系统的来说， 我们先不管一些job，CACHE，config ... 这些优化，些框架和分层可以是这样的，
MVC的技术选型：
V: FreeMarker vs JSP / Velocity
C: SpringMVC vs Struts / Webwork
M: SPRING/JPA/Hibernate vs iBatis
2 前端V的架构
前端开发刚兴起的阶段，前端开发人员的工作经常穿插在后端开发过程中担任辅助作用的，随着业务越来越复杂，前端必须有自己的开发框架和流程，使得后端专注于服务类的开发，前端专注于与用户交互类的开发。
WEB前端从概念上划分为三个层次：结构、表现、和行为。三层相对独立，互不影响。在物理上层面上分别对应HTML、CSS、JS三种不同的的文件格式。
HTML：负责定义网页的结构，内容
CSS：负责内容的展现方式
JS：负责网页关于动态的行为反应
好的层次划分对前端的开发也很关键。显示内容问题的唯一来源应该是html文件定义的，内容展示问题的唯一来源应该是CSS文件定义的，行为问题的唯一来源应该是javascript文件定义的，各司其职相互独立。但是他们是相关的，因为行为和样式无法与结构分离，必须写在同一个文件里。这种情况下，首先还是你要把行为和样式从html标签中分开，然后在html文件中引入。
前端开发的核心是HTML + CSS + JavaScript。本质上它们构成一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。
1）结构层
在java领域，表现层技术主要有三种：jsp、freemarker、velocity。
(1) jsp(Java Server Pages)
它是在传统的网页HTML文件(.htm，.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，它实现Html语法中的java扩展（以 <%, %>形式）。从而形成JSP文件，后缀名为(.jsp)。因为java具有跨平台特点， 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。JSP与Servlet一样，是在服务器端执行的，最终都要变.class文件，通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。
优点：
可以写java代码
支持jsp标签（jsp tag）
支持表达式语言（el）
官方标准，用户群广，丰富的第三方jsp标签库
性能良好，jsp编译成class文件执行，有很好的性能表现
缺点：
编写java代码，如使用不当容易破坏mvc结构。
(2) Freemarker
它生成静态页面，首先需要使用自己定义的模板页面，这个模板页面可以是最最普通的html，也可以是嵌套freemarker中的 取值表达式， 标签或者自定义标签等等，然后后台读取这个模板页面，解析其中的标签完成相对应的操作， 然后采用键值对的方式传递参数替换模板中的的取值表达式，做完之后 根据配置的路径生成一个新的html页面， 以达到静态化访问的目的。
模板+数据模型=输出，模板只负责数据在页面中的表现，不涉及任何的逻辑代码，而所有的逻辑都是由数据模型来处理的。用户最终看到的输出是模板和数据模型合并后创建的。
FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或者其他。
优点：
可以彻底的分离表现层和业务逻辑，使用JSP 开发过程中在页面中大量的存在业务逻辑的代码，使得页面内容凌乱，在后期大量的修改维护过程中就变得非常困难。FreeMarker根本不支持Java代码。
可以提高开发效率，JSP在第一次执行的时候需要转换成Servlet类，开发阶段进行功能调适时，需要频繁的修改JSP，每次修改都要编译和转换 。FreeMarker模板技术不存在编译和转换的问题，开发过程中，后端不必在等待界面设计开发人员完成页面原形后，再来开发程序。
对jsp标签支持良好
内置大量常用功能，比如html过滤，日期金额格式化等等
使用表达式语言 (EL)
缺点：
不是官方标准
用户群体和第三方标签库没比jsp丰富
使用FreeMarker后，作为界面开发人员，只专心创建HTML文件、图像以及Web页面的其他可视化方面，不用理会数据；而程序开发人员则专注于系统实现，负责为页面准备要显示的数据。
还有一些像velocity这样较早出现的用于代替jsp的模板语言 ... ...
2) 表现层CSS
结构搭建之后，就是为他们添加样式表属性。它实现的是页面内容和现实样式分离，所有的CSS都是非必需的，就算无法应用CSS或CSS冲突，网页也能够正常访问。
为了管理的方便，可以将不同样式进行拆分，比如可以拆分为全局样式，结构布局样式，色彩样式，文字样式和重置样式。css在开发时代码采用了规范的形式，比如有注释，缩进等，这样，这些文件的大小比较大，为了减少网络流量，提高网页的下载速度，一般发布时需要对javascript和css进行压缩处理，我们将样式文件进行合并压缩，目的是减少与服务器交互的时间和次数。如http://www.jb51.net/tools/cssyasuo.shtml可以在线进行压缩。
样式混合使用选择：
有关整个网站统一的样式代码，放置在独立的样式文件中.css
某些样式不同的页面，除了链接外部样式文件，还需要自定义的样式
某张网页中，部分内容如果需要一种不同，采用内行样式
) 行为层 javaScript
常见的也是最有名的javascript 框架，其实准确来说应该是库：
（http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/）
jQuery
jQuery 是目前用的最多的前端 JAVASCRIPT 类库，它是比较轻量级的类库，对 DOM 的操作也比较方便到位，支持的效果和控件也很多。同时，基于 jQuery 有很多扩展项目，包括 jQuery UI(jQuery 支持的一些控件和效果框架)、jQuery Mobile(移动端的 jQuery 框架)、QUnit(JavaScript 的测试框架)。这些补充使得 jQuery 框架更加完整，而且这些扩展与目前的框架基本都是兼容的，可以交叉使用，使得前端开发更加丰富。
Ext
相比 jQuery，Ext JS 更重量级，有几个兆的文件，使得 Ext 在开发中成为的弊端和累赘。但是，另一方面，在 Ext JS 庞大的文件背后是 Ext JS 强大的功能。Ext JS 的控件和功能可以说强大和华丽到的程度。图表、菜单、特效，Ext JS 的控件库非常丰富，同时它的交互也非常强大，独立靠 Ext JS 几乎就可以取代控制层完成于客户的交互。强大的功能，丰富的控件库，华丽的效果也使得 Ext JS 成为内网开发利器。
YUI
YUI 也有自己的 JavaScript 类库，DOM 操作和效果处理也还比较方便，功能和控件也很齐全，但是相比 jQuery 和 Ext JS 显得比较中庸一些。随着 Yahoo的没落，YUI 也渐渐的被淡化。
目前前端框架主要采用 JavaScript+CSS 模式。基于上面的几种javascript库，我们可以基于JQuery框架搭建起一个java web前端系统的框架。如丛林的前端就是COS-UI+jQuery搭建起来的，再利用插件ztree实现品类树在前端的展示。
jquery对javascript的封装
JQuery能大大简化Javascript程序的编写，主要表现：
定位元素
JS写法:
document.getElementById("abc")
jQuery写法:
$("#abc") 通过id定位
$(".abc") 通过class定位
$("div") 通过标签定位
改变元素的内容
JS写法：
abc.innerHTML = "TEST";
jQuery写法：
abc.html("TEST");
显示隐藏元素
JS 写法：
abc.style.DISPLAY = "none";
abc.style.DISPLAY = "BLOCK";
jQuery 写法：
abc.HIDE();
abc.SHOW();
abc.TOGGLE();
修改元素样式
JS写法：
abc.STYLE.fontSize=size;
jQuery写法：
abc.css('font-size', 20);
Ajax
JS
自己创建对象，自己处理浏览器兼容等乱七八糟的问题，略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.POST("abc.php", postvalue, recall);
FUNCTION recall(RESULT) {
ALERT(result);
//如果返回的是json，则如下处理
//result = eval('(' + result + ')');
//ALERT(result);
}
获得焦点
为表单赋值
获得表单的值
设置元素不可用
3) 浏览器的渲染
4）web前端开发流程
H. web前端工程师做什么
主要工作是把UI的设计图按照w3c标准做成html页面，并且用javascript脚本语言实现页面上的前端互动。互动效果包括，弹出层，页签切换，图片滚动，ajax异步互动等。
高级前端工程师还要承担前端优化的工作，优化的知识就会更多一些，比如文件过期Expires，缓存，异步缓存，js和css以及图片的压缩等。
前端开发是一项很特殊的工作，前端工程师的工作说得轻松，看似轻巧，但做起来绝对不是那么的简单。在开发过程中涵盖的东西非常宽广，既要从技术的角度来思 考界面的实现，规避技术的死角，又要从用户的角度来思考，怎样才能更好地接受技术呈现的枯燥的数据，更好的呈现信息。简单地说，它的主要职能就将网站的数 据和用户的接受更好地结合在一起，为用户呈现一个友好的数据界面。
前端工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。互联网的发展速度迅猛，网页由WEB1.0到WEB2.0，再 到新生的HTML5、CSS3，到现在手机、3G网络等新科技的兴起，网页也由最原先的图文为主，到现在各种各样的基于哀前端技术实现的应用、交互和富媒 体的呈现，更多的信息、更丰富的内容、更友好的体验，已经成为网站前端开发的要求，网站的前端开发发生了翻天可覆地的变化。网站的开发对前端的需要越来越重要，但目前前端工程师需求远大于供给，前端人才非常紧缺。所以高质量的前端开发工程师将会是后五年内一个非常热门的职业，发展的前景非常可观。
PS：欢迎加入我的前端qq交流群，里面也是一群学前端的小伙伴，我们可以一起学习，互相监督，互相交流学习经验，一起进行项目实践。期待你的加入。
I. webpack如何简单实现类似后端模板功能
// 通用js静态资源+JS([ 'common/xxx/xxx.js'], 'common/xxx/xxx.js')// 通用css静态资源+CSS([ 'common/xxx/xxxx.css'], [ 'common/xxx/xxxx.css'])// jade模板中使用的静态资源img(src="aaaa/bbbb/ccc.png")
div(style="background:url(aaaa/bbbb/cccc.png)")// jade扩展的布局模板extends xxxxx.jade// jade包涵模块include xxxxx.jade