首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一文讲解前端路由、后端路由、单页面应用、多页面应用

前端路由访问一个新页面的时候仅仅是变换了一路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。但是页面使用浏览器自带的刷新和前进后退前端路由就会重新获取资源,这将造成较大的资源浪费。...SEO角度讲单页面应用天生对SEO不友好,因为整个页面都是通过JS渲染的,搜索引擎爬虫只能抓取到一个根节点,但是后端路由是经过后端自带的模板框架渲染的(ejs,jsp)已经服务器拼接好了HTML对搜索引擎蜘蛛会更倾向与后端路由...,如果测试有误对漏掉一些BUG很可能影响后续功能 体积较大,首次加载时间较长,首页白屏问题 多页面应用 优势: 逻辑清楚页面直接几乎没有相互影响 单个页面体积小,加载速度快 劣势: 代码冗余 页面切换体验不好...方案的选择要根据业务而定,如果是面向客户的产品(toC)推荐使用多页面后端路由,如果是面向企业的产品(ToB)推荐使用单页面前端路由 2.如何解决SEO和首页白屏的问题 首先要知道客户端渲染无法解决此问题...,我们需要的是保证大部分三大框架优点的同时解决此问题,如果你们网站是纯静态的推荐使用预渲染,如果是根据AJAX动态更新的推荐使用NextJs/NuxtJs等服务器渲染框架 3.页面传值问题 基本分为通过

2.4K20

WKWebView

可以使用stopLoading方法来停止页面加载,使用loading属性来查看是否正在加载。 要允许用户Web历史页面前进或者后退,要为按钮设置goBack或者goForward的动作。...当用户不能在某个方向上再移动时,使用canGoBack或者canGoForward来禁用按钮。 默认情况,Web视图会自动将出现在Web内容的电话号码转换成电话链接。...指定的因子缩放页面内容,并将结果居中指定的点上。 导航 allowsBackForwardNavigationGestures。布尔值,指示水平滑动手势是否会触发后退列表导航,默认为NO。...网页视图的后退列表,即之前访问过的web页面的列表。 canGoBack。布尔值,指示后退列表是否有可被导航到的后退项。 canGoForward。布尔值,指示后退列表是否有可被导航到的前进项。...布尔值,用于确定是否连接可以显示链接目标的预览。 - goBack。导航到后退列表的后腿项。 - goForward。导航到后退列表的前进项

5.9K20
您找到你想要的搜索结果了吗?
是的
没有找到

ionic监听android返回键实现“再按一次退出”功能

