alienzhou
alienzhou

【PWA学习与实践】(10)使用Resource Hint提升页面加载性能与体验

《PWA学习与实践》系列文章已整理至 gitbook - PWA学习手册，文字内容已同步至 learning-pwa-ebook。转载请注明作者与出处。

本文是《PWA学习与实践》系列的第十篇文章。也许你还没有听说过或不了解Resource Hint，但是通过本文，你会快速学习到这一件页面加载性能利器。本系列相关demo的代码都可以在github repo中找到。

PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。

对之前的文章感兴趣的话，可以从这里找到：

  • 第一篇：2018，开始你的PWA学习之旅
  • 第二篇：10分钟学会使用Manifest，让你的WebApp更“Native”
  • 第三篇：从今天起，让你的WebApp离线可用
  • 第四篇：TroubleShooting: 解决FireBase login验证失败问题
  • 第五篇：与你的用户保持联系: Web Push功能
  • 第六篇：How to Debug? 在chrome中调试你的PWA
  • 第七篇：增强交互：使用Notification API来进行提醒
  • 第八篇：使用Service Worker进行后台数据同步
  • 第九篇：PWA实践中的问题与解决方案

引言

我们知道，在没有缓存的情况下，无论是HTML、javascript还是一些API数据，页面的每一个请求都需要从客户端发起后经由服务端返回。在这种情况下，我们每一次涉及远程请求的交互（打开一个页面、查询列表数据、动态加载js脚本等）都会有网络延迟。如果我们能够预测或指定页面预先进行一些网络操作，例如DNS解析或者预加载资源，那么当我们在之后的操作中涉及到这部分资源时，加载会更迅速，交互也会更加流畅。

当然，目前已经有一些技术手段来帮助我们实现资源的预加载，例如常见的使用XMLHttpRequest来获取资源并进行缓存。然而，这些技术都是应用层面的，并非Web标准，某些需求也无法准确实现。同时，在性能方面也存在着问题。好在目前已有相关的Web标准（Resource Hint）涉及到这一部分，通过它，可以在浏览器原生层面实现这些功能，同时提供性能保证。下面我们来了解一下Resource Hint相关技术。

1. Resource Hint

Resource Hint是一系列相关标准，来告诉浏览器哪些源（origin）下的资源我们的Web App想要获取，哪些资源在之后的操作或浏览时需要被使用，以便让浏览器能够进行一些预先连接或预先加载等操作。Resource Hint有DNS Prefetch、Preconnect、Prefetch和Prerender这四种。

1.1. DNS Prefetch

当我们在注重前端性能优化时，可能会忽略了DNS解析。然而DNS的解析也是有耗时的。在Chrome的Timing Breakdown Phase中，第三阶段就是DNS查询。DNS Prefetch就是帮助我们告知浏览器，某个源下的资源在之后会要被获取，这样浏览器就会（Should）尽早解析它。

Resource Hint主要通过使用link标签。rel属性确定类型，href属性则指定相应的源或资源URL。DNS Prefetch可以像下面这样使用：

1.2. Preconnect

我们知道，建立连接不仅需要DNS查询，还需要进行TCP协议握手，有些还会有TLS/SSL协议，这些都会导致连接的耗时。因此，使用Preconnect可以帮助你告诉浏览器：“我有一些资源会用到某个源，可以帮我预先建立连接。”

根据规范，当你使用Preconnect时，浏览器大致做了如下处理：

  • 首先，解析Preconnect的URL
  • 其次，根据当前link元素中的属性进行cors的设置
  • 默认先将credential设为true；如果cors为Anonymous并且存在跨域，则将credential置为false
  • 最后进行连接

使用Preconnect只需要将rel属性设为preconnect即可：

当然，你也可以设置CORS

需要注意的是，标准并没有硬性规定浏览器一定要（而是SHOULD）完成整个连接过程，浏览器可以视情况完成部分工作。

1.3. Prefetch

你可以把Prefetch理解为资源预获取。一般来说，可以用Prefetch来指定在紧接着之后的操作或浏览中需要使用到的资源，让浏览器提前获取。由于仅仅是提前获取资源，因此浏览器不会对资源进行预处理，并且像CSS样式表、JavaScript脚本这样的资源是不会自动执行并应用于当前文档的。

