spa spa全称:single-page application(单页应用) 是一种特殊的Web应用。...我们可以直接使用a标签跳转: 小明 小芳 小冬 <a href...js: ? json实例: ? 实现结果: ?...最后,再来谈一谈spa的优缺点 优点: 分离前后端关注点,前端负责view,后端负责model,各司其职; 服务器只接口提供数据,不用展示逻辑和页面合成,提高性能; 同一套后端程序代码,不用修改兼容Web...界面、手机; 用户体验好、快,内容的改变不需要重新加载整个页面 可以缓存较多数据,减少服务器压力 单页应用像网络一样,几乎随处可以访问—不像大多数的桌面应用,用户可以通过任务网络连接和适当的浏览器访问单页应用
layui作为前端页面的基础框架,写了几个小页面,过程中碰到的问题,做了几点零碎总结: 1、使用JS获取当前页面的URL的参数: url:http://localhost:8200/jie/detail.html...tid=1 获取tid的参数值: //js var url_string = window.location.href; var url = new URL(url_string); var... 3、layui的缓存...,session缓存和cookie缓存,一个页面关了就销毁,一个能持久化,可以根据场景选择页面数据共享的方法; 开始以为直接存储key,value,发现怎么存进去的都是空字符串{},原来value支持的是...page='+pageTotal+'" class="laypage-last" title="尾页">尾页', '<a href="/jie/page/2/" class="laypage-next
认证的缓存时间是120秒,即120秒内重复请求可以免认证。...当然不用阅读源码,利用verdaccio提供的中间件扩展,制作一个ExpressJS中间件插件,在插件中做手脚即可。...列表页和详情页的概念真是无处不在 Verdacciol列表页示例 Verdaccio详情页示例 在这两个地方分别拦截2下:第一次是请求方向,匹配到对应的路径后在response对象上标记一下“index...虽然共享同一个事件驱动引擎,但你的JS脚本和网页本身的JS脚本逻辑上处于2个不同的“线程”,比如想要寻找一个dom元素,但不知道元素是否健在,是否有延迟等等问题,不知何时去寻找。...列表页的接口就是请求所有packages列表,详情页其实就做了两件事儿:一是把README.md展示成HTML,二是把package.json的内容罗列出来,这两点可以参考npmjs.com上面的做法。
1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。...="javascript:;" class="btn" data-control="prev">上一张 <a href="javascript:;" class="btn...// }); //上一页,下一页按钮 $('.btn').on('click', function () { if...on('load error', function () { //相当于if(opts.each){ opts.each(); } ,如果有配置each()方法则调用,后面的...}); }; //由于不用具体的对象去调用,因此用$.extend(object)挂载插件
>include/lib/js/common_tpl.js" type="text/javascript"> JS文件加载链接,这里加载的是common_tpl.js文件该文件存放于程序...include/lib/js/目录下,这个JS文件主要用于镶套评论 页面头部插件挂载钩子(主要用于插件挂载一些CSS或者JS文件) heder头部文件到此结束,上面部分一般是不用修改在移植模板或者制作模板的时候,样式文件是必须要修改加载的如果有特效的话...,也要在这里加载一些JS文件的当然也可以在底部加载 设置相关变量,不需要改动$newtab (是否是新窗口打开,后台设置) $value['url'] (导航链接) $current_tab(导航的class类,当前页面的类为current,非当前页的类为
springboot集成了Thymeleaf模板技术,官方推荐使用Thymeleaf来代替jsp,作为前端页面的数据展示。...xmlns:th="http://www.thymeleaf.org" 1、配置信息 # 设置thymeleaf模板引擎的缓存,设置为关闭,默认是true开启的 spring.thymeleaf.cache...------ 编辑 常见属性----从后台取值的时候,使用一下,可用可不用 th:action...'+'当前页是:'+${currentPage}">共120条12页,当前第1页,首页,上一页,下一页,尾页 使用更优雅的方式替拼接字符串 <!
Note: 当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。 History.go(n) 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。...比如:参数为 -1的时候为上一页,参数为 1 的时候为下一页....首先前端用 js 实现路由的缓存功能是很难的,但像 vue-router 那种还好,因为有 vue 框架和虚拟 dom 的技术,可以保存当前页面的数据。...要做缓存功能,首先要知道浏览器的 前进、刷新、回退 这三个操作。...、切换之前的钩子、切换之后的钩子、滚动位置的处理,缓存。
,js引入或代码直接放到页面的底部,在body之后,在html之前。...**缓存优化(max-age) ** 页面的缓存状态是由http协议的header决定的,我们主要使用了max-age(单位S),设置缓存的最长有效时间,使用的是时间长短,例如说我设置max-age=60...,如第二屏,轮播后面的内容,tab页等。...这样每个页面的js和css都会最小化,同时我们也对这些个静态字符串文件进行gzip压缩,当然这些文件会按照版本进行静态存储,以及CDN的缓存。...如果一定要使用js的动画,建议使用:requestAnimationFrame。此外,能不用页面动画的场景尽量不要使用动画,如果一定要使用,可以简化动画渲染的过程。
* * @Query注解里面的value和nativeQuery=true,意思是使用原生的sql查询语句. sql模糊查询like语法,我们在写sql的时候是这样写的 like '%?.../jquery.js"> .../bootstrap-table/src/locale/bootstrap-table-zh-CN.js"> 前端 app.js 代码 $(function () { var searchText = $('.search...x-www-form-urlencoded", method: 'get', striped: false, //是否显示行间隔色 cache: false, //是否使用缓存
浏览器对网站第一次的域名DNS解析查找流程依次为: 浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索 ?...最明显的例子,DNS预解析在某个页面中包含非常多的域名非常有效,如搜索结果页。...这样可以极大的加速(尤其是移动网络环境下)页面的加载。在某些图片较多的页面中,在发起图片加载请求之前预先把域名解析好将会有至少 5% 的图片加载速度提升。...场景 页面中的静态资源在不同的domain下,如CSS、JS、图片等文件 适合在以下场景中使用: 电商网站的商品页大量载入不同domain下的商品图,如淘宝 手机网页 大型网站 js或服务端重定向 指令...HTTPS页面DNS prefetching 下面的例子,该页面只会预解析b.com,而不会预解析a.com、c.com、d.com。
无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不会直接影响后面的请求响应情况。...' # 使用的缓存别名(默认内存缓存,也可以是memcache),此处别名依赖缓存的设置 3....的逻辑 prev_page = '上一页' else: prev_page = '<a href="/custom/?...的逻辑 next_page = '下一页' else: next_page = '<li
生态圈火,不断地更新迭代;提供一套美观大方地界面组件;提供一套优雅的 HTML+CSS 编码规范;让我们的 Web 开发更简单,更快捷;注意:使用 Bootstrap 并不代表不用写 CSS 样式,而是不用写绝大多数大家都会用到的样式准备下载...)宽度都是980;视口的宽度可以通过meta标签设置此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)width:视口的宽度initial-scale:初始化缩放...生态圈火,不断地更新迭代; 提供一套美观大方地界面组件; 提供一套优雅的 HTML+CSS 编码规范; 让我们的 Web 开发更简单,更快捷; 注意: 使用 Bootstrap 并不代表不用写 CSS...样式,而是不用写绝大多数大家都会用到的样式 准备 下载Bootstrap https://github.com/twbs/bootstrap/releases/download/v3.3.6/...)宽度都是980; 视口的宽度可以通过meta标签设置 此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1) width:视口的宽度 initial-scale
此代码采用了缓存机制,即不用每次都从各个友情链接网站的代码里面去抓取,挺方便的, 然后用你的网址替换上面的“//XXXXX部分为需要获取的目标网站网址 例如https://ico.wenytao.com...url=https://www.wenytao.com 网址前面的http://可以加,也可以不加。...但如果是https://头,则必须加上 具体效果可以到网站首页底部或者我的留言板页面的“内页链接”查看详细demo,此favicon图标采用了缓存机制,即不用每次都从各个友情链接网站的代码里面去抓取,代码只需要一小段...js就行了,把这段js加到你网站页脚文件中: 直接放在网站代码里: $("#link-home li a,#linkcat-1 li...url="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '').replace( 'http://', '' )+">"); });}); 注意修改红色代码
避免资源加载引起的阻塞 HTML 页面常常通过 以及 标签引入 CSS 及 JS 文件,在被引用的资源加载期间,浏览器对后续...这样做的好处是,当文件内容发生变化时,文件名必定发生变化,反过来说,当浏览器已经缓存了该路径的文件,则可以推断缓存的文件在服务器侧没有发生变化,浏览器可以直接使用缓存的版本而不用进行缓存协商(通过设置比较长的强制缓存...(目前只在博客的页面大标题上面用了,暂时没有拉取全部文章标题来生成文章页标题的字体文件) 预载下一个页面 最后讲一个比较“取巧”的方法。...前面已经对 CSS、JS 等静态资源通过缓存优化了加载速度,那么 Hexo 博客的 HTML 静态文件加载是否也有优化的空间?这个问题的回答是肯定的。...="a标签指向的 URL">(这会指示浏览器请求该 URL,从而缓存 URL 指向的资源) 这样,在访客点击超链接跳转到博客的内页之前,这个页面的 HTML、CSS 和 JS 文件应该都已经在浏览器的缓存里面了
使用直出的页面,html不再只是一个空壳,而是一个渲染良好的页面,这样用户就可以不用等待JS加载和执行后看到内容,大大减少用户的焦虑感。...关于这块的优化,同构直出本来就是一个CPU密集型的任务,后续可以结合缓存来将CPU密集型任务转为内存密集任务 二次CGI 虽然解决这个问题的方案并不难,但重在我们能在详情页放量前能发现这个常常被忽略的问题...cookie,缓存命中率大大提高) 离线包 css资源、js资源使用离线包是比较想当然的事情,但是在部落转为直出,接入离线包也遇到一些困难。...> 如果使用直出会变成这个样子 <div class="root"...资源已经准备好了,会先执行js,再做渲染,如果没有执行好会先渲染 大部分线上的cdn资源都是有强缓存的,或者有手Q离线包,浏览器解析到script标签时js资源已经准备好,会先执行js,再做渲染 首屏渲染的时机涉及么很多因素
前端的代码已经开源,感兴趣的同学可以自己下载下来,添加一些比较有趣的功能以及进行代码的优化 附-使用 promise 实现前端缓存 ( recommend.vue 中给出示例代码) 接口...// 分类歌单数据 export function getDiscList() { let href = window.location.href let url if (href.includes...歌手详情页、排行榜。...排行榜详情页以及播放器页面,排行榜与歌手页基本一致 不做赘述 首页 image 歌手列表页 image 歌手详情页 image 歌手搜索功能...js创建桌面应用程序的框架,并且可以很简单的实现跨平台,让我们可以更轻松的书写业务逻辑,而不用担心跨平台的问题。
/Public/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http:/...-- <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default...下面的实例演示如何获取选中的标签页面板(tab panel)的索引。...auto plain boolean 当设置为 true 时,就不用背景容器图片来呈现 tab 条。...下面的实例演示如何在关闭标签页面板(tab panel)前显示确认对话框。
//判断有无配置信息————没有的话,加载且缓存 13 //判断有无js文件版本号——没有的话,加载且缓存 14 //加载Nature.LoadJs.js,开始加载其他js 15...}); 33 } else { 34 //走子页面的流程,把子页面(window)作为参数传递进去,以便于和top页面区分。...是否使用自己页的js。true:本页加载js文件。false:使用父页的js文件。...//判断有无js文件版本号——没有的话,加载且缓存 59 //加载Nature.LoadJs.js,开始加载其他js 60 //判断页面是否有jsReady,如果有则开始调用...,用于更新浏览器的js缓存文件。
采用AMP框架不会直接影响站点的SEO排名,但是会直接提升用户体验、搜索引擎印象,间接提升网站在搜索结果页的排名提升。...AMP站点被搜索结果展现、然后用户点击打开后展现的页面是从谷歌缓存获取的AMP页面。...AMP-Cache 给所有符合规范的 MIP 页面提供 CDN 缓存服务,主动提高页面的加载速度。...:如果直接用AMP站点做移动站,没有对应的源对应站,就不用添加。...好处:不用单独给AMP页面设置对应的独立域名,不用添加前面提到的标签属性来强调amp站和源站的对应关系。 解决方案二: 第二种方案就是给站点的AMP站单独绑定对应的独立域名!
通过location.hash可以取到该值,常见的返回顶部也可以利用href=‘#’。改变#后面的内容不会引起页面重新刷新,但是会有历史记录,所以可以后退。...#后面的内容不会提交到服务器。...而我们也知道a标签有一个href属性,如果是哈希路由就不会引发页面的刷新。所以平时也有一种常规操作,返回顶部,就是a标签的href=“#”,就是直接跳转到页面顶部。...于是我们可以写下路由类的代码: html: 1 2 3</a..., history) { this.from = from//保存起点 this.history = history this.list = {} //缓存
领取专属 10元无门槛券
手把手带您无忧上云