android平台上的app,页面时经常会遇到“再按一次退出app”的功能,避免只返回键就退出app提升体验优化。...1、这个功能需要我们用到ionic提供的registerBackButtonAction方法(注册硬件后退按钮动作) registerBackButtonAction(callback, priority...如果我们不想注册返回按钮影响所有页面,就要将返回函数再调用。 例如:如果一个上拉菜单已经显示,后退按钮应该关闭上拉菜单,不是返回一个页面视图或关闭一个打开的模型。...所以我们要实现“再按一次退出app”的功能,可以将优先级priority设为101 2、代码实现 js angular.module("app").run(["$rootScope", "$ionicPlatform...,是否是project, mission,mine, message这几个主页面 function isExitPage() { let path = $location.path(),

1.8K20

JSP 防止网页刷新重复提交数据

网页如何防止刷新重复提交与如何防止后退的解决方法 提交后禁用提交按钮(大部分人都是这样做的) 如果客户提交后,F5刷新怎么办?...(当然,这是在你的客户端启用了JavaScript功能的条件。) 如果客户后退,怎么办?...后来,看到竟然有那么多的人想要禁用这个后退按钮,我也就释然(想要禁用的只有后退按钮,不包括浏览器的前进按钮)。因为默认情况,用户提交表单之后可以通过后退按钮返回表单页面不是使用“编辑”按钮!)...它强制浏览器重新访问服务器下载页面不是从缓存读取页面。使用这种方法时,编程者的主要任务是创建一个会话级的变量,通过这个变量确定用户是否仍旧可以查看那个不适合通过后退按钮访问的页面。...但如果是Intranet环境,管理员可以控制用户使用哪种浏览器,我想还是有人会使用这种方法。     三、其他方法     接下来我们要讨论的方法以后退按钮本身为中心,不是浏览器缓存。

11.5K20

AsyncTask.cancel()的结束问题

用户可能会有这么一个操作,它在一个商品(说说等)列表,点击一个列表项,进入到相应的详情界面,这时候,我们会开启一个异步任务来获取网络数据,但是网络差的情况, 用户可能就不愿意等了,立马后退按钮回到列表...,点击下一个别的列表项进入详情界面,发现加载太慢,又按后退键,如此反复,那么就导致此时有多个异步任务执行,或者出现OOM问题,或者出现异步任务等待问题。...那么,作为开发者,我们对应的解决方案,便是在用户详情界面退出按钮退回到上一个界面的时候,把没有执行完的异步任务给结束掉。...这取决于你去检查AsyncTask是否已经取消,之后决定是否终止你的操作。对于mayInterruptIfRunning——它所作的只是向运行的线程发出interrupt()调用。...在这种情况,你的线程是不可中断的,也就不会终止该线程。 那么该如何结束线程呢?

72450

前端成神之路-WebAPIs04

04 - Web APIs 学习目标: 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件...使用keyCode属性判断用户哪个键 // 键盘事件对象的keyCode属性可以得到相应键的ASCII码值 document.addEventListener...1.2.4. window对象的常见事件 页面(窗口)加载事件(2种) 第1种 ?...这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。...同步任务指的是: 主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务; 异步任务指的是: 不进入主线程、进入”任务队列”的任务,当主线程的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行

1.5K10

js监听手机端点击物理返回键或js监听pc端点击浏览器返回键

之前项目中遇到一个问题,就是微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上的那个返回按钮的操作了...,但是这个物理返回键的监听好像没有直接的办法进行,所以有人就想到了曲线的办法 原理: 页面加载完成时,调用history.pushState写入一个指定状态STATE,并监听window.onpopstate...; 当onpopstate被触发时,检查event.state是否等于STATE,如果相等,表示页面发生了后退返回键或者浏览器的后退按钮),则把这次行为当作是返回键被下了(把点击浏览器的后退按钮也误算进来了...press press'); });  具体使用的时候,也有一些问题: 因为这个是实现利用histroy.pushState写入了一个指定状态STATE,你点击一次后,这个写入的状态就没有了,如果你没有后退页面...vue引入外部js,请参考 http://www.cnblogs.com/zhuchenglin/p/7455203.html 然后vue定义一个load_xback 方法 load_xback

9.2K10

Jvm对象回收算法-JVM(九)

Jvm参数设置-JVM(八) 一、老年代分配担保机制 这个机制的目的是为了提升效率,minorGC之前,会有三次判断,之后再次minorGC速度会很快。...SoftReferenceuser = new SoftReference(new User()); 软引用在实际场景很重要,例如浏览器后退按钮,这个后退是重新加载还是从缓存里取,这要看实际应用场景。...1)如果一个浏览器进入新页面就内容回收,则需要重新加载。 2)如果浏览页面内存很大,放在内存会内存溢出。 3、弱引用GC每次会直接回收。...四、finalize()方法最终判断对象是否存活 当对象背回收之前,会判断这个对象是否覆盖了finalize方法,如果覆盖了,回收之前则会执行这个方法,不回收则不执行。...(不推荐使用) 五、如何判断一个类是无用的类 方法区如果发生回收的条件,必须这个类是无用的类: 1、该类所有对象实例都被回收,也就是java堆不存在该类任何实例。

9920

History API与浏览器历史堆栈管理