需要注意的是，和DNS Prefetch、Preconnect使用不太一样的地方是，Prefetch有一个as的可选属性，用来指定获取资源的类型。由于不同的资源类型会具有不同的优先级、CSP、请求头等，因此该属性很重要。下表列出了一些常用资源的as属性值：

资源使用者 写法

浏览器首先会去获取nextpage.js，然后获取并执行current.js，最后，遇到使用nextpage.js资源的script标签时，将已经获取的nextpage.js执行。由于我们会将script标签置于body底部来保证性能，因此可以考虑在head标签中添加这些资源的Preload来加速页面的加载与渲染。

更进一步，我们还可以监听Preload的情况，并触发自定以操作

正如在引言中所提到的，在过去如果我们想预加载一些资源都会用一些应用层面的技术手段，但往往会遇到两个问题：

  • 我们需要先获取资源，然后在适当时执行，但两者并不易于分离
  • 无论哪种技术实现，都会带来一定的性能与体验损伤

Preload（包括前文提到的Prefetch等RHL）给我们带来的价值就是从浏览器层面很好地将资源的加载与执行分离了，并在浏览器层面来保证良好的性能体验。

看到这里，也许你会疑惑，都是会预获取资源，都是资源的获取与执行分离，那么Preload与Prefetch有什么区别呢？

这是它最容易与Prefetch混淆的地方。在标准里有这么一段话解释两者区别：

The application can use the preload keyword to initiate early, high-priority, and non-render-blocking fetch of a CSS resource that can then be applied by the application at appropriate time

与Prefetch相比，Preload会强制浏览器立即获取资源，并且该请求具有较高的优先级（mandatory and high-priority），因此建议对一些当前页面会马上用到资源使用Preload；相对的，Prefetch的资源获取则是可选与较低优先级的，其是否获取完全取决于浏览器的决定，适用于预获取将来可能会用到的资源。

为了节省不必要的带宽消耗，如果Preload的资源在3s内没有被使用，Chrome控制台会出现类似下图的警告。这时你就需要仔细思考，该资源是否有必要Preload了。

更多Preload与Prefetch的细节差异可以看这里 —— Preload, Prefetch And Priorities in Chrome。

3. 写在最后

本文介绍了如何使用Resource Hint（以及Preload）来提升页面加载性能与体验，简单来说：

  • DNS Prefetch 可以帮助我们进行DNS预查询；
  • Preconnect 可以帮助我们进行预连接，例如在一些重定向技术中，可以让浏览器和最终目标源更早建立连接；
  • Prefetch 可以帮助我们预先获取所需资源（并且不用担心该资源会被执行），例如我们可以根据用户行为猜测其下一步操作，然后动态预获取所需资源；
  • Prerender 则会更进一步，不仅获取资源，还会预加载（执行）部分资源，因此如果我们Prerender下一个页面，打开该页面时会让用户感觉非常流畅；
  • Preload 则像是 Prefetch的升级版，会强制立即高优获取资源，非常适合Preload（尽早获取）一些关键渲染路径中的资源。

虽然，大部分PWA相关资料中并不会提及Resource Hint，但是正如我在第一篇文章中提到的

PWA本身其实是一个概念集合，它不是指某一项技术，而是通过一系列的Web技术与Web标准来优化Web App的安全、性能和体验。

Resource Hint显然符合这一点。

我们不应该将PWA局限在Service Worker离线缓存、提醒通知这些常见的PWA内容中，希望读者也能开阔思维，理解PWA背后的概念与思想。因此，在后续文章中我也会介绍前端存储(sessionStorage/localStorage/indexDB)、HTTP/2.0以及PWA进展等相关内容。

在下一篇里，我们会一起来学习Google开源的PWA离线工具集 —— workbox。通过workbox，我们可以学习各类离线策略，并且了解一些生产环境中需要考虑的问题。部分开源PWA解决方案也是基于workbox进行封装的。

《PWA学习与实践》系列

  • 第一篇：2018，开始你的PWA学习之旅
  • 第二篇：10分钟学会使用Manifest，让你的WebApp更“Native”
  • 第三篇：从今天起，让你的WebApp离线可用
  • 第四篇：TroubleShooting: 解决FireBase login验证失败问题
  • 第五篇：与你的用户保持联系: Web Push功能
  • 第六篇：How to Debug? 在chrome中调试你的PWA
  • 第七篇：增强交互：使用Notification API来进行提醒
  • 第八篇：使用Service Worker进行后台数据同步
  • 第九篇：PWA实践中的问题与解决方案
  • 第十篇：Resource Hint - 提升页面加载性能与体验（本文）
  • 第十一篇：从PWA离线工具集workbox中学习各类离线策略（写作中…）

