想说的话说完了，我们言归正传 为什么webapp体验很差 在我们现在的大多数app中，大家都会发现，基本清一色的使用原生开发，只有在不重要的页面中，才会使用webapp，也就是所谓的h5页面 之所以是h5...其实，理论上来说web页面是可以通过编译器编译编译成native的，然而现实是，谷歌的这帮大佬玩了命的优化，折腾，于是诞生了flutter这种从头再来的产物，这就说明，理论他就是一坨.......当然，值得庆幸的是，web技术的快速发展中，我们可以无限接近，根据我骥某人的钻研，在交互比较复杂h5页面中，我们可以利用以下三点 1、利用css3 2、利用requestAnimationFrame 3...当我们使用了简单的抽屉体验之后，大家就会发现，抽屉中一旦有滚动条就歇菜了，滚动条会和拖动事件冲突， 那么怎么办呢?...其实，细想一下，我们就可以发现，我们可以判定滚动条是否已经到顶部，当滚动条不在顶部的时候，我们就关闭拖动事件，当他在顶部的时候，我们就开启 这样一来，就可以将滚动和拖动事件，变成相当于单线程的事件,判断代码如下
经过验证的 AMP 网页会缓存在 Google 的 AMP 缓存中，从而可以更快速地呈现给用户。...，如 table，frame 等。...大大简化 css，且只能写在 HTML 中，不能调用外部 CSS 文件。 JS 大部分功能不能用了，但很多互动功能也就没了，虽然影响了丰富的交互，但速度提升了速度。...amp 来达成 AMP 页面的，那么我们有必要禁止除百度和谷歌之外的搜索引擎抓取这些 amp 页面 如果百度和谷歌都是共用一套 AMP 页面，那么 robots.txt 可以这样写： User-agent...原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：WordPress秒变谷歌AMP加速移动页面并自动推送
写在前面：网站接入AMP有啥好处？ AMP框架是谷歌推出的一款全新的HTML标准，网页采用HTML-AMP格式可以：规范源码、精简代码、自带谷歌CDN、网页加载速度提升4倍等。...而百度站长平台需要单独进行MIP/AMP验证（类似HTTPS认证），验证通过后，搜索结果展现闪电符号。接入MIP只对百度排名有用，接入AMP对百度、谷歌都有效果！...AMP HTML 上，它只允许使用有限的标签，如body、article这些标签可直接使用，但如script、frame和frameset这样的标签是被限制或禁止使用的，MIP 中也如此。...而如 img 或 video 这样的标签不能直接使用，需要替换成别的标签才能使用，如在 AMP 中需要替换成amp-img，在mip中替换成mip-img。...IFRAME 换成了amp-iframe。 代码中不要写注释。
如何在Google搜索到我的网站?？...站点地图（sitemap）一般分为两种方式来记录，xml格式文件或者txt文件，一般两种文件中包含了该网站的所有链接，可以提交给爬虫去爬取，让搜索引擎更快的去收录网站内容 # 站点地图示例 sitemap.xml...# 提交方式 如何手动提交站点地图给谷歌在我 这篇 文章中已经有介绍了，没看过的小伙伴可以看下 那么如何自动提交呢？...DOMAIN) { console.log(chalk.red('请在运行此文件时指定一个你要进行谷歌推送的域名参数，例：node utils/googlePush.js https://taixingyiji.com...urlsRoot, url); } }) fs.appendFileSync(urlsRoot, '\r\n'); } 在 package.json 文件中修改
、amp-img、amp-pixel、amp-video 组件直接以标签的形式进行使用，如页面中需要加载video、img 使用相应的组件即可，如下： [1510652022173_1946_1510652093440...扩展组件 AMP HTML的一个重要特性就是可扩展性，它提供扩展组件来实现丰富的功能。 官网目前提供的扩展有youtube视频组件、twitter组件、轮播、滚动、instagramd等等。...3.Google AMP Cache Google AMP Cache是一个基于代理机制的内容分发网络（CDN），它会分发所有合格的AMP文件，它会抓取AMP页面并进行缓存，自动提升页面的性能。...AMP加载资源时，最重要的资源最先被加载，images 和 ads 在他们可能被用户看到的情况下才加载，或者在用户快速滚动到他们的位置时加载。...AMP对减少这两个因素进行了优化。预渲染只会下载被遮住的部分资源，而且不会渲染很耗CPU的内容。
这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >> [前言] 现在由于医嘱开立界面需要对新开的输入框进行首行或者尾行的行固定效果，使用的实现方案只能在谷歌浏览器90.0...故需要框架组提供另一套兼容低版本谷歌浏览器的实现方案。...因此我们需要注意的是，在监听页面滚动的过程中，需要将定位父级元素的偏移量也计算在内，可以如下写法： //获取当前元素的offsetTop getOffsetTop(obj) {...= window.document.body && obj !...，直接对该元素进行处理即可，实现如下： /**滚动事件 */ handleScroll() { /** * getBoundingClientRect().top
继续沿着相同方向进行拖动，此时浏览器会寻找当前元素最近的可滚动祖先元素从而意外触发祖先元素的滚动。 同样，动画中红色边框为拥有滚动区域的父元素，蓝色边框为父元素中同样拥有滚动区域的子元素。...我们在子元素区域内进行拖拽时，当子元素滚动到底部（顶部）时，仍然继续往下（上）进行拖动。 原理 上述两种情况相信大家也日常业务开发中碰到过不少次。...如果在上述的范围内，祖先元素中不存在可滚动的元素，表示整个区域实际上是不可滚动的。那么不需要触发任何父元素的意外滚动行为，直接进行 event.preventDefault() 阻止默认。...(parseInt(status, 2) & parseInt(direction, 2)) 为 true 需要进行阻止默认滚动行为。...当然，如果大家对于文章中的内容有什么疑惑或者有更好的解决方案。你可以在评论区留下你的看法，我们可以一起进行讨论，谢谢大家。
本篇讨论基于 Vue.js 的列表无限下拉实践。 我们的目标就是：让列表下拉纵享丝滑，而不是像以往的下拉就 loading 等待的体验。...;& !...想象一下，有一个无线滚动的页面，你不断的下拉，它实际上可能形成了上万个 DOM 元素，每个元素还包含子节点，这样将消耗巨大的性能。 Virtual scrollers 正是来解决这个问题的。...;& vm.searchQuery !...另一个需要注意的是，我们第一次搜索加载了两页的结果，用户就会有一定的滚动空间，这样就可以保持顺畅的感觉。 我们在滚动的事件中也加了防抖函数。
谷歌AMP是由谷歌和30个合作伙伴共同开发的一个开源的HTML框架，旨在加快网页内容在移动设备上的加载速度。...要点 威胁行为者采用的一种新策略是利用谷歌AMP URL作为嵌入其网络钓鱼电子邮件中的链接。这些链接托管在受信任的域中，并且已被证明能够成功地到达企业级员工。...CAPTCHA服务破坏了自动分析，并要求对每个网络钓鱼活动进行手动分析。...谷歌AMP：被滥用作网络钓鱼的合法应用程序 Google AMP是一个Web组件框架，允许用户创建针对移动设备进行优化的网页。...谷歌允许每个网页在谷歌搜索中可见，并可以使用谷歌AMP缓存和谷歌分析，这两种工具都为用户提供了额外的功能来跟踪其他用户在AMP页面上的互动。
优点： 1，amp确实很快捷 2，支持amp功能的搜索引擎（比如谷歌），会优先amp页面，也就是说对seo有利 缺点： 1，对于不支持amp的搜索引擎来说，amp页面内容与原文重复，属于重复文章，可能反而不利于...方案一：网站端判断来源，如果是谷歌的蜘蛛或者百度的蜘蛛就允许amp功能开启（谷歌搜索引擎和百度搜索引擎支持amp） 用百度搜索了下两家搜索引擎的特征，分别是Googlebot和Baiduspider。...> 在调试过程中你可以安个Chrome插件User-Agent Switcher调试过程中来回切换UA会方便许多.感谢尚寂新提到的插件，省了好多力气。...方案二：使用robots.txt来禁止所有搜索引擎来收录amp页面，然后只允许百度或者谷歌来收录amp页面（谷歌搜索引擎和百度搜索引擎支持amp）[只是一种思考，不知道对于seo是否真的有作用] 题外话...故此文只提到谷歌and百度。
---- 《 AMP 开发文档 》 一、框架组成： 谷歌AMP - HTML框架由 AMP HTML、AMP JS、AMP Cache 三大核心组件构成！...尽管 AMP HTML 网页中的大多数标记都是常规 HTML 标记，但部分 HTML 标记替换为了 AMP 专用标记（另请参阅 AMP 规范中的 HTML 标记)。...Google AMP Cache 是一种基于代理的内容交付网络，用于交付所有有效的 AMP 文档。它可提取 AMP HTML 网页，对这些网页进行缓存，并自动改进网页性能。...Google AMP Cache 可以理解为谷歌官方提供的免费CDN服务。...3.使 AMP网页 可被 Google搜索 轻松发现 为网站适配了AMP版本，如何使谷歌搜索引擎知道呢？
无数的网站现在都有AMP版本的页面，许多开发者正在学习使用AMP——在这里，我们和ytkah一起来学习使用WordPress来使用AMP。 谷歌非常重视，这也是他们搜索引擎排名的标准之一。...在这种情况下，谷歌正在使AMP几乎成为许多网站的必需品。在这篇文章中，ytkah将给大家介绍谷歌的加速移动页面项目的详细信息。这包括在您的WordPress站点中调用它的步骤。 ... 尽管 AMP HTML 网页中的大多数标记都是常规 HTML 标记，但部分 HTML 标记替换为了 AMP 专用标记（另请参阅 AMP 规范中的 HTML 标记)。...其他性能技术还包括：将所有 iframe 沙盒化，加载资源之前对网页上每个元素的布局进行预先计算，以及禁用性能缓慢的 CSS 选择器。 ...它可提取 AMP HTML 网页，对这些网页进行缓存，并自动改进网页性能。
mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false replace: true, // 是否直接更换属性值，而不添加备用属性...此外，点击穿透问题也常见，如点击蒙层，蒙层消失后可能会触发蒙层下层元素的点击事件。 解决方案 禁止缩放：通过设置 meta 标签的 user-scalable=no来禁止用户缩放。...flag && (Date.now() - startTime) < 150) { callback && callback();...原因 键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。 ...== '11' && touch.isVertical() && !
今年1月，谷歌宣布了针对AMP缓存网址问题的解决方案，Google将显示该问题并允许您分享Google AMP网址，而不是发布商的网址。...例如，Google不会显示http://google.com/amp网址，而会显示发布商的真实网址 - 在本例中为foodnetwork.com。...谷歌在技术上解释了这是如何工作的。这是一个早期测试版： Chrome团队已经为开发人员建立了足够的Signed Exchange支持来尝试。...如果有签名的交易所可用，Google链接不会链接到Google的AMP缓存中提供的AMP页面，而是链接到Google缓存中提供的已签名的AMP页面。...不知道百度MIP是否也会跟着Google的脚步，对MIP显示网址也进行优化。
说到 MIP 那么就不能不提谷歌的 AMP，谷歌的 AMP 推出的比百度 MIP 早了不少，相对来说是个很成熟的网页加速技术的存在了，并且 WordPress 官方专门有 AMP 改造插件。...具体大家可以参考【谷歌 AMP，百度 MIP 都是啥情况？】、【什么是 MIP？】...、【时隔半年多，本博客借助 Accelerated Mobile Pages 插件，再次启用 AMP 适配】文章了解，无论是谷歌 AMP 还是百度 MIP 其实都是技术实现的收益，非 CDN 收益。...MIP/AMP 是一种开源的网页开发规范，MIP/AMP 的 JS 都用百度和谷歌官方的，方便了达到浏览器公用缓存的效果！...明月感觉这要从多个方面来判断选择了，谷歌 AMP 因为众所周知的原因，国内站点就不要考虑了，我们今天就拿百度 MIP 为主要方向给大家分析一下。 ?
Google AMP 计划（Google’s Accelerated Mobile Pages Project， Google移动网页加速计划，一种用于提升移动网页加载速度的技术，谷歌声称AMP网页载入的平均速度是正常网页的...有关AMP的问题 Google AMP是Google用来和Facebook, Snapchat 和Apple News这些移动内容分发平台进行竞争的手段。...AMP是谷歌搜索引擎决定网站排名顺序的因素之一，因此未使用AMP技术的媒体网站不太可能出现在搜索结果的重要轮播位置。这让Google更能决定哪些内容可以触达哪些用户，但却很难把控生产内容的人群。...因此，这个计划将会使得结合AMP服务的文章广告以最小化的HTML广告展现给用户。这会提高用户体验，甚至会鼓励用户更多与文章中的广告进行交互。...然而，AMP还没能解决媒体发行商们的变现问题，这让谷歌在互联网上获得了更多的控制权。 静观AMP会如何持续发展，是一件很有意思的事情。在未来，这项技术将会影响到媒体发行行业之外的领域，比如电子商务等。
---- 我们在处理业务的时候，偶尔会因为某些非抵抗力因素，需要对浏览器的滚动条进行处理，以提升产品的体验。...那我们可以通过下面的方式进行处理： 1. overflow: hidden 隐藏滚动条 overflow: hidden 这是一个老生常谈，但是实用性很强的知识点。...height: 200px; margin: 20px auto; border: 1px solid #f00; overflow: scroll; color: #fff; /* 针对谷歌...，Safari 和 Opera */ &::-webkit-scrollbar { display: none; } -ms-overflow-style: none; /...* IE 和 Edge */ scrollbar-width: none; /* Firefox */ } 代码片段 案例中，你可以左右滚动，查看滚动的距离 读者可以根据业务场景使用不同的方案
Typecho的评论默认使用的是Gravata头像，每次页面打开总是卡在gravatar.com的链接，虽然匹配了QQ邮箱调用QQ头像的功能，但是对于非QQ邮箱调用的依然是Gravatar头像，就对头像源进行了替换...$size; $url .= '&r=' . $rating; $url .= '&d=' ....$size; $url .= '&r=' . $rating; $url .= '&d=' ....https://cdn.v2ex.com/gravatar/'); 二、分享几个Gravatar头像CDN加速服务器 1、极客族Gravatar CDN加速 这个就不多说了，大家去它的官网看看，还提供了谷歌字体等...3、中科大的Gravatar头像加速 中科大的就不说了，免费提供了不少公益国内CDN加速服务，如谷歌字体CDN加速等。
一、go实现数据库目的 了解数据是如何在内存和磁盘存储的 数据是怎么移动到磁盘 主键是如何保持唯一性 索引是如何形成 如何进行全表遍历 熟悉Go语言对内存以及文件操作 二、数据库选择SQLite 选择SQLite...输出是sqlite虚拟机字节码（本质上是一个可以在数据库上操作的编译程序） 后端：VM将前端生成的字节作为指令，然后对一个表或者多个表或索引进行操作，每一个表或者索引都存储在B树中，VM本质上时指令的分支选择语句...雷普勒 启动sqlite，会有一个读写命令循环： main函数将有一个无限循环来打印提示，获取一行输入，然后处理该行输入：...= nil && err !...如果每一个节点的大小固定（如4k，正如在sqlite中那样），那么可以进一步提高内部节点的度，降低树的深度。
serviceParam: data.data, // 事件数据 }] } tracker(params) } 可以看到上述方法，简单的处理了一下数据并调取接口即可，可以适用大部分埋点如...;& (elemBottom <= window.innerHeight); return isVisible; } // 生成随机函数属性名 const createFunName...isVisible = elemTop amp;& elemBottom >= 0 即可或自行调整。...track 埋点事件逻辑 click 和 scroll 就不必多说，监听点击和滚动事件。beforeunload 是页面离开前的一个事件，可以用这个替代我们前面说的路由钩子守卫。...再比如在 unbind 中我们需要处理一些特殊情况，如整个指令周期下来没有触发埋点方法，则要在解绑时候强行触发一次。并且要移除未触发的事件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
