首页
学习
活动
专区
圈层
工具
发布

如何避免 CDN 为 PC 端缓存移动端页面

❝本题摘自于我 github 上的面试每日一题:https://github.com/shfshanyue/Daily-Question,并有大厂面经及内推信息 ❞ 如果 PC 端和移动端是一套代码则不会出现这个问题...「这个问题出现在 PC 端和移动端是两套代码,却共用一个域名。」...使用 nginx 配置如下,根据 UA 判断是否移动端,而走不同的逻辑 (判断UA是否移动端容易出问题) location / { // 默认 PC 端 root /usr/local/...root /usr/local/website/mobile; } index index.html index.htm; } 解决方案通常使用 Vary 响应头,来控制 CDN...Vary: User-Agent 但最好不要出现这种情况,PC 端和移动端如果是两套代码,建议用两个域名,理由如下 nginx 判断是否移动端容易出错 对缓存不友好

2.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动端是时候考虑抛弃jQuery了?

    jQuery确实非常有用,它的初衷就是为诸多浏览器提供统一的接口,避免书写各种条件语句判断当前环境 移动端已经被类似 Safari 和 Chrome 的 webkit 内核浏览器统治了,所以无需再抽象出统一的接口...反而是它庞大的体积,min版的也有90KB 现在很多人建议使用 Zeptojs 来代替,虽然它没有jQuery强大,但是压缩版只有25KB,因为 Zeptojs 拥有很多和 jQuery 一样的接口,代码编写非常方便...但是,Zepto的性能相比jQuery怎么样?...--分别打开jquery和zepto--> <!...和zepto各执行5次,结果: zepto 24 26 27 24 26 jquery 10 11 7 9 9 可以看到,jquery的速度要比zepto快一倍左右了,是否要换掉jquery,就要综合考虑了

    1.1K50

    移动端H5实现上滑分页加载功能

    这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情 前言 想必掘友们应该都知道,pc 端的上下分页的一般都是通过点击页码来实现的。...但在移动端这种方式就不太合适了,移动端一般都是通过向上滑动页面,触底后加载下一页这种方式来实现的。...只要后台有源源不断的数据提供,用户可以一直无限向上滑触底加载下页内容,会有种上瘾停不下来的感觉,让用户有更多时间停留在我们的产品上。 本着这个原因,本文就记录一下整过实现过程。...还有页面交互上的优化,比如上滑触底后调后端接口的时间可以在页面底部放一个加载中的一个 loading 动态效果 这篇文章就记录到这了,下次有时间再写一篇用节流函数对 scroll 优化和防抖函数的作用的文章

    3.9K20

    H5 缓存机制浅析 移动端 Web 加载性能优化

    Cache(AppCache)机制 Indexed Database (IndexedDB) File System API 下面我们首先分析各种缓存机制的原理、用法及特点;然后针对 Anroid 移动端...Web 性能加载优化的需求,看如果利用适当缓存机制来提高 Web 的加载性能。...通过设置资源文件缓存属性,对提高资源文件加载速度,节省流量很有意义,特别是移动网络环境。但问题是:缓存有效时长该如何设置?...对于移动网络,这个请求可能是比较耗时的。有一种说法叫“消灭304”,指的就是优化掉304的请求。...---- 3 移动端 Web 加载性能(缓存)优化 分析完 H5提供的各种缓存机制,回到移动端(针对 Android,可能也适用于 iOS)的场景。

    2.5K20

    前端大牛们都学过哪些东西?

    移动端API API 99移动端知识集合 移动端前端开发知识库 移动前端的一些坑和解决方法(外观表现) 【原】移动web资源整理 zepto 1.0 中文手册 zepto 1.0 中文手册 zepto...页面 社会化 分享功能 百度分享 pc端 JiaThis pc端 社会化分享组件 移动端 ShareSDK 轻松实现社会化功能 移动端 友盟分享 移动端 8....双日历 移动 大气实用jQuery手机移动端日历日期选择插件 jQuery Mobile 移动开发中的日期插件Mobiscroll Date library Datejs sugarjs 10....常用CDN 新浪CDN 百度静态资源公共库 360网站卫士常用前端公共库CDN服务 Bootstrap中文网开源项目免费 CDN 服务 开放静态文件 CDN - 七牛 CDN加速 - jq22 jQuery...CDN Google jQuery CDN 微软CDN 十九.

    5.6K30

    前端UI框架小汇总

    IT派 - {技术青年圈} 持续关注互联网、大数据、人工智能领域 移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui.github.io/#!.../zh-cn 描述:基于vue的移动端UI框架 基于vue 组件库:     ?...基于jQuery 兼容性: 兼容绝大多数移动端设备(兼容Android4.0+、IOS6.0+); 采用 flexbox 布局,因低版本安卓及部分特殊浏览器不兼容flex-basis、...兼容iOS3+ / android2.1+,支持国内主流移动端浏览器,如safari, chrome, UC, qq等。...以上就是汇总到的一些关于移动端UI框架、PC端及混合APP开发UI框架方面的资料。当然,当今前端飞速发展,关于UI框架方面的很多都没有总结和汇总到,希望小伙伴们有了解到的可以留言喔。

    4.3K51

    基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数...vue.js data: page:0, size:10, loadingTextBtn:false, loadingText:"努力加载中...this.loading = false; } }, 这里重要的是判断,当当前页面为0的时候,即第一页的时候,不需要setTimeout定时器,直接请求加载...,当加载更多的时候可以加个定时器。...网上找到很多mint-ui 的loadmore组件来实现上拉加载更多,由于上拉触发相应的加载更多事件,所以当进入页面的时候应该不会自动载入数据,则这里可以加一个获取第一页数据的函数。

    2.8K50

    【面试】1093- 21 道关于性能优化的面试题(附答案)

    缓存利用:缓存Ajax,使用CDN、外部 JavaScript和CSS文件缓存,添加 Expires头,在服务器端配置Etag,减少DNS查找等。...src属性为空,会重新加载当前页面,影响速度和效率,尽量避免在HTML标签中写 Style属性 4、移动端性能如何优化? 优化方式如下。 尽量使用CSS3动画,开启硬件加速。...(5)开启服务器端的Gzip压缩(对文本资源非常有效)。 (6)使用CDN(对公开库共享缓存)。 (7)延长静态资源缓存时间。...(4)图片或者CSS、 JavaScript文件均可使用CDN来加速。 15、如何优化服务器端的接口? 具体方法如下。...HTML5中的data属性有助于插入数据,特别是前、后端的数据交换;jQuery的 data( )方法能够有效地利用HTML5的属性来自动获取数据。 21、哪些方法能提升移动端CSS3动画体验?

    2K20

    21道关于性能优化的面试题(附答案)

    缓存利用:缓存Ajax,使用CDN、外部 JavaScript和CSS文件缓存,添加 Expires头,在服务器端配置Etag,减少DNS查找等。...src属性为空,会重新加载当前页面,影响速度和效率,尽量避免在HTML标签中写 Style属性 4、移动端性能如何优化? 优化方式如下。 尽量使用CSS3动画,开启硬件加速。...(5)开启服务器端的Gzip压缩(对文本资源非常有效)。 (6)使用CDN(对公开库共享缓存)。 (7)延长静态资源缓存时间。...(4)图片或者CSS、 JavaScript文件均可使用CDN来加速。 15、如何优化服务器端的接口? 具体方法如下。...HTML5中的data属性有助于插入数据,特别是前、后端的数据交换;jQuery的 data( )方法能够有效地利用HTML5的属性来自动获取数据。 21、哪些方法能提升移动端CSS3动画体验?

    2.1K20

    jQuery 教程

    您可以使用以下方法: 从 jquery.com 下载 jQuery 库 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery 下载 jQuery 有两个版本的 jQuery 可供下载...jQuery 遍历,意为”移动”,用于根据其相对于其他元素的关系来”查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。 下图展示了一个家族树。...通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。...POST 两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。...实例解析 jQuery AJAX get() 和 post() 方法 jQuery get() 使用 $.get() 方法从服务端异步获取数据 jQuery post() 使用 $.post() 方法从服务端异步获取数据

    19.1K20
    领券