本文目录一览:
spa(单页面)优缺点
SPA 仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。
优点:
用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;
有利于前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;
缺点:
初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;
不利于 SEO:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。
vue 首屏渲染优化有哪些
图片压缩/懒加载
禁止生成 .map 文件
路由懒加载
cdn 引入公共库
SSR服务器渲染
客户端渲染和服务端渲染的区别(转)
服务端渲染 :DOM树在服务端生成,然后返回给前端。
客户端渲染 (SSR):前端去后端取数据生成DOM树。
服务端渲染的优点 :
1、尽量不占用前端的资源,前端这块耗时少,速度快。
2、有利于SEO优化,因为在后端有完整的html页面,所以爬虫更容易爬取信息。
服务端渲染的缺点 :
1、不利于前后端分离,开发的效率降低了。
2、对html的解析,对前端来说加快了速度,但是加大了服务器的压力。
客户端渲染的优点 :
1、前后端分离,开发效率高。
2、用户体验更好,我们将网站做成SPA(单页面应用)或者部分内容做成SPA,当用户点击时,不会形成频繁的跳转。
客户端渲染的缺点 :
1、前端响应速度慢,特别是首屏,这样用户是受不了的。
2、不利于SEO优化,因为爬虫不认识SPA,所以它只是记录了一个页面。
服务端和客户端渲染的区别 :
1、二者本质的区别:是谁来完成了html的完整拼接,服务端渲染是在服务端生成DOM树,客户端渲染是在客户端生成DOM树。
2、响应速度:服务端渲染会加快页面的响应速度,客户端渲染页面的响应速度慢。
3、SEO优化:服务端渲染因为是多个页面,更有利于爬虫爬取信息,客户端渲染不利于SEO优化。
4、开发效率:服务端渲染逻辑分离的不好,不利于前后端分离,开发效率低,客户端渲染是采用前后端分离的方式开发,效率更高,也是大部分业务采取的渲染方式。
直观的区分服务端渲染和客户端渲染:
源码里如果能找到前端页面中的内容文字,那就是在服务端构建的DOM,就是服务端渲染,反之是客户端渲染。
应该使用服务端渲染还是客户端渲染:
我们要根据业务场景去选择渲染的方式。
如果是企业级网站,主要功能是页面展示,它没有复杂的交互,并且需要良好的SEO,那我们应该使用服务端渲染。
如果是后台管理页面,交互性很强,它不需要考虑到SEO,那我们应该使用客户端渲染。
具体使用哪种渲染方式也不是绝对的,现在很多网站使用 服务端渲染和客户端渲染结合 的方式:首屏使用服务端渲染,其他页面使用客户端渲染。这样可以保证首屏的加载速度,也完成了前后端分离。
SPA 的概念
一、什么是SPA(SPA 的概念)
单页 Web 应用 (single-page application 简称为 SPA),简单理解为:仅仅在web页面初始化时加载相应的HTML、JavaScript、CSS,一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换HTML的内(采用的是div切换显示和隐藏),从而实现UI与用户的交互。
二、SPA的优缺点
1、优点:
(1)由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。得益于ajax,我们可以实现无跳转刷新,又多亏了浏览器的histroy机制,我们用hash的变化从而可以实现推动界面变化。
(2)只要使用支持HTML5和CSS3的浏览器就可以执行复杂的SPA,因此,开发人员不必为了写SPA网站而特别学习另一个开发方式,而使用者也不额外安装软件,所以,让开发SPA网页程序的入门和使用门槛降低不少。
2、缺点:
以SPA方式开发的网站不容易管理也不够安全。因为没了一页一页的网页给搜索引擎的爬虫来爬,所以,在搜索引擎最佳化(SEO)的工作上,需要花费额外的功夫。因为没有换页,需要自定义状态来取代传统网页程序以网址来做判断。
spa单页面应用遇上SEO该怎么办
1 按了F5不是理所当然的应该刷新页面么,即使我SPA被刷新了又怎么样呢?也没有改变任何用户习惯,用户不会觉得confused。 2 而是应该让用户慢慢培养SPA不用去按F5的习惯。 3 我感觉需要做的也就是保存个用户登录状态,这个可以存在server的session里,和传统的web应用是一样的,并没有特别之处。