ForeverCjl
ForeverCjl

初识 ServiceWorker

初识ServiceWorker

初识ServiceWorker

在8月份的时候，W3C更新了一个叫Service Workers的API。

了解过HTML5中的Web Worker的人可能会对这个API会更容易理解一些，不然的话会将这两个API搞混。

其实，Service Worker是基于Web Worker的事件驱动的，他们执行的机制都是新开一个线程去处理一些额外的，以前不能直接处理的任务。对于Web Worker，我们可以使用它来进行复杂的计算，因为它并不阻塞浏览器主线程的渲染。而Service Worker，我们可以用它来进行本地缓存，相当于一个本地的proxy。说起缓存，我们会想起我们常用的一些缓存技术来缓存我们的静态资源，但是老的方式是不支持调试的，灵活性不高。使用Service Worker来进行缓存，我们可以用javascript代码来拦截浏览器的http请求，并设置缓存的文件，直接返回，不经过web服务器，然后，做更多你想做的事情。

因此，我们可以开发基于浏览器的离线应用。这使得我们的web应用减少对网络的依赖。例如，我们开发了一个新闻阅读的web应用，当你用手机浏览器在有网络的情况下打开时，你可以正常的获取新闻内容。可是，如果手机进入飞行模式，那这个应用你就没法使用了。

如果我们使用了Service Worker做缓存，浏览器http请求会先经过Service Worker，通过url mapping去匹配，如果匹配到了，则使用缓存数据，如果匹配失败，则继续执行你指定的动作。一般情况下，匹配失败则让页面显示“网页无法打开”。

上面是Service Worker的基本使用场景，当然，不仅仅局限于数据缓存。

下面来看一个简单的示例：

/index.html

       
       
       
       

        
        
        
        1
       
       
       
       

       
       
       
       

        
        
        
        2
       
       
       
       

       
       
       
       

        
        
        
        3
       
       
       
       

       
       
       
       

        
        
        
        4
       
       
       
       

       
       
       
       

        
        
        
        5
       
       
       
       

       
       
       
       

        
        
        
        6
       
       
       
       

       
       
       
       

        
        
        
        7
       
       
       
       

       
       
       
       

        
        
        
        8
       
       
       
       

       
       
       
       

        
        
        
        9
       
       
       
       

       
       
       
       

        
        
        
        10
       
       
       
       

       
       
       
       

        
        
        
        11
       
       
       
       

       
       
       
       

        
        
        
        12
       
       
       
       

       
       
       
       

        
        
        
        13
       
       
       
       

       
       
       
       

        
        
        
        14
       
       
       
       

       
       
       
       

        
        
        
        15
       
       
       
       

       
       
       
       

        
        
        
        16
       
       
       
       
       
       
       
       

        
        
        
        <!DOCTYPE html>
       
       
       
       

       
       
       
       

        
        
        
        <html lang="en">
       
       
       
       

       
       
       
       
  
        
        
        
        <head>
       
       
       
       

       
       
       
       
    
        
        
        
        <meta charset="utf-8">
       
       
       
       

       
       
       
       
    
        
        
        
        <script>
        
        
        
        
       
       
       
       

       
       
       
       
        
        
        
        
        // scope defaults to "/*"
       
       
       
       

       
       
       
       

        
        
        
                navigator.serviceWorker.register(
        
        
        
        "/service-worker.js").then(
        
        
        
        function(serviceWorker) {
       
       
       
       

       
       
       
       
            
        
        
        
        console.log(
        
        
        
        "success!");
       
       
       
       

       
       
       
       
            
        
        
        
        // To use the serviceWorker immediately,
       
       
       
       

       
       
       
       
            
        
        
        
        // you might call window.location.reload()
       
       
       
       

       
       
       
       

        
        
        
                });
       
       
       
       

       
       
       
       
    
        
        
        
        </script>
       
       
       
       

       
       
       
       
  
        
        
        
        </head>
       
       
       
       

       
       
       
       
  
        
        
        
        <body>
       
       
       
       

       
       
       
       
  
        
        
        
        </body>
       
       
       
       

       
       
       
       

        
        
        
        </html>

