【腾讯云前端性能优化大赛】两种非常规的性能优化方法

发布于：2024-10-24 编辑：匿名来源：网络

方案一代码语言：javascript copy const code = `!(function () { "use strict" const assert = $$assert function createElement(tag) { const ele = document.createElement(tag.tagName) if (tag.attributes) { Object .keys(tag.attributes) .forEach(key => ele[key] = tag.attributes[key]) } if (tag. innerHTML) { ele.innerHTML = tag.innerHTML } ele.async = false ele.defer = false return ele } 函数appendTag(tag) { document.body.appendChild(createElement(tag)) } 函数inlineTag(tag, innerHTML) { let path if (tag.tagName.toUpperCase() === 'LINK') { tag.tagName = 'style' path = tag.attributes.href 删除 tag.attributes } else { path = tag.attributes.src 删除标签。 attribute.src tag.attributes.async = false } tag.innerHTML = \`// 来自 CacheStorage: \${path} \\n\${innerHTML}\` return tag } const cacheName= 'assert' try { window.caches .open(cacheName) .then((cache) => { return assert.map((tag) => { if (tag.innerHTML) { return tag } if (!tag.attributes .src && !tag.attributes.href) { throw new Error(\`tag.innerHTML 与 tag.attributes.src、tag.attributes.href 必传一个, 当前为 \${JSON.stringify(tag)}\` ) } const assertURL = tag.tagName.toUpperCase() === 'SCRIPT' ? tag.attributes.src : tag.attributes.href return cache.match(assertURL) .then((response) => { if (!response ) { return 缓存 .add(assertURL) .then( () => 缓存 .match(assertURL) .then(response => response.text()) .then(innerHTML => inlineTag(tag, innerHTML)) ) } else {console.info(\`来自 CacheStorage: \${assertURL}\`) return response.text().then(innerHTML => inlineTag(tag, innerHTML)) } }) }) }) .then((scriptList) = > { // 保证执行顺序 scriptList .reduce( (a, b) => a .then(appendTag) .then(() => b) ) .then(appendTag) }) } catch (e) { console .error(e) setTimeout(() => { if (window.fundebug) {fundebug.notifyError(e) } }, ) constfragment = document.createDocumentFragment()assert.map(tag => { const ele = createElement( tag)fragment.appendChild(ele) }) document.body.appendChild(fragment) }})();`const compiler = source => require('@babel/core').transformSync( source, {预设: [ ' @babel/preset-env' ] } ) .codeclass CacheStaticPlugin{ 构造函数(htmlWebpackPlugin, test) { this.htmlWebpackPlugin = htmlWebpackPlugin this.test = test } isTargetTag(tag) { let link const result = (tag.tagName === 'script' || tag.tagName === 'link' ) && !tag.innerHTML && tag.attributes && (link = (tag.attributes.src || tag.attributes.href)) && (this.test instanceof RegExp ? this.test.test(link) : this.test(链接)) if (!result) { } return !!result }jectCacheStaticCode(scriptList) { return compiler(code.replace('$$assert', JSON.stringify(scriptList))) } apply(compiler) { compiler.hooks .compilation.tap('StaticCachePlugin', 编译 => { const hooks = this.htmlWebpackPlugin.getHooks(compilation) hooks.alterAssetTagGroups.tap('StaticCachePlugin', 资产 => { asset.bodyTags = [ ...assets.bodyTags.过滤器（标签=>！this.isTargetTag（tag)), { tagName: 'script', innerHTML: this.injectCacheStaticCode(assets.bodyTags.filter(this.isTargetTag.bind(this))), closeTag: true } ] }) }) }}module.exports = CacheStaticPlugin当这是一个Webpack插件时，通过传入特定的正则表达式，过滤掉需要缓存的静态JS和CSS文件，并将一段代码注入到HTML页面中。

当浏览器运行这段代码时，会通过cache.add() API下载带有特定标识符的js和css文件，并存储在CacheStorage中。然后将下载的代码通过script标签注入到HTML中。

（注入时需要考虑顺序问题）优化思路方案第二代码语言：javascript copy //cacheconst OFFLINE_SUFFIX = '?offline';let CURRENT_CACHES = {offline: 'offline'};const cacheFiles = [ '/?offline'] ;self .addEventListener('install', function(event) { event.waitUntil(self.skipWaiting()); event.waitUntil( caches.open(CURRENT_CACHES.offline).then(cache => { return cache.addAll(cacheFiles) ); }) );});const matchCache = 异步函数(事件, 缓存) { const res = wait Promise.all([ caches.match(event.request.url + OFFLINE_SUFFIX), caches.match(event.request.网址）]）； if (res.some(e => e)) { return res.filter(e => { if (e) return e; })[0]; } else { 返回新的 Response(); }}； const matchOfflineUrl = function(origin, event) { if (event.request.method !== 'GET') { return false; } } } 返回（cacheFiles.some(url => origin + url === event.request.url) || cacheFiles.some(url => origin + url === event.request.url + OFFLINE_SUFFIX) );};self.addEventListener( 'fetch', function(event) { const origin = location.origin; if (matchOfflineUrl(origin) , event)) { event.respondWith( fetch(event.request.url) .then(response => { if (!response.ok) { return caches.open(CURRENT_CACHES.offline).then(cache => { event. request.url === origin + '/' && cache.add(cacheFiles[0]); , 缓存).then(r => r); } }) .catch(err => { console.error(err); 返回 matchCache(event, 缓存).then(r => r); }) } });该解决方案使用Service Worker技术来监控fetch方法。当fetch请求失败时，自动使用Ca返回cheStorage中的缓存。

