首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    不只是离线缓存! - 论如何善用ServiceWorker

    经过两天的完善,我终于写出了一套具有离线可达、绕备、优选CDN、跟踪统计合一的SW脚本。此博客使用的SW 接下来我将从头开始讲述ServiceWorker的妙用。...自己编写SW,格局就打开了 Start From Zero 安装 / Install 首先,SW的本质是JS脚本,要安装它必须要经过一个html。...剥离层层加成,安装的代码只有一行 navigator.serviceWorker.register('/sw.js') 其中,/sw.js即为ServiceWorker脚本所在,由于安全性,你不能加载跨域的...此脚本将会把所有的unpkg.com流量直接拦截到unpkg.zhimg.com,用于中国大陆内CDN加速。...Promise.all([ fetch('https://unpkg.com/jquery'), fetch('https://cdn.jsdelivr.net/npm/jquery')

    4.3K21

    使用Tampermonkey 前端程序员竟用它入侵了github系统。。。(内附源码)

    有时候她忙不过来会让我帮忙,这样繁琐,程序化的事情,作为一名前端程序员的我准备写个脚本帮助女朋友提升一下工作效率。节省二人的时间。...装逼开始 下面开始分析一下这个脚本的诞生过程: 写脚本,首先要了解业务流程,了解工作流程。找出其中可以利用技术自动化的操作部分,从而提高效率,避免重复,无意义的工作。浪费时间就是浪费生命。...设计思路: 1:制作一个chrome的插件,调取浏览器提供的api,自动截图,命名保存到本地 2:编写Tampermonkey 脚本,在页面注入一个按钮,并为按钮添加点击事件 前一种方式技术难度高,操作复杂...,故后续尝试,首选的是第二种编写一个js脚本 脚本的编写主要依据需求分析,主要二个功能,一是根据url自动填写账号密码 二是点击注入的按钮命名保存截图 以下是脚本源码,经过一番修改,将国税系统改为github...jquery/3.2.1/jquery.min.js // @require https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js

    91910

    Js文件异步加载

    Js文件异步加载 浏览器中渲染引擎与Js脚本引擎是互斥的,在浏览器开始渲染页面时,如果遇到标签,会停止渲染当前页面,也就是说在脚本加载与执行的过程中会阻塞页面的渲染,在网速较差的环境下可能会出现浏览器页面假死的情况...,这也就是尽量将文件放置于后的原因,Js文件异步加载就是使浏览器加载外部Js脚本文件时不阻塞渲染线程,这称为非阻塞模式加载,当然加载完成之后解析执行Js脚本时必须与渲染引擎互斥...,解析执行Js脚本的时机取决于异步加载Js的方式。.../npm/jquery@3/dist/jquery.min.js" > async HTML5为元素定义了async属性,目前主流浏览器都已经支持。.../npm/jquery@3/dist/jquery.min.js" > Script DOM Element Script DOM Element的方式即动态插入一个标签来加载外部

    13K20

    Github+jsDelivr 打造免费CDN

    CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求.../gh/user/repo@version/file // 加载 jQuery v3.2.1 https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js.../gh/jquery/jquery@3/dist/jquery.min.js // 完全省略该版本以获取最新版本 https://cdn.jsdelivr.net/gh/jquery/jquery/dist.../jquery.min.js // 将“.min”添加到任何JS/CSS文件中以获取缩小版本,如果不存在,将为会自动生成 https://cdn.jsdelivr.net/gh/jquery/jquery...@3.2.1/src/core.min.js // 在末尾添加 / 以获取资源目录列表 https://cdn.jsdelivr.net/gh/jquery/jquery/

    2.4K10

    Web前端性能优化教程01:减少Http请求和使用内容分发网络

    边缘服务器的负载均衡负责缓存内容的负载均衡,保证节点的工作效率,同时还负责与中心服务器通信,实现整个系统的负载均衡。边缘服务器的高速缓存负责存储从客户源服务器获取的资源,并提供给本地用户访问。...CDN的工作原理 除了一些大型互联网公司拥有自己的CDN,其他公司基本都会选择CDN运营商合作。...CDN的简单应用 其实CDN的使用并没有和我们想象中那么遥远,JQuery应该是当今Web开发领域使用最为广泛的js框架之一,很多时候我们的网站都需要引用一个jquery.min.js的引用,我们可以将这个...js文件存储在自己的服务器,或者更好的选择:使用大公司的CDN服务提供的jquery.min.js....微软和google都提供了jquery的CDN免费服务,你只需做的事情就是在项目中引用它们,就能享受CDN带来的便利。

    1.6K70

    时隔一年多jQuery发布3.6.1新版本,你还在用JQ吗?

    附加带有 HTML 注释的脚本团队在正则表达式中发现了一个问题,即在附加脚本时从脚本中去除 HTML 注释,最终在某些边缘情况下删除了部分可执行脚本。...这些文件也可以在 npm 包和 CDN 上找到:https://code.jquery.com/jquery-3.6.1.slim.jshttps://code.jquery.com/jquery-3.6.1....slim.min.js继续使用JQ可以从 jQuery CDN 获取文件,或直接链接到它们:https://code.jquery.com/jquery-3.6.1.jshttps://code.jquery.com.../jquery-3.6.1.min.js还可以从 npm 获取此版本:npm install jquery@3.6.1写在最后在单页面应用大行其道,各种新鲜框架层出不穷的时代,或许已经很少有人会再关注...最后我想用去年 jQuery 3.6.0 发布时底下寥寥数个评论中的一句话来作为结尾:非常感谢您为维护和改进 jQuery 所做的所有辛勤工作,因为我们中的许多人仍然依赖 jQuery 来处理大多数生产中运行的项目

    2.6K20

    我的 .NET Core 博客性能优化经验总结

    /app/app-js-bundle.js", "inputFiles": [ "wwwroot/lib/jquery/jquery.min.js", "wwwroot/lib/jquery-validate.../jquery.validate.min.js", "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js...", "wwwroot/lib/twitter-bootstrap/js/bootstrap.bundle.min.js", "wwwroot/lib/jquery-qrcode/jquery.qrcode.min.js...defer src="007.js"> 不过defer的脚本还是会按顺序执行,这对于有依赖关系的JS资源十分重要,比如上面这段代码,即使007.js非常小,首先加载完成,它也必须等到...日志级别 很多程序员习惯本地和生产用同一份日志配置,而本地通常打开Debug、Trace等低等级日志以帮助我们的开发和测试工作,线上的产品是经过测试的相对稳定的发布版本,其实并不需要这些低等级日志,所有的事件都要记

    3.7K10

    Hexo异步加载方案

    这个很适合使用到Vue和jquery等js框架的js脚本,给它们添加defer属性以后,可以确保HTML加载完毕,且js下载完毕后,各个js脚本继续按照引入的顺序执行,从而确保不会因为依赖缺失而报错。...来自Heo的建议,不要给影响页面生成的js(例如util.js、main.js、lazy_load.js、vue.js、jquery.js)添加异步加载标签(不论是async还是defer都不要加),不然会造成大面积页面功能模块失效...# 看板娘使用到了jquery依赖,所以需要defer - js/dytitle.js"> # 动态网页标题是原生js,且体量小,可以直接.../runtime.js"> # 页脚计时器用到了jquery依赖,所以需要defer - cdn.jsdelivr.net...div script(src=url_for(theme.CDN.jquery)) script(src=url_for(theme.CDN.utils)) script(src=url_for

    2.1K20

    script新属性integrity与web安全,再谈xss

    当浏览器检测加载脚本签名与给定的签名不一致时,会拒绝执行该脚本。为什么CDN主推SRI功能,因为XSS,可以牵扯出DDoS攻击(分布式拒绝服务攻击),XSS比劫持肉鸡简单多了!...现代网站的大部分交互都来自于JavaScript,一般我们为了优化JS的加载速度,一般会分好几个域名加载js,而众多公用库一般放在第三方CDN上。...属性integrity提供了网站希望运行的脚本文件的密码散列。浏览器在下载脚本后会计算它的散列,然后将得出的值与integrity提供的值进行比较。如果不匹配,则说明目标脚本被篡改,浏览器将不使用它。...由于 SRI 在不匹配的时候就不执行脚本。.../3.2.1/jquery.min.js">integrity牵扯出这么多,不由感慨,web安全,非一朝一夕之功啊——integrity刚刚出来的时候,各大厂浏览器对此并无太大反应,就自认为这个就是块鸡肋在平常项目中

    1.4K10
    领券