在chrome中的console中输入navigator.serviceWorker你会发现返回的undefined。这可能是因为你chrome的版本小于36，或者你没有打开这个功能。所以先确保你的chrome升级到了36以上。然后进入chrome://flags/中将ServiceWorker开关打开，如下图：
ServiceWorker
确保以上两个步骤都完成后，就可以在控制台看到返回值：
ServiceWorker

上面的代码中，给serviceWorker注册了一个叫service-worker.js的文件，这里采用的promise写法。当注册成功后，会执行then里面的回调函数。

下面看看service-worker.js

       
       
       
       

        
        
        
        1
       
       
       
       

       
       
       
       

        
        
        
        2
       
       
       
       

       
       
       
       

        
        
        
        3
       
       
       
       

       
       
       
       

        
        
        
        4
       
       
       
       

       
       
       
       

        
        
        
        5
       
       
       
       

       
       
       
       

        
        
        
        6
       
       
       
       

       
       
       
       

        
        
        
        7
       
       
       
       

       
       
       
       

        
        
        
        8
       
       
       
       

       
       
       
       

        
        
        
        9
       
       
       
       

       
       
       
       

        
        
        
        10
       
       
       
       

       
       
       
       

        
        
        
        11
       
       
       
       

       
       
       
       

        
        
        
        12
       
       
       
       

       
       
       
       

        
        
        
        13
       
       
       
       

       
       
       
       

        
        
        
        14
       
       
       
       

       
       
       
       

        
        
        
        15
       
       
       
       

       
       
       
       

        
        
        
        16
       
       
       
       

       
       
       
       

        
        
        
        17
       
       
       
       

       
       
       
       

        
        
        
        18
       
       
       
       

       
       
       
       

        
        
        
        19
       
       
       
       

       
       
       
       

        
        
        
        20
       
       
       
       

       
       
       
       

        
        
        
        21
       
       
       
       

       
       
       
       

        
        
        
        22
       
       
       
       

       
       
       
       

        
        
        
        23
       
       
       
       

       
       
       
       

        
        
        
        24
       
       
       
       

       
       
       
       

        
        
        
        25
       
       
       
       

       
       
       
       

        
        
        
        26
       
       
       
       

       
       
       
       

        
        
        
        27
       
       
       
       

       
       
       
       

        
        
        
        28
       
       
       
       

       
       
       
       

        
        
        
        29
       
       
       
       

       
       
       
       

        
        
        
        30
       
       
       
       

       
       
       
       

        
        
        
        31
       
       
       
       

       
       
       
       

        
        
        
        32
       
       
       
       

       
       
       
       

        
        
        
        33
       
       
       
       

       
       
       
       

        
        
        
        34
       
       
       
       

       
       
       
       

        
        
        
        35
       
       
       
       

       
       
       
       

        
        
        
        36
       
       
       
       

       
       
       
       

        
        
        
        37
       
       
       
       

       
       
       
       

        
        
        
        38
       
       
       
       
       
       
       
       

        
        
        
        this.oninstall = 
        
        
        
        function(e) {
       
       
       
       

       
       
       
       
    
        
        
        
        // Create a cache of resources.
       
       
       
       

       
       
       
       
    
        
        
        
        var resources = 
        
        
        
        new Cache();
       
       
       
       

       
       
       
       
    
        
        
        
        var visited = 
        
        
        
        new Cache();
       
       
       
       

       
       
       
       
    
        
        
        
        // Fetch them.
       
       
       
       

       
       
       
       

        
        
        
            e.waitUntil(resources.add(
       
       
       
       

       
       
       
       
        
        
        
        
        "/index.html",
       
       
       
       

       
       
       
       
        
        
        
        
        "/fallback.html",
       
       
       
       

       
       
       
       
        
        
        
        
        "/css/base.css",
       
       
       
       

       
       
       
       
        
        
        
        
        "/js/app.js",
       
       
       
       

       
       
       
       
        
        
        
        
        "/img/logo.png"
       
       
       
       

       
       
       
       

        
        
        
            ).then(
        
        
        
        function() {
       
       
       
       

       
       
       
       
        
        
        
        
        // Add caches to the global caches.
       
       
       
       

       
       
       
       
        
        
        
        
        return Promise.all([
       
       
       
       

       
       
       
       

        
        
        
                    caches.set(
        
        
        
        "v1", resources),
       
       
       
       

       
       
       
       

        
        
        
                    caches.set(
        
        
        
        "visited", visited)
       
       
       
       

       
       
       
       

        
        
        
                ]);
       
       
       
       

       
       
       
       

        
        
        
            }));
       
       
       
       

       
       
       
       

        
        
        
        };
       
       
       
       

       
       
       
       
 
       
       
       
       

       
       
       
       

        
        
        
        this.onfetch = 
        
        
        
        function(e) {
       
       
       
       

       
       
       
       

        
        
        
            e.respondWith(
       
       
       
       

       
       
       
       
        
        
        
        
        // Check to see if request is found in cache
       
       
       
       

       
       
       
       

        
        
        
                caches.match(e.request).catch(
        
        
        
        function() {
       
       
       
       

       
       
       
       
            
        
        
        
        // It's not? Prime the cache and return the response.
       
       
       
       

       
       
       
       
            
        
        
        
        return caches.get(
        
        
        
        "visited").then(
        
        
        
        function(visited) {
       
       
       
       

       
       
       
       
                
        
        
        
        return fetch(e.request).then(
        
        
        
        function(response) {
       
       
       
       

       
       
       
       

        
        
        
                            visited.put(e.request, response);
       
       
       
       

       
       
       
       
                    
        
        
        
        // Don't bother waiting, respond already.
       
       
       
       

       
       
       
       
                    
        
        
        
        return response;
       
       
       
       

       
       
       
       

        
        
        
                        });
       
       
       
       

       
       
       
       

        
        
        
                    });
       
       
       
       

       
       
       
       

        
        
        
                }).catch(
        
        
        
        function() {
       
       
       
       

       
       
       
       
            
        
        
        
        // Connection is down? Simply fallback to a pre-cached page.
       
       
       
       

       
       
       
       
            
        
        
        
        return caches.match(
        
        
        
        "/fallback.html");
       
       
       
       

       
       
       
       

        
        
        
                });
       
       
       
       

       
       
       
       

        
        
        
            );
       
       
       
       

       
       
       
       

        
        
        
        };

