前端路由和后端路由

前端路由：

webpack的主要使用场景是SPA，SPA的核心是前端路由。

路由：每次GET或POST等请求在服务端有一个专门的正则配置列表，然后匹配到一条具体的路径后，分发到不同的controller，进行各种操作，最终将html或数据返回给前端。

 

 

 

后端路由：

目前绝大多数网站都是后端路由，（多页面的）：

好处：1.页面在服务端渲染好直接返回给浏览器，不用等待前端加载任何js和css就可以直接显示网页

2.对SEO比较友好

缺点：

1.模板是由后端来维护或改写的，前端开发者需要安装整套的后端服务，必要时还得学习php或Java等非前端语言来改写html结构

2.html和数据、逻辑混为一谈，维护起来既臃肿又麻烦

前后端分离的开发模式：后端只提供API来返回数据，前端提供Ajax获取数据后，再用一定的方式渲染到页面里。此种模式的缺点：首屏渲染需要时间来加载js和css。

SPA其实就是在前后端分离的基础上加一层前端路由。

前端路由：即由前端来维护一个路由规则，实现方式：

 

1.hash模式

利用url的hash，就是常说的锚点（#），js通过hashChange事件来监听url的改变

2.html5的History模式

url看起来像普通网站那样，以“/”分割，没有#，页面没有跳转，使用这种模式需要服务端支持。

 优点：1.页面持久性（播放音乐的同时跳转到其他页面，音乐没有中断）

            2.前后端彻底分离

缺点：使用浏览器的前进后退键的时候会重新发送请求，没有合理利用缓存，单页面无法记住之前滚动的位置，无法在前进后退时记住滚动的位置。

 

前端渲染

定义：指的是后端返回JSON数据，前端利用预先写的html模板，循环读取json数据，插入页面。

好处：网络传输数据量小

缺点：前端耗时多，对前端工作人员水平要求相对较高

前端代码多，因为部分以前在后台处理的交互逻辑交给了前端处理

占用少部分客户端运算资源用于解析模板

后端渲染：

前端请求，后端用后台模板引擎直接生成html，前端接收到数据后，直接插入页面

优点：前端耗时少，即减少了首屏时间，模板在后端，前端（相对）省事，不占用客户端运算资源（解析模板）

（首屏时间：浏览器显示第一屏页面需要的时间，以800X600像素尺寸为标准，从开始加载到浏览器页面显示高度达600像素，且此区域有内容显示的时间）

首先要解决的问题是哪些属于首屏的内容。由于手机屏幕尺寸的多样性，同一页面在手机屏幕上用户所能看到的首屏内容有可能不一样。所以需要去判断哪些元素属于首屏元素并且该元素加载是否完成。对于非可替换元素，dom的加载完成说明了该元素已经完成加载，而对于一些可替换元素，如img标签，需要外部资源的加载完成才能有实际内容的展示，而页面耗时最大的部分也是这些外部资源的加载。

因为通常需要考虑首屏时间的页面，都是因为在首屏位置内放入了较多的图片资源。现代浏览器处理图片资源时是异步的，会先将图片长宽应用于页面排版，然后随着收到图片数据由上至下绘制显示的。并且浏览器对每个页面的TCP连接数限制，使得并不是所有图片都能立刻开始下载和显示。因此我们在DOM树构建完成后即可遍历获得所有在设备屏幕高度内的所有图片资源标签，在所有图片标签中添加document.onload事件，在整页加载完成（window.onLoad事件发生）时遍历图片标签并获得之前注册的document.onload事件时间的最大值，该最大值减去navigationStart即认为近似的首屏时间。而对于页面没有图片的页面，我们可以近似认为首屏的加载时间为dom完成的时间。

计算方法：

1.首屏高度图片加载的方法（适用于首屏内容在服务端生成的情况，对于首屏数据需要 通过异步请求获得这种方法就不适用了）

2.图像相似度比较法（通过比较连续截屏 图像的像素点的变化趋势确定首屏时间，通过连续比对的方法只能得出首屏加载完的时间区间断，同时，截图方法比较消耗本地设备的运行资源）

 

 

缺点：占用服务器资源

部分内容来自https://www.jianshu.com/p/f7c866eba4d0?utm_source=oschina-app