当用户再次连接到互联网时，缓存中存储的信息就会更新。这个解决方案类似于Google Workbox中的某个策略解决方案。

站长声明

标签：

上一篇：腾讯开源内部跨端框架Hippy，经过三年发展，日均PV突破1亿

下一篇：Android 9 Pie现已在全球正式发布！

金医疗医疗转板申请已获批准，即将在联交所主板上市

中国领先的高科技医疗器械及医疗服务企业集团——金医疗医疗科技股份有限公司（以下简称“金医疗医疗科技股份有限公司”）「金医药医疗」或「集团」）今日欣然宣布，集团向香港联交所提交的转板申请已获批准，将于6月15日交易结束时退出香港创业板。将于6月16日9点30分在香

06-17
夫妻联手河南启动面条IPO

不起眼的面条即将支持IPO。投资界-天天IPO获悉，河南念香食品股份有限公司（简称“念天食品”）近日向上交所提交招股说明书，保荐机构为国金证券股份有限公司。届时，小姐食品将成为继克明食品之后第二家在A股上市的面条企业。回想起来，思念食品的前身是河南南阳一家濒临

06-18
什么样的电视能让人愿意24小时开着呢？

虽然我们鼓励审美多元化，但总有一些趣味是永恒的，古今中外、五行八工高度相通。比如这个词：天衣无缝。用来形容诗歌的自然构图或事物的彻底、完美。它的本义是天上神仙穿的衣服是没有缝线的。在古人眼中，这是凡人无法企及的完美。时至今日，“无缝”在设计领域仍然具

06-21
新闻 -信天创投资已完成人民币基金二期增资，总规模5亿元，

据投资界12月21日消息，信天创投资宣布完成人民币基金二期增资，增资后规模达5亿元。截至目前，信天创投资管理的资产规模近10亿元。资料显示，信天创投资成立于2006年，是一家致力于发掘互联网早期优质项目的专业投资机构。投资阶段涵盖天使至A轮，投资规模1万元至1万元。

06-17
FLYPRO飞豹携新款无人机和系统解决方案亮相CES 2017

FLYPRO携全新无人机和系统解决方案在CES上首次亮相。 2017年1月5日，一年一度的全球科技盛会CES正式开幕。此次活动恰逢CES 50周年，吸引了约100家企业参展。展厅面积超过10,000平方英尺，预计将吸引超过17万名游客。在2018年CES上，全球智能运动无人机的开创者和领导者FLY

06-17
昭和电工增资1093亿日元（约65亿元人民币）增资半导体材料产量

日本昭和电工23日宣布，将通过在日本及海外公开发行的方式筹集约1亿日元资金，募集资金将用于生产半导体材料。用于资本投资，增加半导体材料的产能。原日立化学于2016年以约1万亿日元收购了现在的昭和电工材料，公司将根据需求，通过公开发行及增发（超额配发）的方式发行总

06-08
IPC PCB技术趋势研究项目向PCB制造商开放至7月13日

6月27日，美国伊利诺伊州班诺克本——IPC针对电子行业PCB制造商的全球研究项目已经启动。本次保密调查项目是《年IPC PCB技术趋势调研报告》全球数据收集的一部分，调查截止日期为7月13日。本研究项目的目的是衡量PCB行业当前的技术能力以及能力发展的潜力未来五年。调查内

06-06
深度解析-这匹来自硅谷的“微投界黑马”如何唤醒低迷的中国微投市场

雷锋网出版社：本文是作者龙魔、Microarray首席科学家、电子与软件设计师。本文介绍的是人物Setlak、Authentec 创始人以及该技术的主要发明者、Touch ID 的设计者、除 C-Q-T 技术系列之外的所有商用电容式指纹传感器所基于的技术原理的发现者。有传言称，iPhone 7 将继续使

06-18
网络审判，更适合2000后人的电子泡菜

《职务侵占 30 万，我赌公司的枪里没有子弹》《我跟老公的弟弟领了结婚证，我现在想离婚》《因为女朋友太笨，我朋友想对她进行精神鉴定》如果你看到上面的标题时皱起了眉头，那么你只会更加震惊，感叹世界如此之大，充满了奇迹。我是从律师的短视频账目中得出这个结论的。他

06-21
心的接力·惟实励新——2023德同之都年会暨科技创新论坛峰会成功举办

当前，科技创新已成为国际战略博弈的主战场和驱动经济高质量发展的重要引擎。 2017年，德同资本继续锚定国家重大政策和部署，保持辩证思维和战略定力，在新时代、新趋势、新产业经济形势下全力赋能被投企业，为投资者带来持续稳定。返回。新的一年是克服困难、迎难而上的一

06-17
多地发布2021年减税降费“成绩单”，广东新增减税超1400亿

多地发布2021年减税降费“成绩单”，广东新增减税超1400亿，上头条。近日，重庆、广西等地陆续发布2021年新减税降费“成绩单”。其中，为加大对实体经济的支持力度，减轻企业负担，广东新增超1亿今年减税降费1万元。据了解，在今年1月国务院召开的新闻发布会上，国家税务总

06-18
专注于生命科学领域机器人研发的“博工科技”获数千万元Pre-A轮融资，由青城资本领投

投资圈（ID：pedaily） 9月11日，广东博工医疗科技股份有限公司（以下简称“博工科技”）完成数千万元Pre-A轮融资。本轮融资由青城资本领投，华峰资本担任本轮融资独家财务顾问。本轮募集资金将用于加速生命科学机器人产品的研发和市场化进程的快速推进。博工科技成立于20

06-18