oninstall：当worker装载完毕时执行

在oninstall的回调函数中，将一些需要缓存的静态的文件写入全局的cache对象中。

onfetch：当接收到用户的请求时执行

通过e.request去匹配缓存中的静态文件，如果匹配到，则将这个缓存文件返回，如果未匹配到，则被catch获取，将请求释放（去请求真正的服务器），并将这个新文件缓存到全局cache。这里也是用到了promise写法。

在我看来，用ServiceWorker做缓存就相当于一个proxy，可以拦截http请求，这样你可以对请求做一下定制化的需求。即使在无网络的情况下，ServiceWorker也可以被当做一个http服务器一样返回前端所需要的数据。

上面是我对ServiceWorker的一些参考和理解。目前相关的中英文资料还比较少，主要还是得看W3C的介绍。

参考资料：
ServiceWorker简单例子

Github上一些代码

W3C ServiceWorkers

文章作者：foreverpx
文章原文链接：初识ServiceWorker

你可能感兴趣的:(JavaScript,html5,cache,chrome,serviceWorker)

  • 解决Spring Boot中Chrome浏览器Session ID频繁变动的问题 遥不可及~~斌 springbootchrome后端
    解决SpringBoot中Chrome浏览器SessionID频繁变动的问题在使用SpringBoot实现RedisSession后，Chrome内核的浏览器（如Chrome、Edge等）可能会出现SessionID频繁变动的问题，而IE浏览器则表现正常。这通常与浏览器对Cookie的处理机制以及SpringSession的配置有关。本文将详细分析问题的原因，并提供相应的解决方案。问题原因分析1.
  • Java XML与JSON相互转换详解 我真的不想做程序员 javajavaxmljson开发语言后端数据结构
    目录一、为什么需要XML与JSON转换二、使用Jackson库进行转换1.添加依赖2.XML转JSON3.JSON转XML三、注意事项在现代软件开发中，数据格式的转换是一项常见的任务，特别是在处理不同系统或服务之间的数据交换时。XML（可扩展标记语言）和JSON（JavaScript对象表示法）是两种广泛使用的数据格式。本文将深入探讨如何在Java中实现XML与JSON之间的相互转换，并提供完整的
  • 当 Selenium 的 click() /send_keys()等方法失效时：JavaScript 在 UI 自动化测试中的神奇用法 做测试的小薄 测试高阶seleniumjavascriptui自动化测试
    引言在使用Selenium进行WebUI自动化测试时，我们通常依赖Selenium提供的原生方法（如click()、send_keys()等）来操作页面元素。然而，在某些复杂场景下，这些方法可能会失效。例如：元素被遮挡或隐藏。页面加载延迟导致元素无法正常交互。某些特殊的动态行为无法通过Selenium原生方法触发。这时，JavaScript就成为了我们的“救星”。通过driver.execute_
  • 超全Java入门学习路线指南 Javaaaaaaaaaaa13 java开发语言前端springspringbooteclipsetomcat
    Java基础入门Java高级阶段数据库和JDBCHtml&JavascriptJsp&ServletStruts2框架讲解Spring框架讲解Hibernate框架讲解流行技术学习1、Java基础入门1、Java入门基础如果你没有任何的编程基础，那么本栏目的内容对你来说是至关重要的。打好基础，以后学习就会一帆风顺了。我们会先讲解了Java程序的开发环境的搭建、编写流程、工作原理等内容，接着学习有关
  • JavaScript 性能优化实战【详细指南】 AI筑梦师 JavaScriptjavascript性能优化开发语言
    #JavaScript性能优化实战#JavaScript性能优化实战JavaScript作为现代Web开发的核心技术，其性能优化涉及多个层面，包括计算效率、DOM操作、异步处理、内存管理、网络请求优化等。随着Web发展，越来越多的新技术（如WebAssembly、OffscreenCanvas、StreamsAPI、V8TurboFan优化等）正在提升JavaScript的性能。本指南涵盖从基础优
  • Python 视频爬取教程 小白教程 pythonPythonPython视频爬取教程Python视频爬取Python教程Python视频教程
    文章目录前言基本原理环境准备Python安装选择Python开发环境安装必要库示例1：爬取简单直链视频示例2：爬取基于HTML5的视频（以某简单视频网站为例）前言以下是一个较为完整的Python视频爬取教程，包含基本原理、不同网站的爬取示例以及注意事项。基本原理视频爬取本质上是模拟浏览器向服务器发送请求，获取包含视频信息的网页内容，解析出视频的真实下载地址，然后将视频文件下载到本地。一般会用到re
  • 基于 ArkTS 的混合式开发示例：静态页面与本地数据交互 qq_55376032 harmonyos华为鸿蒙
    一、实现效果1、H5段混合式开发效果图2、静态页面与本地数据交互效果图二、技术栈分析ArkTS：用于构建页面结构和逻辑，支持声明式UI和组件化开发。WebView：通过@ohos.web.webview调用H5页面，支持JavaScript交互。资源管理：使用@kit.ArkTS的util模块读取并解析本地JSON文件。自定义对话框：通过@CustomDialog实现自定义弹窗，支持动态数据加载。
  • Redis系列：深入理解缓存穿透、缓存击穿、缓存雪崩及其解决方案 菜就多练少说 Redis缓存redis数据库
    在使用Redis作为缓存系统时，我们经常会遇到“缓存穿透”、“缓存击穿”和“缓存雪崩”等问题，这些问题一旦出现，会严重影响应用性能甚至造成服务不可用。因此，理解这些问题的产生原因和解决方案非常重要。本文将全面讲解缓存穿透、缓存击穿、缓存雪崩的具体概念、产生原因、以及对应的解决策略，帮助开发人员高效、安全地使用Redis。一、缓存穿透（CachePenetration）（一）什么是缓存穿透？缓存穿透
  • C/C++高效编译工具ccache 工头阿乐 C/C++c语言c++java
    C/C++文章目录C/C++前言一、引入ccache二、ccache基本原理三、安装前言在处理一些规模相对较大的工程时，编译花费的时间可能会很长。有时候我们会经常一遍一遍地编译相同的程序，此时，有了ccache情况就好多了。它将在第一遍编译时多花几秒钟，但接下来就会使编译成倍（5-10倍）的提速。ccache的基本原理是通过将头文件高速缓存到源文件之中而改进了构建性能，因而通过减少每一步编译时添加
  • JavaScript基础-获取元素 難釋懷 javascript开发语言
    在Web开发中，使用JavaScript动态地访问和操作网页上的元素是一项基本技能。通过获取页面上的特定元素，我们可以对其进行各种操作，比如修改内容、样式或属性等。本文将详细介绍几种获取DOM元素的方法，并探讨它们的特点及适用场景。一、为什么需要获取元素？在现代Web应用中，交互性是关键。无论是响应用户的输入、更新页面内容还是实现动画效果，首先都需要定位到相关的HTML元素。掌握不同的获取元素的方
  • 【重回基础】理解CPU Cache及缓存一致性MESI Patrick_Lam 重回基础CPUCacheMESI缓存一致性
    文章目录一、前言二、为何需要CPUCache三、L1、L2、L3Cache三级缓存结构四、CacheLine：与内存数据交换的最小单位五、MEIS：缓存一致性5.1底层操作5.2MESI协议参考一、前言原打算重新学习一下volatile的实现原理，其中涉及到指令调度重排和数据可见性保证，这两者的理解离不开对CPUCache的掌握，因此，先重温一下CPUCache，便有了本文。二、为何需要CPUCa
  • 让人感到疑惑的const 浪裡遊 javascript开发语言ecmascript前端
    const关键字在不同的编程语言中有着不同的含义和限制，但通常它被用来声明一个常量或只读变量。然而，在JavaScript中，const的行为有时可能会让人感到困惑，因为它并不总是意味着“不可变”（immutable）。让我们详细探讨一下这个问题。JavaScript中的const在JavaScript中，当你使用const声明一个变量时，你实际上是创建了一个不能重新赋值的绑定。这意味着一旦给这个
  • JavaScript 性能优化实战：数据结构选择对性能的影响 deying0865423 开发语言javascript
    目录数组（Array）特点与适用场景性能短板链表（LinkedList）特点与适用场景性能短板集合（Set）特点与适用场景性能短板映射（Map）特点与适用场景性能短板栈（Stack）与队列（Queue）特点与适用场景性能短板在JavaScript开发中，数据结构的选择如同搭建房屋时选择合适的建筑材料，对程序性能起着决定性作用。合理的数据结构能显著提升代码执行效率，减少资源消耗，反之则可能导致性能瓶
  • JavaScript 性能优化实战：优化 DOM 操作提升交互响应 deying0865423 javascript开发语言ecmascript
    目录一、理解DOM操作的性能损耗二、减少DOM操作次数（一）批量操作DOM（二）缓存DOM查询结果三、优化DOM查询（一）使用更高效的查询方法（二）利用事件委托四、减少回流与重绘（一）批量修改样式（二）使用requestAnimationFrame在现代Web应用开发中，JavaScript与DOM（文档对象模型）的交互极为频繁。无论是创建动态界面、响应用户操作，还是更新页面内容，DOM操作都扮演
  • JavaScript基础-DOM 简介 難釋懷 javascript开发语言
    在现代Web开发中，JavaScript与HTML和CSS一起构成了网页的核心技术。而在这三者之中，DOM（DocumentObjectModel，文档对象模型）作为浏览器处理网页内容的一种接口，扮演着至关重要的角色。通过DOM，JavaScript能够动态地访问和操作网页的内容、结构以及样式。本文将介绍DOM的基本概念、核心组成部分以及如何使用JavaScript来操作DOM。一、什么是DOM？
  • 一条查询sql的执行流程和底层原理 weixin_30608503 大数据数据库
    1、一条查询SQL执行流程图2、查询SQL执行流程之发送SQL请求（1）客户端按照Mysql通信协议将SQL发送到服务端，SQL到达服务端后，服务端会单起一个线程执行SQL。（2）执行时Mysql首先判断SQL的前6个字符是否为select。并且语句中是否带有SQL_NO_CACHE关键字，如果没有则进入查询缓存。3、查询SQL执行流程之查询缓存查询缓存说白了就是一个哈希表，将执行过的语句及其结果
  • JavaScript 浏览器对象实例 lsx202406 开发语言
    JavaScript浏览器对象实例引言JavaScript作为一种广泛应用于网页开发的脚本语言，提供了丰富的浏览器对象模型（BrowserObjectModel，简称BOM）。BOM使得JavaScript能够与浏览器环境进行交互，从而实现各种动态效果和交互功能。本文将详细介绍JavaScript中的浏览器对象实例，包括其概念、常用对象及其使用方法。一、浏览器对象模型概述浏览器对象模型是JavaS
  • JavaScript执行机制 javascript
    大纲1、场景分析2、执行机制相关知识点3、以实例来说明JavaScript的执行机制4、相关概念场景分析/*以下这段代码的执行结果是什么？如果依照：js是按照语句出现的顺序执行这个理念，那么代码执行的结果应该是：//"定时器开始啦"//"马上执行for循环啦"//"执行then函数啦"//"代码执行结束"但结果并不是这样的，得到的结果是：//"马上执行for循环啦"//"代码执行结束"//"执行t
  • JavaScript 高频面试题 好运连连女士 JavaScriptjavascript
    文章目录JavaScript手写防抖和节流CommonJS和ES6模块的区别this指向问题，如何修改this指向引申1:模拟bind引申2：为什么多次绑定，只指向第一次绑定的obj对象?有没有解决办法？引申3:一般函数和箭头函数的区别数据类型有哪些引申1:如何判断数据类型new操作的原理引申1:什么是闭包？引申2:内存泄露和内存溢出引申3:作用域和作用域链？JS实现数组扁平化深拷贝与浅拷贝的区别
  • JavaScript相关面试题 努力的搬砖人. javascript
    以下是150道JavaScript相关面试题及详细答案：JavaScript基础1.JavaScript是什么？JavaScript是一种直译式脚本语言，主要用于网页开发，也可用于服务器端开发（如Node.js）。它是一种动态类型、弱类型、基于原型的语言，支持函数式编程和面向对象编程。2.JavaScript的基本数据类型有哪些？包括Undefined、Null、Boolean、Number、St
  • 原生JavaScript控制页面跳转的几种方式 thinkQuadratic javascript前端开发语言
    在开发一些简单的页面，不需要复杂的单页面应用（SPA）功能的时候。可以使用原生JavaScript的跳转即可满足需求。另外在处理一些需要直接与服务器进行交互的表单提交后跳转，或者在某些浏览器兼容性要求较高的场景下，原生JavaScript的跳转方式更加稳定可靠。正文开始这里本地创建两个html文件进行演示，index.html和home.htmlwindow.location.hrefindex页
  • python后端常见架构_常见的后端框架 weixin_39622178 python后端常见架构
    后端vs前端如果您是Web开发世界的新手，后端和前端开发之间的区别可能不那么明显，但是，了解两者之间的区别很重要。以下是前端开发人员与后端开发人员的一些区别。前端开发：前端开发人员在很大程度上负责用户所看到的内容(即网站页面)，前端开发人员主要使用HTML，CSS和JavaScript。他们的主要关注点是创建出色的用户体验，并确保网站设计和布局或Web应用程序始终具有凝聚力。后端开发：另一方面，后
  • 使用 CryptoJS 实现 AES 解密：动态数据解密示例 木觞清 javascript
    在现代加密应用中，AES（高级加密标准）是一种广泛使用的对称加密算法。它的安全性高、效率好，适合用于各种加密任务。今天，我们将通过一个实际的示例，展示如何使用CryptoJS实现AES解密，解密动态数据。CryptoJS是一个基于JavaScript的加密库，它支持AES、DES等多种常见的加密算法。本文将详细介绍如何使用CryptoJS解密AES加密的数据。1.引入CryptoJS库首先，确保你
  • 详细讲一下webpack中五个优化能力十分强大的插件（1-5） asecretman! webpack前端node.js
    1.TerserPlugin功能：用于压缩和优化JavaScript代码，支持ES6+语法。安装:npminstallterser-webpack-plugin--save-dev配置constTerserPlugin=require('terser-webpack-plugin');module.exports={mode:'production',//设置为生产模式，启用优化optimizat
  • JavaScript 异步编程：从回调到 Async/Await 进化 PM简读馆 技术杂谈javascript开发语言ecmascript
    作者简介：程序员转项目管理领域优质创作者个人邮箱：[[email protected]]PMP资料导航：PM菜鸟（查阅PMP大纲考点）座右铭：上善若水，水善利万物而不争。绿泡泡：PM简读馆（包含更多PM常用免费资料）目录1.回调函数（Callback）2.Promise3.Generator4.Async/Await在JavaScript中，异步编程是一个非常重要的概念，因为JavaScript是
  • 前端架构师具备什么能力？前端性能优化全链路指南 kerwin_1727 前端架构师具备什么能力前端性能优化
    前端性能优化全链路指南——从构建到运行，让你的页面飞起来！一、性能优化全链路概览性能优化不是“一招鲜”，而是从构建时到运行时的全流程优化。以下是核心链路：构建时：减少打包体积（TreeShaking、CodeSplitting）。加载时：加速资源加载（懒加载、预加载）。运行时：提升渲染效率（虚拟列表、WebWorker）。监控与诊断：用工具定位问题（ChromePerformance、Lighth
  • html怎么获取父页面的元素的值,使用JavaScript与jQuery怎么在子窗口中获取父窗口的元素值... weixin_39907658
    使用JavaScript与jQuery怎么在子窗口中获取父窗口的元素值发布时间：2021-02-1815:42:20来源：亿速云阅读：115作者：Leah使用JavaScript与jQuery怎么在子窗口中获取父窗口的元素值？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。js:父窗口：子窗口：curproject=window.op
  • jquery查找父窗体id_jquery 获取父窗口的元素、父窗口、子窗口 weixin_39781550 jquery查找父窗体id
    一、获取父窗口元素：$("#父窗口元素ID",window.parent.document)；对应javascript版本为window.parent.document.getElementById("父窗口元素ID")；取父窗口的元素方法：$(selector,window.parent.document);那么你取父窗口的父窗口的元素就可以用：$(selector,window.parent.
  • jquery查找父窗体id_JS与jQuery实现子窗口获取父窗口元素值的方法 北木南烟 jquery查找父窗体id
    这篇文章主要介绍了JS与jQuery实现子窗口获取父窗口元素值的方法,涉及javascript与jQuery操作窗口元素的相关技巧,需要的朋友可以参考下本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法。分享给大家供大家参考，具体如下：功能描述：父窗口有一个input，和一个button，点击button打开子窗口，在子窗口中获取父窗口中input的值，并显示。js:父窗口：子窗口：
  • 【ES6新特性】声明变量关键字：var、let、const详解 小钟H呀 ES6新特性学习手册es6javascript开发语言
    前言在ES6（ECMAScript2015）之前，JavaScript中只有var关键字用于变量声明。ES6新增了let和const，它们解决了var的一些设计缺陷，使得变量声明更安全、更符合编程直觉。核心特性对比1.作用域（Scope）var：函数作用域（在函数内部声明的变量，只能在函数内部访问）let/const：块级作用域（在{}代码块中声明的变量，只能在块内访问）//var示例functi
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他