如今,移动端开发HTML5规范给我们提供了一个History接口,使用该接口可以自由操纵历史记录。...最后保证商品34图片详情页或评论页可以顺利后退至最初的商品列表页。 上文中加粗的“后退”,意味着使用浏览器后退按钮,或者使用手机自带的返回,再或者使用页面上提供的后退按钮。...掌握这个规律,就知道如何维护历史记录,就知道什么状态需要pushState。回到最初的需求,产品经理规定从商品34的评论页,后退按钮可以到达最初的列表页,但是他并没有详细规定如何后退。...为了构建这样的历史记录栈,页面(即列表页)需要额外添加两条历史记录。...} }) }; 在此处实现,通过isScrollXClick变量判断是否点击的是推荐商品,如果不是则需要执行back操作,下移指针。

2.7K50

「Web编程API」- 04

三个事件的执行顺序 keydown -- keypress -- keyup 1.1.2 键盘事件对象 使用keyCode属性判断用户哪个键 // 键盘事件对象的keyCode...if (e.keyCode === 65) { alert('您的a键'); } else { alert('您没有a键') } })...顶级对象window 1.2.4. window对象的常见事件 页面(窗口)加载事件(2种) 第1种 window.onload 是窗口 (页面加载事件,当文档内容完全加载完成会触发该事件(包括图像...这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。...同步任务指的是:主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务; 异步任务指的是:不进入主线程、进入”任务队列”的任务,当主线程的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行

86920

C# 设计模式 责任链

Request(str); } } 后退按钮使用责任链 我看到堆栈炸了有人问我,为什么一后退就炸。...我看了他的源代码,他每个页面都把后退按钮点击事件+=他的方法。 我们可以使用UWP的后退按钮,但是需要小心,在哪些处理需要知道,不可以每个需要处理都添加事件。...那么如何添加后退按钮,才可以需要后退的时候进行后退,可以用到上面说的设计,添加一个链,需要做一个类,如果直接写,看起来比较难。...我之前写的游戏win10 uwp 商业游戏进入游戏时,用户返回按钮,需要返回欢迎界面,那么这时候就需要添加后退的处理。...当然自己添加的处理也是需要判断当前是否已经有权限比他高的进行处理,如果有,就不处理。这样写就可以游戏进行返回。

51630

AJAX常见面试问题

格式:{} 与 [] 结合拼接的JSON串 发送请求删除数据,后台会返回处理的结果,前台根据返回的结果判断是否成功,然后处理页面元素。...轮播图的实现思路 第一种: 把图片名称顺序取好名字,利用定时器,每隔多少秒,更换图片的路径 第二种: 利用无缝滚动的技术,把图片都放入页面,定时器进行scroll滚动,判断滚动距离取余(%) 图片宽度等于...动态更新页面的情况,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录的静态页面。...一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是Ajax应用程序,这将无法实现。...异步加载(async)JS文件,允许页面内容异步加载,仅适用于外部脚本。 延迟加载(defer)属性规定是否对脚本执行进行延迟,直到页面加载为止。 25.如果对一个js对象进行深度拷贝?

1.8K20

C# 设计模式 责任链 后退按钮使用责任链

Request(str); } } 后退按钮使用责任链 我看到堆栈炸了有人问我,为什么一后退就炸。...我看了他的源代码,他每个页面都把后退按钮点击事件+=他的方法。 我们可以使用UWP的后退按钮,但是需要小心,在哪些处理需要知道,不可以每个需要处理都添加事件。...那么如何添加后退按钮,才可以需要后退的时候进行后退,可以用到上面说的设计,添加一个链,需要做一个类,如果直接写,看起来比较难。...我之前写的游戏win10 uwp 商业游戏进入游戏时,用户返回按钮,需要返回欢迎界面,那么这时候就需要添加后退的处理。...当然自己添加的处理也是需要判断当前是否已经有权限比他高的进行处理,如果有,就不处理。这样写就可以游戏进行返回。

89010

python+Selenium自动化测试——输入,点击操作