参考资料

  • Resource Hints W3C Working Draft 15 January 2018
  • Preload W3C Candidate Recommendation 26 October 2017
  • Preload, Prefetch And Priorities in Chrome
  • Web Linking
  • Page Visibility Level 2 W3C Proposed Recommendation 17 October 2017
  • CORS settings attributes
  • Content Security Policy Level 3 W3C Working Draft, 13 September 2016

你可能感兴趣的:(pwa,frontend)

  • Ubuntu安装LAMP L_h1 测试ubuntulinux
    在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
  • 塔能科技物联运维平台及城市照明市场竞争力分析 塔能物联运维 大数据
    关于塔能科技的物联运维平台，就其在城市照明领域所具备的市场竞争力而言，可以从技术架构层面、行业适配的实际情况、市场策略方面以及所面临的种种挑战等不同角度展开剖析。一、物联运维平台的核心竞争力1.技术架构优势-全协议兼容的物联网接入能力其能够适配诸如LPWAN（涵盖LoRa、NB-IoT等）、4G/5G、Zigbee这类多种多样的协议，并且可以同时接入像照明设备、环境监测仪器以及电力设施等各不相同类
  • Guava教程：Google工程师的“Java糖果罐“ zhysunny Java类库guavajava
    目录Guava是什么？6颗最甜的Guava"糖果"1️⃣集合工具：比JDK更聪明的容器2️⃣不可变集合：防御式编程利器3️⃣函数式编程：让Java也能优雅4️⃣字符串处理：比ApacheCommons更流畅5️⃣缓存工具：比HashMap更专业6️⃣原生类型处理：告别int与Integer的纠结Guavavs原生JDK对比Guava最佳实践1.防御性编程2.优雅的参数校验3.Stopwatch计时
  • RAPIProtocol.sys RAMBODSK.SYS QX2006.sys Q57W2K.SYS pxhelper.sys pwacp.sys ptuc_prt.sys a***0738 windows游戏
    在使用电脑系统时经常会出现丢失找不到某些文件的情况，由于很多常用软件都是采用MicrosoftVisualStudio编写的，所以这类软件的运行需要依赖微软VisualC++运行库，比如像QQ、迅雷、Adobe软件等等，如果没有安装VC++运行库或者安装的版本不完整，就可能会导致这些软件启动时报错，提示缺少库文件。如果我们遇到关于文件在系统使用过程中提示缺少找不到的情况，如果文件是属于运行库文件的
  • 深度解析：在Odoo 18中基于原生Owl框架为PWA定制功能丰富的底部导航栏 源力祁老师 odoo开发实践学习方法开发语言自动化
    本文旨在提供一个从架构设计、核心功能实现到高级用户体验优化的全面指南，详细阐述如何在Odoo18中，完全利用其原生的Owl前端框架，为渐进式网络应用（PWA）从零开始开发一个功能完备、数据驱动且高度可定制的底部导航栏。我们将深入探讨组件注入、路由集成、后端实时通信、动态权限渲染、全局状态管理及PWA离线生命周期等关键技术领域。第一部分：架构设计与核心组件构建本部分将奠定整个项目的基础，阐述导航栏O
  • github上的学习材料三：前端入门资源汇总 X-Prince JS生活Git
    本篇转载自：https://idoras.com/frontend-resources/前言前端无疑是2016年最火热的技术，没有之一。各种前端mvc框架层出不穷，angularjs，vue，react，前端组件化开发概念已经深入人心。前端工资已经比手机端开发还要高了。作为个人站长，学习下前端设计也是有必要的，一来有些小的设计问题可以自己解决，同时还能提高自己的审美，提高网站的ui设计水平。必备基
  • 【AppSo】页面还原 产品大白10086
    一、原型图还原助教大大，Axure的完整版请点击一下链接哦！（温馨提示：请用谷歌浏览器打开哦！）「AppSo」页面原型还原(一)首页（二）APP搜索页(三)APP搜索列表页(四)发布页（五）个人中心页1、通知页2、我发布的AppWall页
  • 前端使用 Vue 3，后端使用 Spring Boot 构建 Hello World 程序 天天进步2015 编程技巧前端vue.jsspringboot
    前端使用Vue3，后端使用SpringBoot构建HelloWorld程序前端（Vue3）首先，创建一个Vue3项目。1.安装VueCLInpminstall-g@vue/cli2.创建Vue项目vuecreatefrontend在交互式提示中，选择默认的Vue3预设。3.修改App.vue在frontend/src目录下，修改App.vue文件：{{message}}{{error}}expor
  • PWA进阶：打造离线可用的Web应用 天天进步2015 前端开发前端
    引言在移动互联网时代，用户对Web应用的期望已不仅限于可访问性，更要求其具备类似原生应用的体验。ProgressiveWebApp(PWA)技术的出现，使Web应用能够提供接近原生应用的用户体验，尤其是在网络连接不稳定或完全离线的情况下仍然可以使用。本文将深入探讨如何构建真正离线可用的PWA，帮助开发者掌握这一强大技术的核心要点。PWA核心技术回顾在深入探讨离线功能之前，让我们简要回顾PWA的三个
  • 设计可靠 LoRaWAN 设备时需要考虑的关键能力 门思科技 技术分享网络服务器物联网运维嵌入式硬件
    引言LoRaWAN已经成为低功耗广域网（LPWAN）中的重要标准，在智慧农业、能源管理、城市基础设施监测等领域得到大规模应用。然而，设计一款真正能够在各种复杂环境中稳定运行、可远程管理、可持续升级的设备，需要从底层架构就进行深度思考，而不仅仅是简单集成一个无线模块。如果缺乏系统性的设计，设备在面对实际部署时会遇到连接不稳、电池过快耗尽、远程控制受限等问题，导致后期维护成本大幅上升。下面，我们将从工
  • Ubuntu下中文输入法安装 超喜欢下雨天 日常ubuntulinux运维
    在Ubuntu22.04系统中安装中文输入法，通常推荐使用Fcitx5，这是一个功能强大的输入法平台。以下是安装和配置中文输入法的步骤：1.安装Fcitx5：打开终端，输入以下命令来安装Fcitx5及其中文输入插件和前端界面：sudoaptinstall-yfcitx5\fcitx5-chinese-addons\fcitx5-frontend-gtk3\fcitx5-frontend-gtk2\
  • 前端每周清单第 42 期：V8 的执行流与优化，Pinterest 的 PWA 实践 weixin_34146410 前端rust区块链ViewUI
    前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点，开发教程，工程实践，深度阅读，开源项目，巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。新闻热点国内国外，前端最新动态Rust默认可以编译为WebAssembly:随着PullRequest46115:"rustbuild:EnableWebAssemb
  • ECR仓库CloudFormation模板完整指南 ivwdcwso 运维与云原生自动化aws运维ECRCloudFormation镜像容器
    概述本文档详细介绍了一个通用的AmazonECR（ElasticContainerRegistry）仓库CloudFormation模板，该模板支持多业务组、参数化配置，并包含完整的安全策略、生命周期管理和监控功能。模板特性核心功能✅支持4个业务组：app、ai、mall、frontend✅灵活的服务名手动输入✅多环境支持（dev/test/staging/prod）✅自动镜像扫描和安全检查✅生命
  • LoRaWAN 有几种入网方式？ ManThink Technology LoRa知识网络
    LoRaWAN是一种广泛应用于物联网（IoT）领域的低功耗广域网（LPWAN）通信协议，因其远距离、低功耗、广覆盖等优势，被大量用于智能抄表、环境监测、智慧农业、工业自动化等场景。在实际部署中，LoRaWAN设备的入网方式是开发者和用户非常关注的问题。那么，LoRaWAN到底有几种入网方式呢？答案是：两种，分别是ABP（ActivationByPersonalization）和OTAA（Over-
  • 会话对象 Cookie 四、Cookie的路径 best_virtuoso 会话前端前端
    1.Cookie的path属性Cookie还有一个path属性，可以通过Cookie#setPath(String)方法来设置。你可以使用HttpWatch查看响应中的Set-Cookie中是否存在路径。下面是通过Chrome查看Cookie信息。也就是说，就算你不设置Cookie的path，Cookie也是有路径的。这个路径就是请求的路径。例如在请求:http://localhost:8080/
  • 利用systemd启动部署在服务器上的web应用 不是吧这都有重名 遇到的问题服务器前端运维
    0.背景系统环境：Ubuntu22.04web应用情况：前后端分类，前端采用react，后端采用fastapi1.具体配置1.1前端配置开发态运行（启动命令是npmrundev）,创建systemd服务文件sudonano/etc/systemd/system/frontend.service内容如下：[Unit]Description=ReactFrontendDevServerAfter=ne
  • 【Vben3】【Bug解决】Vben3 下载ZIP包开发时打包问题解决方案 患得患失949 个人项目bugelasticsearch大数据vben3
    Vben3下载ZIP包开发时打包问题解决方案问题背景当从GitHub或其他平台下载Vben3项目的ZIP压缩包进行本地开发时，在执行pnpmbuild命令时可能会遇到以下错误：@vben/docs:build:ERRORbuilderror:[vite-plugin-pwa:build][pluginvite-plugin-pwa:build]Therewasanerrorduringthebui
  • React.js在前端移动端开发中的应用 大厂前端小白菜 前端react.js前端框架ai
    React.js在前端移动端开发中的应用关键词：React.js、移动端开发、跨平台、组件化、性能优化、ReactNative、PWA摘要：本文将深入探讨React.js在移动端开发中的应用场景和技术实现。从React的核心特性出发，分析其在移动端的优势，详细介绍ReactNative的工作原理，并通过实际案例展示如何构建高性能的移动应用。文章还将对比不同移动端开发方案，提供性能优化建议，并展望R
  • 每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发 蓝婷儿 python前端
    PWA渐进式Web应用开发（离线缓存、桌面安装等）一、什么是PWA？PWA（ProgressiveWebApp）是一种让Web应用具有类似原生App用户体验的技术体系。PWA不是一个框架，而是由一组浏览器API组成的技术集合，包括：离线访问能力WebApp安装到桌面推送通知后台同步原生风格UIPWA的三大核心能力能力描述可安装性支持添加到桌面启动器，像原生App打开离线能力使用ServiceWor
  • Linux内核IPv4路由子系统深度剖析：FIB前端实现与设计原理 109702008 编程#C语言网络linux网络人工智能
    深入理解Linux网络栈的核心组件：路由表管理、地址验证与事件处理机制引言在Linux网络栈中，IPv4转发信息库（FIB）是决定数据包传输路径的核心子系统。fib_frontend.c作为FIB的前端实现，承担着路由表管理、用户接口交互和网络事件响应等关键任务。本文将深入剖析这一关键文件的实现原理，揭示Linux路由机制的设计哲学。一、FIB前端整体架构/*核心数据结构*/structfib_t
  • 多bin技术：为LoRa项目赋能的高效远程升级方案 门思科技 技术分享网络服务器运维
    在物联网（IoT）领域，设备的远程维护和固件升级（OTA升级）是保障系统稳定、持续优化的重要环节。然而，对于采用LoRa或LoRaWAN等低功耗广域网（LPWAN）技术的项目而言，受限于带宽窄、数据包尺寸小（通常最大255字节）等特点，传统的大容量固件升级方式并不适用。为了更高效、更安全地实现远程升级，多bin方案（multi-binapproach）应运而生，成为LoRa项目不可或缺的关键技术之
  • 推荐项目：Rust编写的终端HTTP客户端——CuTE 邵冠敬Robin
    推荐项目：Rust编写的终端HTTP客户端——CuTECuTEHTTPclient/libcurlTUIfrontendinRust,withrequest+keystorage项目地址:https://gitcode.com/gh_mirrors/cute1/CuTE在繁忙的开发和系统管理世界里，有时候我们需要的是一个既简单又强大的工具来处理日常的HTTP请求。CuTE（RustTUIHTTPC
  • 推荐使用：webpack的高效EJS模板加载器 —— ejs-compiled-loader 雷柏烁
    推荐使用：webpack的高效EJS模板加载器——ejs-compiled-loaderejs-compiled-loaderEJSloaderforwebpack(withoutfrontenddependencies)项目地址:https://gitcode.com/gh_mirrors/ej/ejs-compiled-loader在前端开发的浩瀚星空中，高效的模板引擎和构建工具是构建高性能应
  • 【软件工程】Waitress + Nginx 部署 Python Web 服务 meisongqing nginxpythonWEB
    下面是完整的Windows系统部署方案，使用Waitress作为WSGI服务器运行Python后端，Nginx作为反向代理同时提供前端服务：项目结构text复制下载myapp/├──backend/#Python后端│├──app.py#Flask应用入口│├──requirements.txt#Python依赖│└──api/#API模块├──frontend/#前端文件│├──index.ht
  • NB-IoT协议深度解析与应用实践.zip 豪欧巴
    本文还有配套的精品资源，点击获取简介：NB-IoT（窄带物联网）是针对LPWAN（低功耗广域网络）领域设计的物联网技术，其特点是覆盖广泛、功耗低、设备连接能力强。技术概述包括了NB-IoT的技术目标和特点，如深度覆盖、高效节能、大连接能力及低成本。核心特性涵盖了物理层、媒介接入控制层、网络层、会话层以及应用层的协议栈分析。此外，还介绍了NB-IoT的部署模式，以及在智慧城市、智能表计、资产追踪、农
  • 新手开发者：前后端分离部署及其跨域解决方案 甘露寺 前端跨域部署前端持续部署
    新手开发者：前后端分离部署及其跨域解决方案典型生产部署场景访问加载前端应用执行前端代码跨域请求用户前端服务器www.frontend.com请求后端APIwww.backend.com场景描述：前端：部署在GitHubPages(www.frontend.com)后端：部署在阿里云服务器(www.backend.com)用户：访问www.frontend.com跨域问题如何解决？方案一：CORS（
  • SX1268低功耗sub-1g芯片支持lora和GFSK调制 Kandiy18025398187 物联网iot人工智能硬件工程
    SX1268射频收发器是长距离无线应用的理想设备，支持410-810MHZ。它专为长电池寿命而设计，仅消耗4.2mA的主动接收电流。SX1268可以使用高效的集成功率放大器在490MHz传输高达+22dBm的信号。在780MHZ时，SX1268在天线端口传输+10dBm的信号时消耗不到20mA的电流。SX1268支持用于LPWAN用例的LoRa@调制和用干遗留用例的(G)FSK调制。它高度可配置，
  • OPC/MQTT工业通信软件OPLink 牛宝柱
    OPLink是上海泗博自主研发的基于OPC数据采集及转发，OPC数据到MQTT通信的产品。它是基于上海泗博多年的OPC应用经验和工业通信产品的开发背景，推出的OPC/MQTT工业通信软件。软件设计简洁、实用、稳定。同时，OPLink还具备与KepwareLinkMaster相似的数据转发功能，可实现PLC设备间的自主数据通信。功能升级实时性增强：针对复杂的工业自动化环境，OPLink优化了数据传输
  • 谷歌离线应用之渐进式 Web 应用 Progressive Web APP（PWA） 伍哥的传说 前端源码分享前端webapp
    一、渐进式Web应用（PWA）的定义‌渐进式Web应用（ProgressiveWebApp，PWA）是一种结合传统Web技术与现代移动应用特性的技术方案，旨在通过HTML、CSS和JavaScript构建具备‌原生应用体验‌的Web应用。其核心特性包括：‌可安装性‌：用户可将PWA添加到设备主屏幕，像原生应用一样独立运行；‌渐进增强‌：根据设备和网络环境逐步提升功能，确保基础功能在所有浏览器中可用
  • 时序数据库 TDengine x Kepware：解决你最头疼的“设备接入”问题 涛思数据（TDengine） 时序数据库tdengine数据库
    每个做工业数据采集的工程师都可能遇到这个问题：设备协议五花八门，数据源接入复杂，采集来的数据格式不统一，打通IT与OT系统总是困难重重。你明明已经在数据库中搭好了“数据大坝”，但最前端的那道“数据进口”，却迟迟无法打开。现在，TDengine和Kepware联手，给这个老难题带来了解法。TDengine与Kepware实现集成近日，TDengine正式完成与PTC旗下企业级工业连接解决方案Kepw
  • ios内付费 374016526 ios内付费
    近年来写了很多IOS的程序，内付费也用到不少，使用IOS的内付费实现起来比较麻烦，这里我写了一个简单的内付费包，希望对大家有帮助。   具体使用如下: 这里的sender其实就是调用者，这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa
  • 20 款优秀的 Linux 终端仿真器 brotherlamp linuxlinux视频linux资料linux自学linux教程
      终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。（LCTT 译注：终端仿真器原意指对大型机-哑终端方式的模拟，不过在当今的 Linux 环境中，常指通过远程或本地方式连接的伪终端，俗称“终端”。） 你能从开源世界中找到大量的终端仿真器，它们
  • Solr Deep Paging(solr 深分页) eksliang solr深分页solr分页性能问题
    转载请出自出处：http://eksliang.iteye.com/blog/2148370 作者：eksliang(ickes) blg:http://eksliang.iteye.com/ 概述 长期以来，我们一直有一个深分页问题。如果直接跳到很靠后的页数，查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr
  • 数据库面试题 18289753290 面试题 数据库
    1.union ,union all 网络搜索出的最佳答案： union和union all的区别是,union会自动压缩多个结果集合中的重复结果，而union all则将所有的结果全部显示出来，不管是不是重复。 Union：对两个结果集进行并集操作，不包括重复行，同时进行默认规则的排序； Union All：对两个结果集进行并集操作，包括重复行，不进行排序； 2.索引有哪些分类？作用是
  • Android TV屏幕适配 酷的飞上天空 android
    先说下现在市面上TV分辨率的大概情况 两种分辨率为主 1.720标清，分辨率为1280x720. 屏幕尺寸以32寸为主，部分电视为42寸 2.1080p全高清，分辨率为1920x1080 屏幕尺寸以42寸为主，此分辨率电视屏幕从32寸到50寸都有   适配遇到问题，已1080p尺寸为例： 分辨率固定不变，屏幕尺寸变化较大。 如：效果图尺寸为1920x1080，如果使用d
  • Timer定时器与ActionListener联合应用 永夜-极光 java
    功能:在控制台每秒输出一次   代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){
  • Ubuntu14.04系统Tab键不能自动补全问题解决 随便小屋 Ubuntu 14.04
    Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全，解决办法如下：   1、利用vi编辑器打开/etc/bash.bashrc文件（需要root权限） sudo vi /etc/bash.bashrc  接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if
  • 学会人际关系三招 轻松走职场 aijuans 职场
    要想成功，仅有专业能力是不够的，处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢？在此，教您简单实用的三个窍门。 　　第一，多汇报 最近，管理学又提出了一个新名词“追随力”。它告诉我们，做下属最关键的就是要多请示汇报，让上司随时了解你的工作进度，有了新想法也要及时建议。不知不觉，你就有了“追随力”，上司会越来越了解和信任你。 　　第二，勤沟通 团队的力
  • 《O2O：移动互联网时代的商业革命》读书笔记 aoyouzi 读书笔记
    移动互联网的未来：碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。   O2O：Online to OffLine 线上线下活动 O2O就是在移动互联网时代，生活消费领域通过线上和线下互动的一种新型商业模式。   手机二维码本质：O2O商务行为从线下现实世界到线上虚拟世界的入口。   线上虚拟世界创造的本意是打破信息鸿沟，让不同地域、不同需求的人
  • js实现图片随鼠标滚动的效果 百合不是茶 JavaScript滚动属性的获取图片滚动属性获取页面加载
    1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次     例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p
  • ajax同步异步参数async bijian1013 jqueryAjaxasync
            开发项目开发过程中，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，需将async:false，使其变成同步的。         格式： $.ajax({ type: 'POST', ur
  • Webx3框架（1） Bill_chen eclipsespringmaven框架ibatis
    Webx是淘宝开发的一套Web开发框架，Webx3是其第三个升级版本；采用Eclipse的开发环境，现在支持java开发； 采用turbine原型的MVC框架，扩展了Spring容器，利用Maven进行项目的构建管理，灵活的ibatis持久层支持，总的来说，还是一套很不错的Web框架。 Webx3遵循turbine风格，velocity的模板被分为layout/screen/control三部
  • 【MongoDB学习笔记五】MongoDB概述 bit1129 mongodb
    MongoDB是面向文档的NoSQL数据库，尽量业界还对MongoDB存在一些质疑的声音，比如性能尤其是查询性能、数据一致性的支持没有想象的那么好，但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能，而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩)，同时它提供的近似于SQL的查询能力，也是在做NoSQL技术选型时，考虑的一个重要因素。Mo
  • spring/hibernate/struts2常见异常总结 白糖_ Hibernate
    Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar，该jar包常用于spring aop中   ②java.lang.ClassNotFoundException: org.sprin
  • jquery easyui表单重置(reset)扩展思路 bozch formjquery easyuireset
    在jquery easyui表单中 尚未提供表单重置的功能，这就需要自己对其进行扩展。 扩展的时候要考虑的控件有： combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法，reset方法就是把初始化的值赋值给当前的组件，这就需要在组件的初始化时将值保存下来。 在所有的reset方法添加完毕之后，就需要对fo
  • 编程之美-烙饼排序 bylijinnan 编程之美
    package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是：搜索+剪枝。有点像是写下棋程序：当前情况下，把所有可能的下一步都做一遍；在这每一遍操作里面，计算出如果按这一步走的话，能不能赢（得出最优结果）。 *《编程之美》上代码有很多错误，且每个变量的含义令人费解。因此我按我的理解写了以下代码： */
  • Struts1.X 源码分析之ActionForm赋值原理 chenbowen00 struts
    struts1在处理请求参数之前，首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性，却找不到对应的ActionForm类也不会报错，只是不会处理本次请求的请求参数。 如果找到了对应的ActionForm类，则先判断是否已经存在ActionForm的实例，如果不存在则创建实例，并将其存放在对应的作用域中。作用域由配置文件action节点的s
  • [空天防御与经济]在获得充足的外部资源之前,太空投资需有限度 comsci 资源
          这里有一个常识性的问题:       地球的资源,人类的资金是有限的,而太空是无限的.....       就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... &
  • ORACLE临时表—ON COMMIT PRESERVE ROWS daizj oracle临时表
    ORACLE临时表 转 临时表：像普通表一样，有结构，但是对数据的管理上不一样，临时表存储事务或会话的中间结果集，临时表中保存的数据只对当前 会话可见，所有会话都看不到其他会话的数据，即使其他会话提交了，也看不到。临时表不存在并发行为，因为他们对于当前会话都是独立的。 创建临时表时，ORACLE只创建了表的结构（在数据字典中定义），并没有初始化内存空间，当某一会话使用临时表时，ORALCE会
  • 基于Nginx XSendfile+SpringMVC进行文件下载 denger 应用服务器Webnginx网络应用lighttpd
        在平常我们实现文件下载通常是通过普通 read-write方式，如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp
  • scanf接受char类型的字符 dcj3sjt126com c
    /* 2013年3月11日22:35:54 目的：学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("%
  • 学编程的价值 dcj3sjt126com 编程
    发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助   像这位朋友学习:   http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html   VirtualGS教程 (By @林泰前): 几十年的老程序员，资深的
  • 二维数组（矩阵）对角线输出 飞天奔月 二维数组
    今天在BBS里面看到这样的面试题目,   1，二维数组（N*N），沿对角线方向，从右上角打印到左下角如N=4： 4*4二维数组  { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序  4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要
  • Ehcache（08）——可阻塞的Cache——BlockingCache 234390216 并发ehcacheBlockingCache阻塞
    可阻塞的Cache—BlockingCache          在上一节我们提到了显示使用Ehcache锁的问题，其实我们还可以隐式的来使用Ehcache的锁，那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类，可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net.
  • mysqldiff对数据库间进行差异比较 jackyrong mysqld
      mysqldiff该工具是官方mysql-utilities工具集的一个脚本，可以用来对比不同数据库之间的表结构，或者同个数据库间的表结构    如果在windows下，直接下载mysql-utilities安装就可以了，然后运行后，会跑到命令行下： 1） 基本用法    mysqldiff --server1=admin:12345
  • spring data jpa 方法中可用的关键字 lawrence.li javaspring
    spring data jpa 支持以方法名进行查询/删除/统计。 查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x)   修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna
  • Spring的ModelAndView类 nicegege spring
    项目中controller的方法跳转的到ModelAndView类，一直很好奇spring怎么实现的？ /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo
  • 搭建 CentOS 6 服务器(13) - rsync、Amanda rensanning centos
    （一）rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait
  • Learn Nodejs 02 toknowme nodejs
    （1）npm是什么 npm is the package manager for node 官方网站：https://www.npmjs.com/ npm上有很多优秀的nodejs包，来解决常见的一些问题，比如用node-mysql，就可以方便通过nodejs链接到mysql，进行数据库的操作 在开发过程往往会需要用到其他的包，使用npm就可以下载这些包来供程序调用 &nb
  • Spring MVC 拦截器 xp9802 spring mvc
    Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java  1  public   abstract   class  HandlerInterceptorAdapter  implements  HandlerIntercep