‘壹’ web前端和后端有哪些区别
1、定义不同：Web前端是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现，Web后端更多的是通过与数据库交互来处理相应的业务逻辑。要考虑的问题有：功能的实现，数据的访问，平台的稳定性和性能等。
2、掌握的技术不同：Web前端需要精通JS，HTML。能熟练应用JQuery，懂CSS，能熟练运用这些知识，进行交互效果的开发。Web后端开发人员会写Java代码，会写sql语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。
web前端入门注意事项
不同内核的浏览器对网页的渲染是不一样的，目前浏览器都有客户端调试工具，在做web性能优化时，对浏览器渲染及细节要进一步了解。
不同的web框架下，页面的生命周期会有所不同，大体还是一样，客户端发送GET请求，服务器返回相应页面，客户端完成操作及数据，然后POST给服务器。一定要对数据的传递(前台与后台,页面之间)的细节了然于心。
以上内容参考网络-Web前端、网络-后端工程师
‘贰’ web数据是前端渲染还是后端渲染好
前端渲染的话可以让后台更专注业务数据处理，同时服务器压力也要小得多。但是如果你的项目需要让搜索引擎索引，则最好不要使用前端渲染，因为现在的搜索引擎对前端框架不是特别支持，而且前端使用js对数据进行渲染，使得浏览器兼容性成为一个特别棘手的问题，如果你的项目不用管浏览器兼容性的话这就不是什么问题。但是前端渲染使得前后端开发分离，可以提高开发效率，前端可以不用去处理后台的东西了，同时也可以减少网络带宽的占用。后台渲染就是服务器压力山大，毕竟需要将数据和模版渲染成页面，不过这个可以使用缓存解决，同时因为后台渲染需要后台开发的知识，所以前端做好页面之后还要由后台程序员进行修改才能使用，所以开发效率要低得多。后台渲染好页面之后前端拿来直接就能展示，所以后台渲染可以支持更低版本的浏览器。
‘叁’ 最全从输入URL到浏览器显示页面都发生了什么前端浏览器渲染流程
首先了解一下URL的组成：
从上面的URL可以看出，一个完整的URL包括以下几部分：
1、协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符
2、域名部分：该URL的域名部分为“www..com”。一个URL中，也可以使用IP地址作为域名使用
3、端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口80
4、虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”
5、文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
6、锚部分：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分
7、参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。
很多大公司面试喜欢问这样一道面试题， 输入URL到看见页面发生了什么？ ,今天我们来总结一下。 简单来说，共有以下几个过程
下面我们来看看具体的细节
输入 www.google.com 网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去 com 顶级域名服务器查找，，如此的类推下去，直到找到IP地址，然后把它记录在本地，供下次使用。大致过程就是 . -> .com -> google.com. -> www.google.com. 。 (你可能觉得我多写 .，并木有，这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，既然是默认情况下，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上)
既然已经懂得了解析的具体过程，我们可以看到上述一共经过了N个过程，每个过程有一定的消耗和时间的等待，因此我们得想办法解决一下这个问题！
DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。
在你的chrome浏览器中输入:chrome://dns/，你可以看到chrome浏览器的DNS缓存。
系统缓存主要存在/etc/hosts(Linux系统)中
检查浏览器是否有缓存
通过 Cache-Control 和 Expires 来检查是否命中强缓存，命中则直接取本地磁盘的html（状态码为200 from disk(or memory) cache，内存or磁盘）；
如果没有命中强缓存，则会向服务器发起请求（先进行下一步的TCP连接），服务器通过 Etag 和 Last-Modify 来与服务器确认返回的响应是否被更改（协商缓存），若无更改则返回状态码（304 Not Modified）,浏览器取本地缓存；
若强缓存和协商缓存都没有命中则返回请求结果。
不知道你们有没有注意这样一件事，你访问http://.com的时候，每次响应的并非是同一个服务器（IP地址不同），一般大公司都有成百上千台服务器来支撑访问，假设只有一个服务器，那它的性能和存储量要多大才能支撑这样大量的访问呢？DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是DNS负载均衡
TCP 协议通过三次握手建立连接。
翻译成大白话就是：
为什么是3次？ ：避免 历史 连接，确认客户端发来的请求是这次通信的人。
为什么不是4次？ ：3次够了第四次浪费
建立连接的过程是利用客户服务器模式，假设主机A为客户端，主机B为服务器端。
采用三次握手是为了防止失效的连接请求报文段突然又传送到主机B，因而产生错误。失效的连接请求报文段是指：主机A发出的连接请求没有收到主机B的确认，于是经过一段时间后，主机A又重新向主机B发送连接请求，且建立成功，顺序完成数据传输。考虑这样一种特殊情况，主机A第一次发送的连接请求并没有丢失，而是因为网络节点导致延迟达到主机B，主机B以为是主机A又发起的新连接，于是主机B同意连接，并向主机A发回确认，但是此时主机A根本不会理会，主机B就一直在等待主机A发送数据，导致主机B的资源浪费。
采用两次握手不行，原因就是上面说的失效的连接请求的特殊情况。而在三次握手中， client和server都有一个发syn和收ack的过程， 双方都是发后能收， 表明通信则准备工作OK.
为什么不是四次握手呢？ 大家应该知道通信中着名的蓝军红军约定， 这个例子说明， 通信不可能100%可靠， 而上面的三次握手已经做好了通信的准备工作， 再增加握手， 并不能显着提高可靠性， 而且也没有必要。
第一次握手 ：
客户端发送syn包(Seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认；
第二次握手：
服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（Seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手：
客户端收到服务器的SYN ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。
握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去。
要先申请CA证书，并安装在服务器上（一个文件，配置nginx支持监听443端口开启ssl并设置证书路径）
浏览器发送请求；
网站从浏览器发过来的加密规则中选一组自身也支持的加密算法和hash算法，并向浏览器发送带有公钥的证书，当然证书还包含了很多信息，如网站地址、证书的颁发机构、过期时间等。
浏览器解析证书。
验证证书的合法性。如颁发机构是否合法、证书中的网站地址是否与访问的地址一致，若不合法，则浏览器提示证书不受信任，若合法，浏览器会显示一个小锁头。
若合法，或用户接受了不合法的证书，浏览器会生成一串随机数的密码（即密钥），并用证书中提供的公钥加密。
使用约定好的hash计算握手消息，并使用生成的随机数（即密钥）对消息进行加密，最后将之前生成的所有消息一并发送给网站服务器。
网站服务器解析消息。用已有的私钥将密钥解密出来，然后用密钥解密发过来的握手消息，并验证是否跟浏览器传过来的一致。然后再用密钥加密一段握手消息，发送给浏览器。
浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。这里浏览器与网站互相发送加密的握手消息并验证，目的是为了保证双方都获得了一致的密码，并且可以正常的加密解密数据，为后续真正数据的传输做一次测试。
发送HTTP请求
首先科补一个小知识，HTTP的端口为80/8080，而HTTPS的端口为443
发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口 请求报文由 请求行 ， 请求抱头 ， 请求正文 组成。
请求行
请求行的格式为 Method Request-URL HTTP-Version CRLF eg: GET index.html HTTP/1.1 常用的方法有: GET , POST , PUT , DELETE , OPTIONS , HEAD 。
常见的请求方法区别
这里主要展示 POST 和 GET 的区别
常见的区别
注意一点你也可以在GET里面藏body，POST里面带参数
重点区别
GET 会产生一个 TCP 数据包，而 POST 会产生两个 TCP 数据包。
详细的说就是：
注意一点，并不是所有的浏览器都会发送两次数据包，Firefox就发送一次
请求报头
请求报头允许客户端向服务器传递请求的附加信息和客户端自身的信息。
从图中可以看出，请求报头中使用了Accept, Accept-Encoding, Accept-Language, Cache-Control, Connection, Cookie等字段。Accept用于指定客户端用于接受哪些类型的信息，Accept-Encoding与Accept类似，它用于指定接受的编码方式。Connection设置为Keep-alive用于告诉客户端本次HTTP请求结束之后并不需要关闭TCP连接，这样可以使下次HTTP请求使用相同的TCP通道，节省TCP连接建立的时间。
请求正文
当使用POST, PUT等方法时，通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。在请求包头中有一些与请求正文相关的信息，例如: 现在的Web应用通常采用Rest架构，请求的数据格式一般为json。这时就需要设置 Content-Type: application/json 。
更重要的事情-HTTP缓存
HTTP属于客户端缓存，我们常认为浏览器有一个缓存数据库，用来保存一些静态文件，下面我们分为以下几个方面来简单介绍HTTP缓存
缓存的规则
缓存规则分为 强制缓存 和 协商缓存
强制缓存
当缓存数据库中有客户端需要的数据，客户端直接将数据从其中拿出来使用（如果数据未失效），当缓存服务器没有需要的数据时，客户端才会向服务端请求。
又称对比缓存。客户端会先从缓存数据库拿到一个缓存的标识，然后向服务端验证标识是否失效，如果没有失效服务端会返回304，这样客户端可以直接去缓存数据库拿出数据，如果失效，服务端会返回新的数据
强制缓存
对于强制缓存，服务器响应的header中会用两个字段来表明——Expires和Cache-Control。
Expires
Exprires的值为服务端返回的数据到期时间。当再次请求时的请求时间小于返回的此时间，则直接使用缓存数据。但由于服务端时间和客户端时间可能有误差，这也将导致缓存命中的误差，另一方面，Expires是HTTP1.0的产物，故现在大多数使用Cache-Control替代。
Cache-Control
Cache-Control有很多属性，不同的属性代表的意义也不同。
协商缓存
协商缓存需要进行对比判断是否可以使用缓存。浏览器第一次请求数据时，服务器会将缓存标识与数据一起响应给客户端，客户端将它们备份至缓存中。再次请求时，客户端会将缓存中的标识发送给服务器，服务器根据此标识判断。若未失效，返回304状态码，浏览器拿到此状态码就可以直接使用缓存数据了。
对于协商缓存来说，缓存标识我们需要着重理解一下，下面我们将着重介绍它的两种缓存方案。
Last-Modified
Last-Modified：服务器在响应请求时，会告诉浏览器资源的最后修改时间。
从字面上看，就是说：从某个时间节点算起，是否文件被修改了
这两个的区别是一个是修改了才下载一个是没修改才下载。
Last-Modified 说好却也不是特别好，因为如果在服务器上，一个资源被修改了，但其实际内容根本没发生改变，会因为Last-Modified时间匹配不上而返回了整个实体给客户端（即使客户端缓存里有个一模一样的资源）。为了解决这个问题，HTTP1.1推出了Etag。
Etag
Etag：服务器响应请求时，通过此字段告诉浏览器当前资源在服务器生成的唯一标识（生成规则由服务器决定）
但是实际应用中由于Etag的计算是使用算法来得出的，而算法会占用服务端计算的资源，所有服务端的资源都是宝贵的，所以就很少使用Etag了。
缓存的优点
不同刷新的请求执行过程
浏览器地址栏中写入URL，回车
F5
Ctrl+F5
服务器处理请求并返回HTTP报文
它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。这一部分工作一般是由Web服务器去进行，我使用过的Web服务器有Tomcat, Nginx和Apache等等 HTTP报文也分成三份， 状态码 ， 响应报头 和 响应报文
状态码
状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:
平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500
常见状态码区别
200 成功
请求成功，通常服务器提供了需要的资源。
204 无内容
服务器成功处理了请求，但没有返回任何内容。
301 永久移动
请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 临时移动
服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
304 未修改
自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
400 错误请求
服务器不理解请求的语法。
401 未授权
请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 禁止
服务器拒绝请求。
404 未找到
服务器找不到请求的网页。
422 无法处理
请求格式正确，但是由于含有语义错误，无法响应
500 服务器内部错误
服务器遇到错误，无法完成请求。
响应报头
常见的响应报头字段有: Server, Connection...。
响应报文
你从服务器请求的HTML,CSS,JS文件就放在这里面
就是 Webkit 解析渲染页面的过程。
这个过程涉及两个比较重要的概念 回流 和 重绘 ，DOM结点都是以盒模型形式存在，需要浏览器去计算位置和宽度等，这个过程就是回流。等到页面的宽高，大小，颜色等属性确定下来后，浏览器开始绘制内容，这个过程叫做重绘。浏览器刚打开页面一定要经过这两个过程的，但是这个过程非常非常非常消耗性能，所以我们应该尽量减少页面的回流和重绘
这个过程中可能会有dom操作、ajax发起的http网络请求等。
web-socket、ajax等，这个过程通常是为了获取数据
setTimeout、setInterval、Promise等宏任务、微任务队列
当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
会导致回流的操作：
一些常用且会导致回流的属性和方法：
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
JS的解析是由浏览器的JS引擎完成的。由于JavaScript是单线程运行，也就是说一个时间只能干一件事，干这件事情时其他事情都有排队，但是有些人物比较耗时（例如IO操作），所以将任务分为 同步任务 和 异步任务 ，所有的同步任务放在主线程上执行，形成执行栈，而异步任务等待，当执行栈被清空时才去看看异步任务有没有东西要搞，有再提取到主线程执行，这样往复循环（冤冤相报何时了，阿弥陀佛），就形成了Event Loop事件循环，下面来看看大人物
先看一段代码
结果我想大家都应该知道。主要来介绍JavaScript的解析，至于Promise等下一节再说
JavaScript是一门单线程语言，尽管H5中提出了 Web-Worker ，能够模拟实现多线程，但本质上还是单线程，说它是多线程就是扯淡。
既然是单线程，每个事件的执行就要有顺序，比如你去银行取钱，前面的人在进行，后面的就得等待，要是前面的人弄个一两个小时，估计后面的人都疯了，因此，浏览器的JS引擎处理JavaScript时分为 同步任务 和 异步任务
这张图我们可以清楚看到
js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。 估计看完这些你对事件循环有一定的了解，但是事实上我们看对的没这么简单，通常我们会看到Promise，setTimeout，process.nextTick（），这个时候你和我就懵逼。
不同任务会进入不同的任务队列来执行。 JS引擎开始工作后，先在宏任务中开始第一次循环（ script里面先执行，不过我喜欢把它拎出来，直接称其进入执行栈 ），当主线程执行栈全部任务被清空后去微任务看看，如果有等待执行的任务，执行全部的微任务（其实将其回调函数推入执行栈来执行），再去宏任务找最先进入队列的任务执行，执行这个任务后再去主线程执行任务（例如执行```console.log("hello world")这种任务），执行栈被清空后再去微任务，这样往复循环（冤冤相报何时了）
下面来看一段代码
我们看看它的执行情况
具体的执行过程大致就是这样。
‘肆’ 什么是前端渲染什么是服务端渲染两者区别及应用场景
举个商品列表页面为例子。
前端渲染：说的应该是刚进入页面时，商品列表这些数据都不给你，不会渲染出这些数据。然后加载script时，再用ajax或者fetch之类的发起了请求另一个接口，服务端返回了商品列表的json数据给你，你在js中用模板引擎之类的技术，把这些数据拼成html字符串插入到Dom里。
服务端渲染：服务端用php的smarty模板或者java的jsp，把页面的商品列表信息渲染出来了，返回一个html给浏览器了。
区别：如果页面要求被蜘蛛抓取，前端渲染的数据就不能被抓取到，但是服务端渲染的页面就能被抓取到。如果有SEO要求，只能用服务端渲染。如果用Node.js渲染的话，那就都没这些问题了。
‘伍’ web前端需要掌握的哪些知识
一个合格的web前端需要掌握哪些技术？
最基础的自然是JavaScript，HTML和css这三种语言。
首先了解下它们到底是什么。
HTML是用户看到的网页的骨架，比如你会发现当前页面分为左中右三个部分，其中还填充了不同的文字和图片；每个子部分还会继续细分，比如当前页面的中间部分下方有输入框等等。
CSS是网页展示的细节控制，比如你会发现有的文字是红底白色，有的子部分占了页面的二分之一宽，有的只占六分之一，有些部分需要用户进行某些操作（如点击，滑动）才会出现等等，这些就是有CSS来控制。
JavaScript是负责捕捉用户在浏览器上的操作，并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击，输入等操作的时候，会触动绑定了该动作的JavaScript脚本，然后JavaScript收集数据，调用后端的api接口，再将后端返回的数据交给HTML和CSS渲染出来。
一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的，你可以直接按F12，就能看到下图右侧的模块，左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错，不妨点击F12，进行学习。
前端框架
然而，实际应用中，已经很少有正规的项目组直接用上述三种语言进行web 前端开发了，而是使用很多封装了这三种语言的框架，比如
Vue.js
，angular，react native等等。它们是来自谷歌和Facebook的大神项目组，基于自己的经验，封装了原生前端语言，实现了更多更复杂更酷炫的功能。因此，可以说，学会使用这些框架，能达到事半功倍的效果。
比如用了vue，它是自底向上增量开发的设计，其核心只关心图层，而且还可以与其他库或已存项目融合，学习门槛极其友好；另一方面，vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统，可以说，vue是处在一个不断壮大，不断完善的欣欣向荣的状态。
网络通信协议
由于前后端分离的趋势，前端还需要了解很多网络通信协议的知识，这里不局限于http协议，因为据我的经验，有时候我们还会用到websocket等协议。因此，前端需要简单了解不同协议的特点以及使用方式，但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻，只要学会如何用前端语言发送这种协议的请求就够了。
‘陆’ WEB前端实现先加载结构再渲染数据有哪些方案
语言 前端和终端作为面向用户端的程序，有个共同特点：需要依赖用户机器的运行环境，所以开发语言基本上是没有选择的，不像后台想用什么就用什么，iOS只能用Objective-C，前端只能javascript，当然iOS还可以用RubyMotion，前端还能用GWT/CoffieS...
‘柒’ 前端开发者应知必会：浏览器是如何渲染网页的
主要由渲染引擎完成，渲染引擎主要包括：HTML解释器 CSS解释器 布局(layout) JavaScript引擎
HTML解释器：解释HTML文本的解释器，主要作用是将HTML文本解释成DOM(文档对象模型)树，DOM是一种文档的表示方法；
CSS解释器：级联样式表的解释器，它的作用是为DOM中的各个元素对象计算出样式信息，从而为计算机最后网页的布局提供基础设施；
布局：在DOM创建之后，Webkit需要将其中的元素对象跟样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型；
JacaScript引擎：使用JavaScript代码可以修改网页的内容，也能修改CSS的信息，JavaScript引擎能够解释JavaScript代码并通过DOM接口和CSSOM接口来修改网页内容和样式信息，从而改变渲染的结果；
绘图：使用图形库将布局计算后的各个网页的节点绘制成图形结果(例如：需要依赖2D/3D图形库，音频视频和图片解码器等来实现高性能的网页绘制和网页的3D渲染)；
此内容摘自webkit内核书上复制下来的
‘捌’ web前端和前端有什么区别
前端开发主要做的是用户所能看到的前端展示界面；后端开发主要做的是逻辑功能等模块。其实主要区别体现在以下两个方面：知识结构与实现和工作职责。
对于如何学习WEB前端或后端，或者在学习过程中遇见问题自己无法解决，可以到我的学习交流裙：网页链接，里面有最新的学习路线和教程，可以跟着学，有什么不懂的地方可以随时在里面问。
1、知识结构
（1）展示的方式不同
前端指的是用户可见的界面，网站前端页面也就是网页的页面开发，比如网页上的特效、布局、图片、视频，音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容。
后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多得多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。
（2）所用的技术、技能与工具不同
前端开发，就是要创造上面提到的网站面向用户的部分背后的代码，并通过建立框架，构建沉浸性的用户体验。为了实现这个目标，开发需要熟练运用下列语言、框架、工具库：
后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新 Web应用。但在写代码之前，他们需要与客户沟通，了解其实际需求并转化为技术目标，制定最有效且精简的方案来进行实现。
（3）所用技术不同
前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack，AngularJs，ReactJs，VueJs等技术。
后端开发 以java为例 主要用到的 是包括但不限于Struts spring springmvc Hibernate Http协议 Servlet Tomcat服务器等技术。
2、工作职责
前端工程师主要的工作职责分为三大部分，分别是传统的Web前端开发，移动端开发和大数据呈现端开发。Web前端开发主要针对的是PC端开发任务；
移动端开发则包括Android开发、iOS开发和各种小程序开发，在移动互联网迅速发展的带动下，移动端的开发任务量是比较大的，随着5G标准的落地，未来移动端的开发任务将得到进一步的拓展；大数据呈现则主要是基于已有的平台完成最终分析结果的呈现，呈现方式通常也有多种选择，比如大屏展示等。
后端工程师的主要职责也集中在三大部分，分别是平台设计、接口设计和功能实现。平台设计主要是搭建后端的支撑服务容器；接口设计主要针对于不同行业进行相应的功能接口设计，通常一个平台有多套接口，就像卫星导航平台设有民用和军用两套接口一样；功能实现则是完成具体的业务逻辑实现。
(8)web前端发送请求和渲染扩展阅读：
前端和后端的应用范围
1、PC (Personal Computer) 即个人电脑。
目前电脑端仍是前端一个主要的领域，主要分为面向大众的各类网站，如新闻媒体、社交、电商、论坛等和面向管理员的各种 CMS (内容管理系统)和其它的后台管理系统。
2、Web App 是指使用 Web 开发技术，实现的有较好用户体验的 Web 应用程序。
它是运行在手机和桌面端浏览中，随着移动端网络速度的提升，Web App 为我们提供了很大的便利。此外近两年 Google 提出了一种新的 Web App 形态，即 PWA(渐进增强 Web APP) 。
3、WeChat (微信) 这个平台，拥有大量的用户群体，因此它也是我们前端开发另一个重要的领域。微信的公众号与订阅号为市场营销和自媒体从业者，打造了一个新的天地。
4、Hybrid App (混合应用) 是指介于 Web App、原生 App (主要是 Android 或 iOS )之间的 App，它兼具原生 App 良好用户交互体验的优势和 Web App 跨平台开发的优势。
5、Game（游戏），HTML5 游戏从 2014 年 Egret 引擎开发的神经猫引爆朋友圈之后，就开始一发不可收拾。不过现在游戏开发变得越来越复杂，需要制作各种炫丽炫丽的效果，还要制作各炫丽于 2D 或者 3D 的场景。
6、Desktop桌面应用软件，就是我们日常生活中电脑中安装的各类软件。早期要开发桌面应用程序，就需要有专门的语言 UI (界面) 库支持，如 C++ 中的 Qt 库、MFC 库，Java 的 Swing、Python 的 PyQT 等，否则语言是没办法进行快速界面开发。
7、Server Node.js 一发布，立刻在前端工程师中引起了轩然大波，前端工程师们几乎立刻对这一项技术表露出了相当大的热情和期待。看到 Node.js 这个名字，初学者可能会误以为这是一个 Java 应用，事实上，Node.js 采用 C++ 语言编写而成，是一个 Java 的运行环境。
‘玖’ Web前端主要包括哪些技术小白求解答
Web前端技术主要包括HTML5、CSS3、Less、Sass、响应式布局、移动端开发、以及Ps设计等，更高级的前端开发人员还需要掌握JavaScript 语言、Mysql、Mongodb数据库开发、vue.js、webpack、elementui等前端框架技术。蜗牛学院这里也给大家整理了一份web前端学习路线，希望对想要学习web前端的小白有所帮助。
第一阶段：专业核心基础
阶段目标：
1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。
2. 熟练运用HTML+CSS特性完成页面布局。
4. 熟练应用CSS3技术，动画、弹性盒模型设计。
5. 熟练完成移动端页面的设计。
6. 熟练运用所学知识仿制任意Web网站。
7. 能综合运用所学知识完成网页设计实战。
知识点：
1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。
2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。
3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。
第二阶段：Web后台技术
阶段目标:
1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。
2. 熟练掌握JavaScript的基本数据类型和变量的概念。
3. 熟练掌握JavaScript中的运算符使用。
4. 深入理解分之结构语句和循环语句。
5. 熟练使用数组来完成各种练习。
6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。
7.DOM和BOM实战练习和H5新特性和协议的学习。
知识点：
1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。
2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。
3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。
4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。
第三阶段：数据库和框架实战
阶段目标：
1. 综合运用Web前端技术进行页面布局与美化。
2. 综合运用Web前端开发框架进行Web系统开发。
3. 熟练掌握Mysql、Mongodb数据库的发开。
4. 熟练掌握vue.js、webpack、elementui等前端框技术。
5. 熟练运用Node.js开发后台应用程序。
6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。
知识点：
1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。
2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。
3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。
4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。
第四阶段：移动端和微信实战
阶段目标：
1.熟练掌握React.js框架，熟练使用React.js完成开发。
2.掌握移动端开发原理，理解原生开发和混合开发。
3.熟练使用react-native和Flutter框架完成移动端开发。
4.掌握微信小程序以及了解支付宝小程序的开发。
5.完成大型电商项目开发。
知识点：
1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Rex基本概念。练使用react完成项目开发、掌握Rex中的异步解决方案Saga。
2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。
3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。
4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。
‘拾’ web前端开发要学些什么东西，以及学习顺序，求大佬解答，谢谢了。
前端行业的薪资居高不下，对于想入门的小白却不知道如何学起，今天爱前端考拉老师告诉你小白如何开启前端学习以及需要掌握哪些知识点。
学习对象：0基础，对互联网充满热情，想要从事H5前端开发、全栈开发的学员；
第一阶段 互联网基本原理和HTML
互联网基本原理、服务器、浏览器、HTTP请求的概念。编程工具介绍、HTML简介。HTML语义化标签、p标签和h系列标签。HTML基本骨架深入、HTML骨架、HTML和XHTML的区别。元信息标记meta、设置页面关键字、字符集、关键字、页面描述。a标签和img标签，相对路径、绝对路径。ul、ol、dl标签、div和span标签、较不常用HTML标签简介。表单、提交表单action、传送方法method、插入表单对象。HTML注释、HTML字符实体。
第二阶段CSS基础和高级技巧
选择器。文字属性、颜色属性。继承性和层叠性，权重计算。CSS盒模型，width、height、padding、border、margin属性。父子嵌套模型，使用Fireworks精确还原设计图。float浮动属性、浮动的意义、清除浮动的方法。浏览器兼容，CSS hack。 background系列属性、css精灵、网页上透明。超级链接的伪类、导航条。 position定位、定位小技巧。DIV+CSS布局。
第三阶段 静态网站制作项目
通过以上两个阶段的学习可以达到制作网页的水平，学习要求。需要掌握搜索引擎优化的概念、页面常用SEO技巧、学会有格调的制作页面。iconfont字体图标。一些常见的CSS高级技巧，比如负margin、压线技术、滑动门、列自撑技术。较复杂布局网站的学习，学习制作2~3个页面。通栏banner、大背景等时下流行的网站制作方法。精美企业站赏析、制作
第四阶段JavaScript基础
语句、执行顺序、词法结构、标识符、关键字、变量、常量、alert语句和console控制台。值和变量、数字、文本、布尔值、null和undefined。表达式和运算符、运算符概述。流程控制、赋值语句、条件判断语句、if语句、if语句的嵌套、switch语句、循环控制语句、while语句、do…while语句、for循环。跳转语句：continue语句、break语句。函数、参数、返回值、递归、作用域、全局变量、局部变量。内部对象、数组、字符串。
第五阶段JavaScript DOM编程
事件与事件处理概述、事件与事件名称、常用事件、事件处理程序的调用、DOM事件模型、事件流、 事件对象、注册与移除事件。文档对象的常用属性、方法与事件、输出数据。事件的三要素。DOM对象、DOM概述、DOM分层、DOM级别、DOM对象节点属性、遍历文档树、克隆删除替换。动画基础知识、定时器、setInterval和setTimeout、运动效果、 实用的动画、制作运动效果案例
第六阶段jQuery页面特效
jQuery对象和DOM对象、jQ选择器、CSS操作、设置和获取HTML、文本和值。事件、加载DOM、事件绑定、合成事件、事件对象的属性。动画、自定义动画方法、动画回调函数、停止动画、其他动画方法。jQuery对表单、表格的操作及更多应用、表单应用、表格应用。jQuery插件，jQueryUI，jQuery ease，jQuery mousewheel等。超多页面特效！结合案例掌握了解jQuery插件的使用。
第七阶段JavaScript进阶
命名空间、对象扩展、数组化、主流框架引入的机制——domReady、无冲突处理。语言模块、字符串的扩展与修复、数组的扩展与修复、数值的扩展与修复、函数的扩展与修复、 日期的扩展与修复、浏览器嗅探与特征侦测 、判定浏览器、事件的支持侦测、样式的支持侦测。类工厂、JavaScript对类的支撑、各种类工厂的实现。浏览器内置的寻找元素的方法、属性模块、如何区分固有属性与自定义属性。
第八阶段HTML5和CSS3
HTML5概述、HTML5新特性、HTML5组织、HTML5构成、HTML5页面的特征、HTML基础、HTML5全局属性、HTML5其他功能、HTML5元素分类。实战HTML5表单、新增的input输入类型。HTML5音频与视频、HTML5多媒体技术概述、在HTML5中播放音频。CSS3编码规范、了解CSS3新增特性。CSS选择器、属性选择器、结构伪类选择器、UI伪类选择器。旋转动画、缩放动画、移动动画、倾斜动画。3D炫酷动画效果实战。
第九阶段移动web和响应式网页
视口、缩放 、分辨率、物理分辨率、设备像素比、dppx和dpi 、meta视口。百分比布局、流式布局、CSS3新的流式盒模型。触摸和指针事件、触摸事件、手势事件 、其他事件、拖放、滚动层、事件和交互模式、移动端交互综合实战。zepto.js、jQuery Mobile等移动端常见框架。HTML5速成移动端框架。Bootstrap3 、调整响应式导航条断点。移动优先、Bootstrap栅格系统、栅格系统原理、Bootstrap中的JavaScript交互、Bootstrap敏捷开发。
第十阶段服务器知识和PHP入门
后台语言和前台语言的区别。初识PHP、PHP语言的优势、PHP 5的新特性、PHP的发展趋势、PHP的应用领域。 PHP环境搭建和开发工具。PHP语言基础、PHP变量、PHP运算符、 PHP的表达式、PHP编码规范、流程控制语句、字符串操作、PHP数组、 PHP与Web页面交互。数据库技术概述、增删改查。
第十一阶段Ajax企业项目实战开发
Ajax概述与Ajax初体验、Ajax技术介绍、XMLHttpRequest对象详解、动态加载和显示数据、XMLHttpRequest对象概述、方法、属性、发送请求、GET和POST请求、运行周期、使用JSON响应、Ajax实用包的封装。JSON的解析、Underscore模板引擎、模板技术、动态组装页面、电话号码归属地查询、验证码等。Ajax实战篇 、Ajax高级表单验证程序 、Ajax动态联动菜单、瀑布流。
第十二阶段JavaScript面向对象
创建对象、属性的查询和设置、 删除属性、检测属性、枚举属性、属性getter和setter、属性的特性、对象的三个属性、序列化对象、对象方法。类和模块、类和原型、类和构造函数、类的扩充、类和类型、子类。原型、实例化和原型、 对象实例化、通过构造器判断对象、继承与原型链、构造函数和原型对象 、构造函数、原型对象 、[[Prototype]]属性 、在构造函数中使用原型对象 、改变原型对象、内建对象的原型对象。
第十三阶段canvas动画和手机游戏
Canvas绘图、基本知识、理解canvas坐标系、获取canvas环境上下文、理解路径、路径操作API 、绘制线条 、绘制矩形 、绘制圆弧 、绘制贝塞尔曲线 、线条属性 、线条颜色 、填充 、绘图状态。图像API、使用canvas绘制图像、坐标变换、绘制文字。游戏原理、制作2D游戏引擎、理解游戏循环、渲染引擎实现、使用引擎构建游戏实例、游戏常用算法。
第十四阶段Node.js企业项目开发
Node的特点、异步I/O、事件与回调函数、单线程、跨平台、Node的应用场景、I/O密集型、CommonJS规范、Node的模块实现、路径分析和文件定位、模块编译、核心模块、JavaScript核心模块的编译过程、网络编程、构建TCP服务。构建HTTP服务、构建WebSocket服务、网络服务与安全。MongoDB、Express、Mongoose、socket.io。小型微博系统、俄罗斯方块对战。Linux使用。
第十五阶段信小程序
小程序概述、 小程序开发账户的注册、获得AppId下载使用开发者工具、认识默认的文件夹结构、appjson配置、双大括号差值和MVVM模式、小程序操作数字、小程序API起步、案例调色板、案例微博发布框、for循环指令、if判断指令和复选按钮组、阿里云服务器开通、请求服务数字和发出改变数字、get请求信息流案例、post请求和图片上传、数据库mogodb、班级说说
第十六阶段ECMAScript2016
简介、let和const命令、变量的解构赋值、字符串的扩展、正则的扩展、数值的扩展、数组的扩展、函数的扩展、对象的扩展、Symbol、Set和Map数据结构、Proxy、Reflect、Iterator和for...of循环、Generator函数、Promise对象、异步操作和Async函数、Class、Decorator、Mole、编程风格、读懂规格、二进制数组、SIMD
第十七阶段Yeoman脚手架
基本安装、配置、HTML模板、图片压缩、构建工具、包管理器、JSLint测试。
第十八阶段Grunt和Gulp构建工具
GIT、SVN、Grunt、Gulp、Webpack。通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
第十九阶段Sass、Less和Stylus
sass中可以定义变量，方便统一修改和维护。用sass进行 选择器的嵌套，表示层级关系。用sass中导入其他sass文件，最后编译为一个css文件t。用sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用
第二十阶段React.js构建视图组件
React简介、JSX、组件的生命周期、实例化、数据流、事件处理、组件的复合、mixin、DOM操作、动画、性能优化、服务端渲染、周边类库。VUE数据模板、生命周期、过滤器。
第二十一阶段VUE界面的前端库
遇见Vue.js、数据绑定、指令、计算属性、表单控件绑定、过滤器、Class与Style绑定、过渡、绑定事件、组件、表单校验、分组校验、与服务端通信、RESTful调用。
第二十二阶段React Native移动框架
React Native简介、React Native开发基础、常用组件介绍及实践、TextInput组件、九宫格实现、NavigatorIOS组件、Touchable类组件、状态机思维与状态机变量、深入理解UI重新渲染的过程、Navigator组件工作机制、混合开发基础、组件生命周期、数据存储及React Native应用实现步骤。
第二十三阶段 Cordova和PhoneGap
使用加速计和位置传感器、文件系统、存储及本地数据库、处理音频、图像和视频、处理通讯录、本地事件、使用XUI、使用jQuery Mobile进行用户界面开发、PhoneGap插件扩展、开发工具及测试。
第二十四阶段ionic framework
Ionic和Hybrid应用介绍、配置开发环境 、Ionic导航和核心组件、选项卡、高级列表和表单组件、开发高级应用、使用 Ionic 命令行代理、在页面中使用 ionScroll、过滤器：转换视图中的数据。
第二十六阶版本管理系统和项目打包测试
第二十七阶段前端攻防、部署和SEO
第二十八阶段WebGL和Three.js
第二十九阶段TypeScript和Angula4