(百度一)://*[@id=”su”] 5)搜索框输入“胡歌”,点击百度一按钮 6)搜索结果列表判断是否存在“胡歌的新浪微博”这个链接 7)退出浏览器,结束测试 【注】chrome获取XPath...2)点击左上角箭头按钮(或Ctrl + Shift + C),此时可以页面上移动光标,查看对应的代码,如移动到百度搜索框,显示如下: ? 点击一,对应代码就会选中 ?...(百度一)://*[@id="su"] 5)搜索框输入“胡歌”,点击百度一按钮 6)搜索结果列表判断是否存在“胡歌的新浪微博”这个链接 7)退出浏览器,结束测试 ''' driver =...time.sleep(2) # 等待2秒 # 通过元素XPath来确定该元素是否显示结果列表,从而判断“壁纸”这个链接是否显示结果列表 # find_element_by_link_text当找不到此链接时报错...1、刷新当前页面 .refresh() # 刷新当前页面 driver.refresh() 2、获取本页面的URL .current_url 用处: 一般URL可以帮助我们判断跳转的页面是否正确

3.4K20

JavaScript 高级程序设计(第 4 版)- BOM

# 导航与打开新窗口 window.open()可以用于导航到指定URL,也可以用于打开新浏览器窗口 接收四个参数:要加载的URL、目标窗口、特性字符串和表示新窗口浏览器历史记录是否代替当前加载页面的布尔值...,这种连接一旦断开就无法恢复) 安全限制 弹出窗口被在线广告滥用,浏览器对此进行了一些限制 在用户操作西安才允许创建弹窗 网页加载过程调用window.open()没有效果,还可能向用户显示错误 弹窗通常可能在鼠标点击或下键盘某个键的情况才能打开...confirm: 确认框有两个按钮:“Cancel”(取消)和“OK”(确定),用户通过单击不同的按钮表明希望接下来执行什么操作,根据confirm()方法的返回值判断点击项,true->OK、false...URL 如果不希望增加历史记录,可以使用replace()方法,重定向后后退按钮是禁用状态 reload() 能重新加载的当前显示的页面。...hashchange 会在页面 URL 的散列变化时被触发,开发者可以在此时执行某些操作。 状态管理 API 则可以让开发者改变浏览器 URL 不会加载页面

1.2K10

大前端开发的路由管理之二:web篇

(); // 前进一页history.back(); // 后退一页         H5规范引入了三个新的API, // 指定的名称和URL(如果提供该参数)将数据...单页应用能改变URL的操作其实可以归为以下几种:         1. 点击浏览器的前进或后退按钮;         2. 点击 a 标签;         3....,服务器上不存在该页面,所以会出现404。...memeory模式的路由信息保存在内存,浏览器的前进后退操作无效,更适合运用在单机应用。         ...----         至此,我们了解到了web路由是如何去实现路由管理的,那么,就请期待我们下一篇文章《大前端开发的路由管理之三:Android篇》吧,下篇文章将为大家揭秘Android端是如何去做路由管理的

1.5K20

pjax使用小结

pjax 结合 pushState 和 ajax 技术, 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面,这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。...不使用pjax 使用pjax 优点: 减轻服务端压力 按需请求,每次只需加载页面的部分内容,不用重复加载一些公共的资源文件和不变的页面结构,大大减小了数据请求量,以减轻对服务器的带宽和性能压力,还大大提升了页面加载速度...( pjax 加载页面前会把原页面的内容缓存起来,缓存加载后其中的脚本会再次执行 ) version 是一个函数,返回当前页面的pjax-version,即页面 <meta http-equiv=...使用鼠标滚轮点击(新标签页打开) // 点击超链接的同时Shift、Ctrl、Alt和Meta(Windows键盘是Windows键,苹果机是Cmd键) // 作用分别代表新窗口打开...pjax.js 默认会在请求头加入 X_PJAX 字段,并置为 true,所以以此来判断是否 pjax 请求。对于普通的请求使用常规的模版,pjax 请求则使用空模版或者特定的模版。

2.8K40
领券