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上面的做法。
引言 什么是单页应用程序： 单页应用程序：SPA【Single Page Application】是指所有的功能都在一个html页面上实现 单页应用和多页应用的区别： 单页面应用程序，之所以开发效率高，...性能好，用户体验好 最大的原因就是：页面按需更新 路由的基本使用 定义&作用： 修改地址栏路径时，切换显示匹配的组件 基本使用 固定5个固定的步骤（不用死背，熟能生巧） 下载 VueRouter 模块到当前工程...详情页渲染 ③ 组件缓存，优化性能 配置路由 首先配置两个一级路由 在Vouter.js中 ， 通过导入 并且配置路由信息 import Vue from 'vue' import VueRouter..."#/article">面经 收藏 喜欢 <a href="#/user...组件缓存Keep- alive 问题： 从面经列表 点到 详情页，又点返回，数据重新加载了 但是我们希望回到原来的位置 原因： 当路由被跳转后，原来所看到的组件就被销毁了（会执行组件内的beforeDestroy
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, //是否使用缓存
无状态的意思是每次请求都是独立的，它的执行情况和结果与前面的请求和之后的请求都无直接关系，它不会受前面的请求响应情况直接影响，也不会直接影响后面的请求响应情况。...' # 使用的缓存别名（默认内存缓存，也可以是memcache），此处别名依赖缓存的设置 3....的逻辑 prev_page = '上一页' else: prev_page = '<a href="/custom/?...的逻辑 next_page = '下一页' else: next_page = '<li
浏览器对网站第一次的域名DNS解析查找流程依次为： 浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索 ?...最明显的例子，DNS预解析在某个页面中包含非常多的域名非常有效，如搜索结果页。...这样可以极大的加速（尤其是移动网络环境下）页面的加载。在某些图片较多的页面中，在发起图片加载请求之前预先把域名解析好将会有至少 5% 的图片加载速度提升。...场景 页面中的静态资源在不同的domain下，如CSS、JS、图片等文件 适合在以下场景中使用： 电商网站的商品页大量载入不同domain下的商品图，如淘宝 手机网页 大型网站 js或服务端重定向 指令...HTTPS页面DNS prefetching 下面的例子，该页面只会预解析b.com，而不会预解析a.com、c.com、d.com。
processTpl 函数中，整体思路是正则匹配）经过初步处理后的 html，大致为以下处理过程，整个过程去掉注释注释所有的外联 js 以及删除掉所有的页级 js (当然都收集起来了)注释所有的外联...-- script http://localhost:7101/main.js replaced by import-html-entry --> 由所有 “script” 组成的数组页级的... }); }, })); }));}}embedHTMLCache[url] || (embedHTMLCache[url] = fetch(url)这种使用缓存和给缓存赋值的方式...\s 是匹配所有空白符，包括换行，\S 非空白符，不包括换行 * 匹配前面的子表达式零次或多次 + 匹配前面的子表达式一次或多次 正则表达式后面的全局标记 g 指定将该表达式应用到输入字符串中能够查找到的尽可能多的匹配...匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。 圆括号会有一个副作用，使相关的匹配会被缓存，此时可用 ?: 放在第一个选项前来消除这种副作用。 其中 ?
生态圈火，不断地更新迭代；提供一套美观大方地界面组件；提供一套优雅的 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
避免资源加载引起的阻塞 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，再做渲染 首屏渲染的时机涉及么很多因素
此代码采用了缓存机制，即不用每次都从各个友情链接网站的代码里面去抓取，挺方便的， 然后用你的网址替换上面的“//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://', '' )+">"); });}); 注意修改红色代码
前端的代码已经开源，感兴趣的同学可以自己下载下来，添加一些比较有趣的功能以及进行代码的优化 附-使用 promise 实现前端缓存 （ recommend.vue 中给出示例代码） 接口...// 分类歌单数据 export function getDiscList() { let href = window.location.href let url if (href.includes...歌手详情页、排行榜。...排行榜详情页以及播放器页面，排行榜与歌手页基本一致 不做赘述 首页 image 歌手列表页 image 歌手详情页 image 歌手搜索功能...js创建桌面应用程序的框架，并且可以很简单的实现跨平台，让我们可以更轻松的书写业务逻辑，而不用担心跨平台的问题。
//判断有无配置信息————没有的话，加载且缓存 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缓存文件。
/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）前显示确认对话框。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
