[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-guess-js--guess":3,"tool-guess-js--guess":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":79,"owner_email":79,"owner_twitter":79,"owner_website":79,"owner_url":80,"languages":81,"stars":94,"forks":95,"last_commit_at":96,"license":97,"difficulty_score":23,"env_os":98,"env_gpu":99,"env_ram":99,"env_deps":100,"category_tags":102,"github_topics":103,"view_count":10,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":110,"updated_at":111,"faqs":112,"releases":133},1221,"guess-js\u002Fguess","guess","🔮 Libraries & tools for enabling Machine Learning driven user-experiences on the web","Guess.js 是一个开源工具，专为Web开发者设计，帮助通过机器学习优化用户体验。它分析用户行为数据（如Google Analytics），自动预测用户可能访问的下一个页面或内容，并提前预加载相关资源，从而显著减少页面加载等待时间，提升流畅度和用户满意度。传统上，开发者需要手动解读分析数据来决定预加载内容，过程繁琐且容易出错。Guess.js 通过自动化这一流程，让开发者能轻松集成预测性预加载功能，无需深入机器学习知识。它特别适合使用Webpack的前端团队，提供完整的插件和库支持，包括数据收集、路由解析和自定义配置。技术亮点在于无缝整合Google Analytics数据，支持页面级或捆绑级预加载，并能根据用户网络连接类型动态调整策略。无论是电商网站、内容平台还是应用，Guess.js 都能帮助开发者以最小成本打造更智能、更流畅的用户体验。","[![Build Status](https:\u002F\u002Ftravis-ci.com\u002Fguess-js\u002Fguess.svg?branch=master)](https:\u002F\u002Ftravis-ci.com\u002Fguess-js\u002Fguess)\n\n# Guess.js (alpha)\n\nLibraries and tools for enabling data-driven user-experiences on the web.\n\n## Quickstart\n\n***For Webpack users:***\n### :black_circle: Data-driven bundling\n\nInstall and configure [GuessPlugin](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fpackages\u002Fguess-webpack) - the Guess.js webpack plugin which automates as much of the setup process for you as possible. \n\nShould you wish to try out the modules we offer individually, the `packages` directory contains three packages:\n\n* [`ga`](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fpackages\u002Fguess-ga) - a module for fetching structured data from the Google Analytics API to learn about user navigation patterns. \n* [`parser`](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fpackages\u002Fguess-parser) - a module providing JavaScript framework parsing. This powers the route-parsing capabilities implemented in the Guess webpack plugin.\n* [`webpack`](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fpackages\u002Fguess-webpack) - a webpack plugin for setting up predictive fetching in your application. It consumes the `ga` and `parser` modules and offers a large number of options for configuring how predictive fetching should work in your application. \n\n***For non-Webpack users:***\n### :black_circle: Data-driven loading\n\nOur [predictive-fetching for sites](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fexperiments\u002Fguess-static-sites) workflow provides a set of steps you can follow to integrate predictive fetching using the Google Analytics API to your site. \n\nThis repo uses [Google Analytics](http:\u002F\u002Fanalytics.google.com) data to determine which page a user is mostly likely to visit next from a given page. A client-side script (which you'll add to your application) sends a request to the server to get the URL of the page it should fetch, then prefetches this resource.\n\n## Learn More\n### What is Guess.js?\n\nGuess.js provides libraries & tools to simplify predictive data-analytics driven approaches to improving user-experiences on the web. This data can be driven from any number of sources, including analytics or [machine learning](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMachine_learning?sa=D&ust=1522637949792000) models. Guess.js aims to lower the friction of consuming and applying this thinking to all modern sites and apps, including building libraries & tools for popular workflows.\n\nApplying predictive data-analytics thinking to sites could be applied in a number of contexts:\n\n* **Predict the next page (or pages) a user is likely to visit and prefetch these pages, improving perceived page load performance and user happiness.**\n  * Page-level: Prerender\u002FPrefetch the page which is most likely to be visited next\n  * Bundle-level: Prefetch the bundles associated with the top _N_ pages. On each page navigation, at all the neighbors of the current page, sorted in descending order by the probability to be visited. Fetch assets (JavaScript chunks) for the top N pages, depending on the current connection effective type.\n* **Predict the next piece of content (article, product, video) a user is likely to want to view and adjust or filter the user experience to account for this.**\n* **Predict the types of widgets an individual user is likely to interact with more (e.g games) and use this data to tailor a more custom experience.**\n\nBy collaborating across different touch-points in the ecosystem where data-driven approaches could be easily applied, we hope to generalize common pieces of infrastructure to maximize their applicability in different tech stacks.\n\n\n### Problems we're looking to solve\n\n\n\n* Developers using [`\u003Clink rel=prefetch>`](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FLink_prefetching_FAQ?sa=D&ust=1522637949794000) for future navigations heavily rely on manually reading descriptive analytics to inform their decisions for what to prefetch.\n* These decisions are often made at a point in time and..\n  * (1) are often not revisited as data trends change\n  * (2) are very limited in how they are used. Implementations will often only prefetch content from a homepage or very small set of hero pages, but otherwise not do this for all of the possible entry points on a site. This can leave performance opportunities on the table.\n  * (3) Require some amount of confidence about the data being used to drive decisions around using prefetching means that developers may not be adopting it out of worry they will waste bandwidth. `\u003Clink rel=prefetch>` is [currently used on 5%](https:\u002F\u002Fwww.chromestatus.com\u002Fmetrics\u002Ffeature\u002Ftimeline\u002Fpopularity\u002F917) of total Chrome pageloads, but this could be higher.\n* Implementing predictive analytics is too complex for the average web developer.\n  * Most developers are unfamiliar with how to leverage the [Google Analytics API](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fv4\u002F?sa=D&ust=1522637949796000) to determine the probability a page will be visited next. We lack:\n  * (1) Page-level solution: a drop-in client-side solution for prefetching pages a user will likely visit\n  * (2) Bundling-level solution: a set of plugins\u002Ftools that work with today’s JavaScript bundlers (e.g webpack) to cluster and generate the bundles\u002Fchunks a particular set of navigation paths could load quicker were they to be prefetched ahead of time.\n* Most developers are not yet familiar with how [Machine Learning](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMachine_learning?sa=D&ust=1522637949797000) works. They are generally:\n  * (1) Unsure how (and why) ML could be integrated into their existing (web) tech stacks\n  * (2) What the value proposition of [TensorFlow](https:\u002F\u002Fwww.tensorflow.org\u002F?sa=D&ust=1522637949797000) is or where solutions like the [CloudML](https:\u002F\u002Fcloud.google.com\u002Fml-engine\u002F?sa=D&ust=1522637949798000) engine fit in. We have an opportunity to simplify the overhead associated with leveraging some of these solutions.\n* Best-in-class \u002F low-friction approaches in this space are still slowly emerging and are not yet as accessible to web developers without ML or data-science backgrounds.\n  * [Machine Learning meets Cloud: Intelligent Prefetching](https:\u002F\u002Fiihnordic.com\u002Fblog\u002Fmachine-learning-meets-the-cloud-intelligent-prefetching\u002F?sa=D&ust=1522637949798000) by IIH Nordic\n    * Tag Managers like [Google Tag Manager](https:\u002F\u002Fwww.google.com\u002Fanalytics\u002Ftag-manager\u002F?sa=D&ust=1522637949799000) can be used to decouple page content from the code tracking how the content is used. This allows web analysts to upgrade the tracking code in real-time with no site downtime. Tag managers allow a general solution for code injection and can be used to deploy intelligent prefetching. The advantages: analytics used to build the model comes from the tag manager. We can also send data live to the predictor without additional tracker overhead. After adding a few (of IIH Nordic’s) tags to a GTM install, a site can start to prefetch resources of the next pages and track load time saving opportunities.\n    * IIH Nordic moved the predictive prefetching model to a web service the browser queries when a user visits a new page. The service responds to each request and takes advantage of Google Cloud, App Engine and [Cloud ML](https:\u002F\u002Fcloud.google.com\u002Fml-engine\u002F?sa=D&ust=1522637949799000). Their solution chooses the most accurate model, choices include a [Markov model](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMarkov_model?sa=D&ust=1522637949800000) or most often a deep neural net in [TensorFlow](https:\u002F\u002Fwww.tensorflow.org\u002F?sa=D&ust=1522637949800000).\n    * With user behavior changing over time, predictive models require updating (training) from time to time. Training a model involves collecting and transforming data and fitting the parameters of the model accordingly. IIH Nordic use Google Cloud to pull data from a customer’s analytics service into a private data bucket in [BigQuery](https:\u002F\u002Fcloud.google.com\u002Fbigquery\u002F?sa=D&ust=1522637949800000). They process this data, train and test predictive models, updating the prediction service seamlessly.\n    * IIH Nordic suggest small\u002Fslow sites update their models monthly. Larger sites may need to retrain daily or even hourly for news websites.\n    * The benefit of training ML models in the cloud is ease of scale as additional machines, GPUs and processors can be added as needed.\n    * [Machine Learning-Driven Bundling. The Future of JavaScript Tooling](http:\u002F\u002Fblog.mgechev.com\u002F2018\u002F03\u002F18\u002Fmachine-learning-data-driven-bundling-webpack-javascript-markov-chain-angular-react\u002F?sa=D&ust=1522637949801000) by Minko\n\n#### Initial priority: Improved Performance through Data-driven Prefetching\n\nThe first large priority for Guess.js will be improving web performance through predictive prefetching of content.\n\nBy building a model of pages a user is likely to visit, given an arbitrary entry-page, a solution could calculate the likelihood a user will visit a given next page or set of pages and prefetch resources for them while the user is still viewing their current page. This has the possibility of improving page-load performance for subsequent page visits as there's a strong chance a page will already be in the user's cache.\n\n### Possible approaches to predictive fetching\n\nIn order to predict the next page a user is likely to visit, solutions could use the [Google Analytics API](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fv4\u002F?sa=D&ust=1522637949828000). Google Analytics session data can be used to create a model to predict the most likely page a user is going to visit next on a site. The benefit of this session data is that it can evolve over time, so that if particular navigation paths change, the predictions can stay up to date too.\n\nWith the availability of this data, an engine could insert `\u003Clink rel=\"[prerender\u002Fprefetch\u002Fpreload]\">` tags to speed up the load time for the next page request. In some tests, such as Mark Edmondson's [Supercharging Page-Loads with R](http:\u002F\u002Fcode.markedmondson.me\u002FpredictClickOpenCPU\u002Fsupercharge.html?sa=D&ust=1522637949828000), this led to a 30% improvement in page load times. The approach Mark used in his research involved using GTM tags and machine-learning to train a model for page predictions. This is an idea Mark continued in [Machine Learning meets the Cloud - Intelligent Prefetching](https:\u002F\u002Fiihnordic.com\u002Fblog\u002Fmachine-learning-meets-the-cloud-intelligent-prefetching\u002F?sa=D&ust=1522637949828000).\n\nWhile this approach is sound, the methodology used could be deemed a little complex. Another approach that could be taken (which is simpler) is attempting to get accurate prediction data from the Google Analytics API. If you ran a report for the [Page](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fdimsmets%23view%3Ddetail%26group%3Dpage_tracking%26jump%3Dga_pagepath?sa=D&ust=1522637949829000) and [Previous Page Path](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fdimsmets%23view%3Ddetail%26group%3Dpage_tracking%26jump%3Dga_previouspagepath?sa=D&ust=1522637949829000) dimension combined with the [Pageviews](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fdimsmets%23view%3Ddetail%26group%3Dpage_tracking%26jump%3Dga_pageviews?sa=D&ust=1522637949830000) and [Exits](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fdimsmets%23view%3Ddetail%26group%3Dpage_tracking%26jump%3Dga_exits?sa=D&ust=1522637949830000) metrics this should provide enough data to wire up prefetches for most popular pages.\n\n#### Machine Learning for predictive fetching\n\nML could help improve the overall accuracy of a solution's predictions, but is not a necessity for an initial implementation. Predictive fetching could be accomplished by training a model on the pages users are likely to visit and improving on this model over time.\n\nDeep neural networks are particularly good at teasing out the complexities that may lead to a user choosing one page over another, in particular, if we wanted to attempt a version of the solution that was catered to the pages an individual user might visit vs. the pages a \"general\u002Fmedian\" user might visit next. Fixed page sequences (prev, current, next) might be the easiest to begin dealing with initially. This means building a model that is unique to your set of documents.\n\nModel updates tend to be done periodically, so one might setup a nightly\u002Fweekly job to refresh based on new user behaviour. This could be done in real-time, but is likely complex, so doing it periodically might be sufficient. One could imagine a generic model representing behavioural patterns for users on a site that can either be driven by a trained status set, Google Analytics, or a custom description you plugin using a new layer into a router giving the site the ability to predictively fetch future pages, improving page load performance.\n\n### Possible approaches to speculative prefetch\n\n#### Speculative prefetch on page load\n\nSpeculative prefetch can prefetch pages likely be navigated to on page load. This assumes the existence of knowledge about the probability a page will need a certain next page or set of pages, or a training model that can provide a data-driven approach to determining such probabilities.\n\nPrefetching on page load can be accomplished in a number of ways, from deferring to the UA to decide when to prefetch resources (e.g at low priority with `\u003Clink rel=prefetch>`), during page idle time (via [requestIdleCallback()](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWindow\u002FrequestIdleCallback?sa=D&ust=1522637949834000)()) or at some other interval. No further interaction is required by the user.\n\n#### Speculative prefetch when links come into the viewport\n\nA page could speculatively begin prefetching content when links in the page are visible in the viewport, signifying that the user may have a higher chance of wanting to click on them.\n\nThis is an approach used by [Gatsby](https:\u002F\u002Fwww.gatsbyjs.org\u002F?sa=D&ust=1522637949834000) (which uses [React](https:\u002F\u002Freactjs.org\u002F?sa=D&ust=1522637949835000) and [React Router](https:\u002F\u002Fgithub.com\u002FReactTraining\u002Freact-router?sa=D&ust=1522637949835000)). Their specific implementation is as follows:\n\n* In browsers that support [IntersectionObserver](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FIntersection_Observer_API?sa=D&ust=1522637949836000), whenever a `\u003CLink>` component becomes invisible, the link \"votes\" for the page linked to to be prefetched votes are worth slightly less points each time so links at the top of the page are prioritized over ones lower down\n* e.g. the top nav if a page is linked to multiple times, its vote count goes higher the prefetcher takes the top page and starts prefetching resources.\n* It's restricted to prefetching one page at a time so as to reduce contention over bandwidth with on page stuff (not a problem on fast networks. If a user visits a page and its resources haven't been fully downloaded, prefetching stops until the page is loaded to ensure the user waits as little time as possible.\n\n#### Speculative prefetch on user interaction\n\nA page could begin speculatively prefetching resources when a user indicates they are interested in some content. This can take many forms, including when a user chooses to hover over a link or some portion of UI that would navigate them to a separate page. The browser could begin fetching content for the link as soon as there was a clear indication of interest. This is an approach taken by JavaScript libraries such as [InstantClick](http:\u002F\u002Finstantclick.io\u002F?sa=D&ust=1522637949837000).\n\n### Risks\n\n#### Data consumption\n\nAs with any mechanism for prefetching content ahead of time, this needs to be approached very carefully. A user on a restricted data-plan may not appreciate or benefit as much from pages being fetched ahead of time, in particular if they start to eat up their data. There are mechanisms a site\u002Fsolution could take to be mindful of this concern, such as respecting the [Save-Data](https:\u002F\u002Fdevelopers.google.com\u002Fweb\u002Fupdates\u002F2016\u002F02\u002Fsave-data?sa=D&ust=1522637949832000) header.\n\n#### Prefetching undesirable pages\n\nPrefetching links to \"logout\" pages is likely undesirable. The same could be said of any pages that trigger an action on page-load (e.g one-click purchase). Solutions may wish to include a blacklist of URLs which are never prefetched to increase the likelihood of a prefetched page being useful.\n\n#### Web Standards\n\n##### Future of rel=prerender\n\nSome of the attempts to accomplish similar proposals in the past have relied on `\u003Clink rel=prerender>`. The Chrome team is currently exploring [deprecating rel=prerender](https:\u002F\u002Fgroups.google.com\u002Fa\u002Fchromium.org\u002Fforum\u002F%23!topic\u002Fblink-dev\u002F0nSxuuv9bBw?sa=D&ust=1522637949833000) in favor of [NoStatePrefetch](https:\u002F\u002Fdocs.google.com\u002Fdocument\u002Fd\u002F16VCYGGWau483IMSxODpg5faZny1FJ6vNK2v-BuM5EhU\u002Fedit%23?sa=D&ust=1522637949833000) - a lighter version of this mechanism that only prefetches to the HTTP cache but uses no other state of the web platform. A solution should factor in whether it will be relying on the replacement to rel=prerender or using prefetch\u002Fpreload\u002Fother approaches.\n\nThere are two key differences between NoStatePrefetch and Prefetch: \n\n1. nostate-prefetch is a mechanism, and `\u003Clink rel=prefetch>` is an API. The nostate-prefetch can be requested by other entry points: omnibox prediction, custom tabs, `\u003Clink rel=prerender>`.\n\n2.  The implementation is different: `\u003Clink rel=prefetch>` prefetches one resource, but nostate-prefetch on top of that runs the preload scanner on the resource (in a fresh new renderer), discovers subresources and prefetches them as well (without recursing into preload scanner).\n\n\n\n### Relevant Data Analytics\n\nThere are [three primary types](https:\u002F\u002Fhalobi.com\u002Fblog\u002Fdescriptive-predictive-and-prescriptive-analytics-explained\u002F?sa=D&ust=1522637949802000) of data analytics worth being aware of in this problem space: descriptive, predictive and prescriptive. Each type is related and help teams leverage different kinds of insight.\n\n#### Descriptive - what has happened?\n\nDescriptive analytics summarizes raw data and turns it into something interpretable by humans. It can look at past events, regardless of when the events have occurred. Descriptive analytics allow teams to learn from past behaviors and this can help them influence future outcomes. Descriptive analytics could determine what pages on a site users have previously viewed and what navigation paths they have taken given any given entry page.\n\n#### Predictive - what will happen?\n\nPredictive analytics “predicts” what can happen next. Predictive analytics helps us understand the future and gives teams actionable insights using data. It provides estimates of the likelihood of a future outcome being useful. It’s important to keep in mind, few algorithms can predict future events with complete accuracy, but we can use as many signals that are available to us as possible to help improve baseline accuracy. The foundation of predictive analytics is based on probabilities we determine from data. Predictive analytics could predict the next page or set of pages a user is likely to visit given an arbitrary entry page.\n\n#### Prescriptive - what should we do?\n\nPrescriptive analytics enables prescribing different possible actions to guide towards a solution. Prescriptive analytics provides advice, attempting to quantify the impact future decisions may have to advise on possible outcomes before these decisions are made. Prescriptive analytics aims to not just predict what is going to happen but goes further; informing why it will happen and providing recommendations about actions that can take advantage of such predictions. Prescriptive analytics could predict the next page a user will visit, but also suggest actions such as informing you of ways you can customize their experience to take advantage of this knowledge.\n\n### Relevant Prediction Models\n\n#### Markov Models\n\nThe key objective of a prediction model in the prefetching problem space is to identify what the subsequent requests a user may need, given a specific page request. This allows a server or client to pre-fetch the next set of pages and attempt to ensure they are in a user’s cache before they directly navigate to the page. The idea is to reduce overall loading time. When this is implemented with care, this technique can reduce page access times and latency, improving the overall user experience.\n\n[Markov models](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMarkov_model?sa=D&ust=1522637949805000) have been widely used for researching and understanding stochastic (random probability distribution) process [[Ref](http:\u002F\u002Fciteseerx.ist.psu.edu\u002Fviewdoc\u002Fdownload?doi%3D10.1.1.436.2396%26rep%3Drep1%26type%3Dpdf?sa=D&ust=1522637949806000), [Ref](https:\u002F\u002Fwww.researchgate.net\u002Fpublication\u002F266568034_Effective_Web_Cache_Pre-fetching_technique_using_Markov_Chain?sa=D&ust=1522637949806000)] . They have been demonstrated to be well-suited for modeling and predicting a user’s browsing behavior. The input for these problems tends to be the sequence of web pages accessed by a user or set of users (site-wide) with the goal of building Markov models we can use to model and predict the pages a user will most likely access next. A Markov process has states representing accessed pages and edges representing transition probabilities between states which are computed from a given sequence in an analytics log. A trained Markov model can be used to predict the next state given a set of k previous states.\n\nIn some applications, first-order Markov models aren’t as accurate in predicting user browsing behaviors as these do not always look into the past to make a distinction between different patterns that have been observed. This is one reason higher-order models are often used. These higher-order models have limitations with state-space complexity, less broad coverage and sometimes reduced prediction accuracy.\n\n#### All-Kth-Order Markov Model\n\nOne way [[Ref](http:\u002F\u002Fwww.siam.org\u002Fmeetings\u002Fsdm01\u002Fpdf\u002Fsdm01_04.pdf?sa=D&ust=1522637949807000)] to overcome this problem is to train varying order Markov models, which we then use during the prediction phase. This was attempted in the [All-Kth-Order Markov model](http:\u002F\u002Fwww.siam.org\u002Fmeetings\u002Fsdm01\u002Fpdf\u002Fsdm01_04.pdf?sa=D&ust=1522637949808000) proposed in this [Ref](https:\u002F\u002Fdl.acm.org\u002Fcitation.cfm?id%3D1251493?sa=D&ust=1522637949808000). This can make state-space complexity worse, however. Another approach is to identify frequent access patterns (longest repeating subsequences) and use this set of sequences for predictions. Although this approach can have an order of magnitude reduction on state-space complexity, it can reduce prediction accuracy.\n\n#### Selective Markov Models\n\n[Selective Markov models](http:\u002F\u002Fwww.siam.org\u002Fmeetings\u002Fsdm01\u002Fpdf\u002Fsdm01_04.pdf?sa=D&ust=1522637949808000) (SMM) which only store some states within the model have also been proposed as a solution to state-space complexity tradeoffs. They begin with a All-Kth-Order Markov Model - a post-pruning approach is then used to prune states that are not expected to be accurate predictors. The result of this is a model which has the same prediction power of All-Kth-Order models with less space complexity and higher prediction accuracy. In [Deshpane and Karpis](http:\u002F\u002Fwww.siam.org\u002Fmeetings\u002Fsdm01\u002Fpdf\u002Fsdm01_04.pdf?sa=D&ust=1522637949809000), different criteria to prune states in the model before prediction (frequency, confidence, error) are looked at.\n\n#### Semantic-pruned Selective Markov Models\n\nIn [Mabroukeh and Ezeife](http:\u002F\u002Fieeexplore.ieee.org\u002Fdocument\u002F5360449\u002F?reload%3Dtrue?sa=D&ust=1522637949809000), the performance of semantic-rich 1st and 2nd order Markov models was studied and compared with that of higher-order SMM and semantic-pruned SMM. They discovered that semantic-pruned SMM have a 16% smaller size than frequency-pruned SMM and provide nearly an equal accuracy.\n\n#### Clustering\n\nObserving navigation patterns can allow us to analyze user behavior. This approach requires access to user-session identification, clustering sessions into similar clusters and developing a model for prediction using current and earlier access patterns. Much of the previous work in this field has relied on clustering schemes like the [K-means clustering](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FK-means_clustering?sa=D&ust=1522637949810000) technique with [Euclidean distance](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FEuclidean_distance?sa=D&ust=1522637949810000) for improving confidence of predictions. One of the drawbacks to using K-means is difficulty deciding on the number of clusters, selecting the initial random center and the order of page visits is not always considered. [Kumar et al](http:\u002F\u002Fieeexplore.ieee.org\u002Fdocument\u002F7519368\u002F?sa=D&ust=1522637949811000) investigated this, proposing a hierarchical clustering technique with a modified [Levenshtein distance](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FLevenshtein_distance?sa=D&ust=1522637949811000), pagerank using access time length, frequency and higher order Markov models for prediction.\n\n### Research review\n\nMany of the papers referenced in the following section are centered around the Markov model, association rules and clustering. Papers highlighting relevant work related to pattern discovery for evolving page prediction accuracy are our focus.\n\n#### Sarukkai [2000] “[Link prediction and path analysis using Markov chains](https:\u002F\u002Fwww.sciencedirect.com\u002Fscience\u002Farticle\u002Fpii\u002FS138912860000044X?sa=D&ust=1522637949813000)”.\n\nUses first-order Markov models to model the sequence of web-pages requested by a user for predicting the next page they are likely to access. Markov chains allow the system to dynamically model URL access patterns observed in navigation logs based on previous state. A “personalized” Markov model is trained for each user and used to predict a user’s future sessions. In practice, it’s overly expensive to construct a unique model for each user and the cost of scaling this becomes more challenging when a site has a large user-base.\n\n#### Chun-Jung Lin [2005] ”[Using Hidden Markov Model to Predict the Surfing User’s Intention of Cyber Purchase on the Web](https:\u002F\u002Fwww.researchgate.net\u002Fpublication\u002F260319657_Using_Hidden_Markov_Model_to_Predict_the_Surfing_User's_Intention_of_Cyber_Purchase_on_the_Web?sa=D&ust=1522637949814000)”\n\nFirst paper to investigate Hidden Markov Models (HMM). Author collected web server logs, pruned the data and patched the paths users passed by. Based on HMM, author constructed a specific model for web browsing that predicts whether the users have the intention to purchase in real-time. Related measures, like speeding up the operation and their impact when in a purchasing mode are investigated.\n\n#### Elli Voudigari [2010-2011] ” [A Framework for Web Page Rank Prediction](https:\u002F\u002Flink.springer.com\u002Fchapter\u002F10.1007\u002F978-3-642-23960-1_29?sa=D&ust=1522637949814000)”.\n\nProposes a framework to predict ranking positions of a page based on their previous rankings. Assuming a set of successive Top-K rankings, the author identifies predictors based on different methodologies. Prediction quality is quantified as the similarity between predicted and actual rankings. Exhaustive experiments were performed on a real-world large scale dataset for both global and query-based top-K rankings. A variety of existing similarity measures for comparing Top-K ranked lists including a novel one captured in the paper.\n\n#### Mogul [1996] “ [Using predictive prefetching to improve World Wide Web latency](https:\u002F\u002Fwww.semanticscholar.org\u002Fpaper\u002FUsing-predictive-prefetching-to-improve-World-Wide-Padmanabhan-Mogul\u002F4d7e5e430bec3db4044b13ce8da7411f09c745f3?sa=D&ust=1522637949815000)”.\n\nProposes using N-hop Markov models to predict the next web page users are likely to access. Pattern matches the user’s current access sequence with the user’s historical web access sequences to improve the prediction accuracy for prefetches.\n\n#### Borges, Levene [2007] “[Evaluating Variable-Length Markov Chain Models for Analysis of User Web Navigation Sessions](http:\u002F\u002Fieeexplore.ieee.org\u002Fdocument\u002F4118703\u002F?sa=D&ust=1522637949816000)”.\n\nProposes dynamic clustering-based methods to increase Markov model accuracy in representing a collection of web navigation sessions. Uses a state cloning concept to duplicate states in a way separating in-links whose corresponding second-order probabilities diverge. The method proposed includes a clustering technique determining a way to assign in-links with similar second-order probabilities to the same clone.\n\n#### Banu Deniz Gunel [2010] ” [Investigating the Effect of Duration, Page Size and Frequency on Next Page Recommendation with Page Rank Algorithm](https:\u002F\u002Fwww.researchgate.net\u002Fpublication\u002F268366760_Investigating_the_Effect_of_Duration_Page_Size_and_Frequency_on_Next_Page_Recommendation_with_Page_Rank_Algorithm?sa=D&ust=1522637949817000)”.\n\nExtends the use of a page-rank algorithm with numerous navigational attributes: size of the page, duration time of the page, duration of transition (two page visits sequentially), frequency of page and transition. Defines a Duration Based Rank (DPR) and Popularity Based Page Rank (PPR). Author looked at the popularity of transitions and pages using duration information, using it with page size and visit frequency. Using the popularity value of pages, this paper attempts to improve conventional page rank algorithms and model a next page prediction under a given Top-N value.\n\n## References\n\n* [Supercharging page-loads with R](http:\u002F\u002Fcode.markedmondson.me\u002FpredictClickOpenCPU\u002Fsupercharge.html?sa=D&ust=1522637949840000)\n* [Using Google Analytics to predict clicks](https:\u002F\u002Fwww.noisetosignal.io\u002F2016\u002F11\u002Fusing-google-analytics-to-predict-clicks-and-speed-up-your-website\u002F?sa=D&ust=1522637949841000)\n* [Gatsby's Link](https:\u002F\u002Fgithub.com\u002Fgatsbyjs\u002Fgatsby\u002Ftree\u002Fmaster\u002Fpackages\u002Fgatsby-link?sa=D&ust=1522637949841000)\n* [Eve Dynamic Prerender](https:\u002F\u002Fwordpress.org\u002Fplugins\u002Feve-dynamic-prerender\u002F?sa=D&ust=1522637949841000)\n* [InstartLogic - Multi-page Predictive Prefetching](https:\u002F\u002Fwww.instartlogic.com\u002Fblog\u002Fpredicting-future-multi-page-predictive-prefetching?sa=D&ust=1522637949841000)\n* [Sirko Engine](https:\u002F\u002Fgithub.com\u002Fsirko-io\u002Fengine?sa=D&ust=1522637949842000) - relies on Service Worker\n\n\u003Ch2>Team\u003C\u002Fh2>\n\n\u003Ctable>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd align=\"center\" valign=\"top\">\n        \u003Cimg width=\"100\" height=\"100\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fguess-js_guess_readme_710da23ea701.png\">\n        \u003Cbr>\n        \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmgechev\">Minko Gechev\u003C\u002Fa>\n      \u003C\u002Ftd>\n      \u003Ctd align=\"center\" valign=\"top\">\n        \u003Cimg width=\"100\" height=\"100\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fguess-js_guess_readme_7bdfb016bd89.png\">\n        \u003Cbr>\n        \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Faddyosmani\">Addy Osmani\u003C\u002Fa>\n      \u003C\u002Ftd>\n      \u003Ctd align=\"center\" width=\"20%\" valign=\"top\">\n        \u003Cimg width=\"100\" height=\"100\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fguess-js_guess_readme_db7096b31a17.png\">\n        \u003Cbr>\n        \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkhempenius\">Katie Hempenius\u003C\u002Fa>\n      \u003C\u002Ftd>\n      \u003Ctd align=\"center\" valign=\"top\">\n        \u003Cimg width=\"100\" height=\"100\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fguess-js_guess_readme_b1f3639bf13c.png\">\n        \u003Cbr>\n        \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkyleamathews\">Kyle Mathews\u003C\u002Fa>\n      \u003C\u002Ftd>\n     \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n","[![构建状态](https:\u002F\u002Ftravis-ci.com\u002Fguess-js\u002Fguess.svg?branch=master)](https:\u002F\u002Ftravis-ci.com\u002Fguess-js\u002Fguess)\n\n# Guess.js (alpha)\n\n用于在 Web 上实现数据驱动型用户体验的库和工具。\n\n## 快速入门\n\n***针对 Webpack 用户：***\n### :black_circle: 数据驱动的打包\n\n安装并配置 [GuessPlugin](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fpackages\u002Fguess-webpack) —— Guess.js 的 Webpack 插件，它可以尽可能地为您自动化设置流程。\n\n如果您希望单独试用我们提供的模块，`packages` 目录下包含三个包：\n\n* [`ga`](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fpackages\u002Fguess-ga) —— 一个用于从 Google Analytics API 获取结构化数据的模块，以了解用户的导航模式。\n* [`parser`](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fpackages\u002Fguess-parser) —— 一个提供 JavaScript 框架解析功能的模块。它为 Guess Webpack 插件中实现的路由解析功能提供了支持。\n* [`webpack`](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fpackages\u002Fguess-webpack) —— 一个用于在您的应用中设置预测性预取的 Webpack 插件。它会使用 `ga` 和 `parser` 模块，并提供大量选项来配置预测性预取在您的应用中如何工作。\n\n***针对非 Webpack 用户：***\n### :black_circle: 数据驱动的加载\n\n我们的 [适用于静态站点的预测性预取](https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Ftree\u002Fmaster\u002Fexperiments\u002Fguess-static-sites) 流程提供了一组步骤，您可以按照这些步骤将基于 Google Analytics API 的预测性预取集成到您的网站中。\n\n该仓库利用 [Google Analytics](http:\u002F\u002Fanalytics.google.com) 数据来确定用户从当前页面最有可能访问的下一个页面。客户端脚本（您需要将其添加到您的应用中）会向服务器发送请求，获取应预取页面的 URL，然后提前加载该资源。\n\n## 了解更多\n### Guess.js 是什么？\n\nGuess.js 提供库和工具，以简化基于预测性数据分析的方法，从而改善 Web 上的用户体验。这些数据可以来自多种来源，包括分析数据或 [机器学习](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMachine_learning?sa=D&ust=1522637949792000) 模型。Guess.js 的目标是降低在所有现代网站和应用程序中采用和应用这种思路的门槛，包括为流行的工作流构建库和工具。\n\n将预测性数据分析思维应用于网站可以在多种场景中发挥作用：\n\n* **预测用户接下来可能访问的页面（或多个页面），并提前预取这些页面，从而提升用户感知到的页面加载性能并提高用户满意度。**\n  * 页面级别：预渲染\u002F预取最有可能被访问的下一个页面。\n  * 包级别：预取与前 _N_ 个页面相关的代码包，在每次页面跳转时，对当前页面的所有相邻页面按访问概率降序排序，并根据当前网络的有效类型，为前 _N_ 个页面获取相应的资源（JavaScript 块）。\n* **预测用户接下来可能想要查看的内容（文章、产品、视频），并据此调整或过滤用户体验。**\n* **预测单个用户更有可能与哪些类型的组件进行交互（例如游戏），并利用这些数据打造更加个性化的体验。**\n\n通过在整个生态系统的不同接触点上开展协作，以便轻松应用数据驱动的方法，我们希望能够标准化常见的基础设施组件，从而最大限度地提高它们在不同技术栈中的适用性。\n\n### 我们希望解决的问题\n\n\n\n* 使用 [`\u003Clink rel=prefetch>`](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FLink_prefetching_FAQ?sa=D&ust=1522637949794000) 进行未来导航预取的开发者，很大程度上依赖于手动分析描述性指标来决定应该预取哪些内容。\n* 这些决策通常是在某个特定时间点做出的，并且：\n  * (1) 很少会随着数据趋势的变化而重新评估；\n  * (2) 预取策略的应用范围非常有限。许多实现仅对首页或少数几个关键页面进行预取，而对于网站上的其他潜在入口页面则不会采取类似措施，这可能导致性能优化机会被忽略；\n  * (3) 决策过程中需要对所用数据有较高的置信度，否则开发者可能会担心浪费带宽而不采用预取技术。目前，`\u003Clink rel=prefetch>` 仅在 Chrome 总页面加载次数的 5% 中使用，但这一比例仍有提升空间。\n* 对于普通 Web 开发者而言，实现预测性分析过于复杂。\n  * 大多数开发者并不熟悉如何利用 [Google Analytics API](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fv4\u002F?sa=D&ust=1522637949796000) 来估算用户接下来访问某页面的概率。我们目前缺乏：\n  * (1) 页面级别的解决方案：一种开箱即用的客户端方案，用于预取用户可能访问的页面；\n  * (2) 打包级别的解决方案：一组插件或工具，能够与当今的 JavaScript 打包工具（如 webpack）协同工作，将导航路径聚类并生成预取后可更快加载的代码块或 bundle。\n* 大多数开发者尚未了解 [机器学习](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMachine_learning?sa=D&ust=1522637949797000) 的工作原理。他们通常：\n  * (1) 不清楚如何（以及为何）将机器学习集成到现有的 Web 技术栈中；\n  * (2) 对 [TensorFlow](https:\u002F\u002Fwww.tensorflow.org\u002F?sa=D&ust=1522637949797000) 的价值主张，或者像 [CloudML](https:\u002F\u002Fcloud.google.com\u002Fml-engine\u002F?sa=D&ust=1522637949798000) 引擎这样的解决方案的具体定位感到困惑。我们有机会简化这些技术的使用门槛。\n* 在这一领域，一流的、低门槛的解决方案仍在逐步涌现，但对于没有机器学习或数据科学背景的 Web 开发者来说，仍然不够易用。\n  * IIH Nordic 的 [机器学习与云结合：智能预取](https:\u002F\u002Fiihnordic.com\u002Fblog\u002Fmachine-learning-meets-the-cloud-intelligent-prefetching\u002F?sa=D&ust=1522637949798000)\n    * 像 [Google Tag Manager](https:\u002F\u002Fwww.google.com\u002Fanalytics\u002Ftag-manager\u002F?sa=D&ust=1522637949799000) 这样的标签管理器，可以将页面内容与跟踪内容使用情况的代码解耦，从而允许 Web 分析人员在不中断站点运行的情况下实时升级跟踪代码。标签管理器提供了一种通用的代码注入方案，可用于部署智能预取功能。其优势在于：构建模型所需的分析数据直接来自标签管理器；我们还可以将实时数据发送至预测服务，而无需额外的跟踪器开销。只需在 GTM 安装中添加几段 IIH Nordic 提供的代码，站点便能开始预取下一页的资源，并追踪加载时间的节省效果。\n    * IIH Nordic 将预测预取模型部署为一个 Web 服务，当用户访问新页面时，浏览器会向该服务发起查询。该服务会响应每个请求，并充分利用 Google Cloud、App Engine 和 [Cloud ML](https:\u002F\u002Fcloud.google.com\u002Fml-engine\u002F?sa=D&ust=1522637949799000) 等服务。他们的解决方案会选择最准确的模型，选项包括 [马尔可夫模型](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMarkov_model?sa=D&ust=1522637949800000) 或更常见的基于 [TensorFlow](https:\u002F\u002Fwww.tensorflow.org\u002F?sa=D&ust=1522637949800000) 的深度神经网络。\n    * 由于用户行为会随时间变化，预测模型需要定期更新（训练）。训练模型的过程涉及收集和转换数据，并相应地调整模型参数。IIH Nordic 利用 Google Cloud 从客户的分析服务中提取数据，将其存储到 [BigQuery](https:\u002F\u002Fcloud.google.com\u002Fbigquery\u002F?sa=D&ust=1522637949800000) 中的私有数据桶内。他们对这些数据进行处理、训练和测试预测模型，从而无缝更新预测服务。\n    * IIH Nordic 建议小型或流量较小的站点每月更新一次模型；而大型站点，尤其是新闻网站，则可能需要每天甚至每小时重新训练一次。\n    * 在云端训练机器学习模型的好处在于易于扩展，可以根据需要随时增加机器、GPU 和处理器等资源。\n  * Minko 的 [机器学习驱动的打包：JavaScript 工具的未来](http:\u002F\u002Fblog.mgechev.com\u002F2018\u002F03\u002F18\u002Fmachine-learning-data-driven-bundling-webpack-javascript-markov-chain-angular-react\u002F?sa=D&ust=1522637949801000)\n\n#### 首要优先级：通过数据驱动的预取提升性能\n\nGuess.js 的首要任务将是通过内容的预测性预取来提升 Web 性能。\n\n基于任意起始页面，构建用户可能访问的页面模型，该方案可以计算用户访问下一个页面或一组页面的可能性，并在用户仍在浏览当前页面时提前预取相关资源。这样有望提升后续页面的加载性能，因为目标页面很可能已经存在于用户的缓存中。\n\n### 预测性预取的可能方法\n\n为了预测用户接下来最有可能访问的页面，解决方案可以使用[Google Analytics API](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fv4\u002F?sa=D&ust=1522637949828000)。通过分析Google Analytics中的会话数据，可以构建一个模型来预测用户在网站上下一步最可能访问的页面。这种会话数据的优势在于它能够随时间动态更新，因此即使用户的导航路径发生变化，预测结果也能保持最新。\n\n有了这些数据，预取引擎可以在HTML中插入`\u003Clink rel=\"[prerender\u002Fprefetch\u002Fpreload]\">`标签，以加快下一次页面请求的加载速度。在一些测试中，例如Mark Edmondson的[使用R语言加速页面加载](http:\u002F\u002Fcode.markedmondson.me\u002FpredictClickOpenCPU\u002Fsupercharge.html?sa=D&ust=1522637949828000)，这种方法使页面加载时间提升了30%。Mark在其研究中采用的方法是利用GTM标签和机器学习来训练页面预测模型。这一思路也在他的另一篇文章[机器学习与云结合——智能预取](https:\u002F\u002Fiihnordic.com\u002Fblog\u002Fmachine-learning-meets-the-cloud-intelligent-prefetching\u002F?sa=D&ust=1522637949828000)中得到了延续。\n\n尽管这种方法可行，但其具体实现方式略显复杂。另一种更简单的方式是从Google Analytics API获取准确的预测数据。只需运行一份包含[页面](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fdimsmets%23view%3Ddetail%26group%3Dpage_tracking%26jump%3Dga_pagepath?sa=D&ust=1522637949829000)和[前一页面路径](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fdimsmets%23view%3Ddetail%26group%3Dpage_tracking%26jump%3Dga_previouspagepath?sa=D&ust=1522637949829000)维度，以及[页面浏览量](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fdimsmets%23view%3Ddetail%26group%3Dpage_tracking%26jump%3Dga_pageviews?sa=D&ust=1522637949830000)和[退出次数](https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Freporting\u002Fcore\u002Fdimsmets%23view%3Ddetail%26group%3Dpage_tracking%26jump%3Dga_exits?sa=D&ust=1522637949830000)指标的报告，就能获得足够的数据，为最受欢迎的页面配置预取功能。\n\n#### 机器学习在预测性预取中的应用\n\n机器学习可以帮助提高解决方案预测的整体准确性，但在初始实现中并非必需。可以通过训练模型来识别用户可能访问的页面，并随着时间的推移不断优化该模型，从而实现预测性预取。\n\n深度神经网络尤其擅长挖掘可能导致用户选择某一页面而非另一页面的复杂因素，特别是在我们希望针对特定用户或“普通\u002F平均”用户分别制定预取策略时。从处理固定的页面序列（前一页、当前页、下一页）入手可能是最容易的起点。这意味着需要为你的文档集构建一个专属模型。\n\n模型更新通常定期进行，因此可以设置每晚或每周的任务，根据新的用户行为刷新模型。虽然也可以实现实时更新，但这可能会比较复杂，因此定期更新可能就足够了。设想一种通用的用户行为模式模型，它可以基于训练好的状态集合、Google Analytics数据，或者通过自定义描述由插件添加到路由器中，从而使网站具备预测性预取未来页面的能力，进而提升页面加载性能。\n\n### 推测性预取的可能方法\n\n#### 页面加载时的推测性预取\n\n推测性预取可以在页面加载时预先获取用户可能导航到的页面。这需要事先了解某个页面后续所需页面或页面集合的概率，或者有一个能够基于数据驱动确定这些概率的训练模型。\n\n页面加载时的预取可以通过多种方式实现：例如，将资源预取的时机交由用户代理决定（如以低优先级使用`\u003Clink rel=prefetch>`），在页面空闲时段（通过[requestIdleCallback()](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWindow\u002FrequestIdleCallback?sa=D&ust=1522637949834000)）执行，或在其他指定的时间间隔内进行。整个过程无需用户进一步交互。\n\n#### 当链接进入视口时的推测性预取\n\n当页面中的链接出现在视口中时，页面可以开始推测性地预取相关内容，这表明用户很可能点击这些链接。\n\n[Gatsby](https:\u002F\u002Fwww.gatsbyjs.org\u002F?sa=D&ust=1522637949834000)就采用了这种方法（它使用[React](https:\u002F\u002Freactjs.org\u002F?sa=D&ust=1522637949835000)和[React Router](https:\u002F\u002Fgithub.com\u002FReactTraining\u002Freact-router?sa=D&ust=1522637949835000)）。他们的具体实现如下：\n\n* 在支持[IntersectionObserver](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FIntersection_Observer_API?sa=D&ust=1522637949836000)的浏览器中，每当一个`\u003CLink>`组件不再可见时，该链接就会为所指向的页面投出一票；每次投票的权重会略微降低，以便优先预取页面顶部的链接。\n* 例如，如果某个页面被多次链接，其投票计数就会增加，预取器会优先选择得票最高的页面并开始预取相关资源。\n* 为了减少与页面内容加载对带宽的竞争，每次只预取一个页面（在高速网络环境下通常不会有问题）。如果用户访问了一个尚未完全下载资源的页面，预取操作会暂停，直到页面加载完毕，以确保用户等待时间尽可能短。\n\n#### 用户交互时的推测性预取\n\n当用户表现出对某些内容的兴趣时，页面可以开始推测性地预取相关资源。这种兴趣的表现形式多种多样，比如用户将鼠标悬停在某个链接上，或停留在会引导他们跳转到另一个页面的UI区域。一旦浏览器检测到明确的兴趣信号，就可以立即开始获取目标页面的内容。JavaScript库[InstantClick](http:\u002F\u002Finstantclick.io\u002F?sa=D&ust=1522637949837000)就采用了类似的做法。\n\n### 风险\n\n#### 数据消耗\n\n与任何提前预取内容的机制一样，这一方法需要非常谨慎地使用。对于数据流量有限的用户来说，提前加载页面可能并不会带来太多好处，甚至会迅速消耗掉他们的流量。站点或解决方案可以采取一些措施来缓解这一问题，例如尊重 [Save-Data](https:\u002F\u002Fdevelopers.google.com\u002Fweb\u002Fupdates\u002F2016\u002F02\u002Fsave-data?sa=D&ust=1522637949832000) 头部信息。\n\n#### 预取不希望的页面\n\n预取“注销”页面通常是不理想的。同样地，任何在页面加载时触发操作的页面（如一键购买）也不宜被预取。为提高预取页面的实用性，解决方案可以维护一个永远不会被预取的 URL 黑名单。\n\n#### Web 标准\n\n##### rel=prerender 的未来\n\n过去曾有一些尝试通过 `\u003Clink rel=prerender>` 来实现类似的功能。目前，Chrome 团队正在探讨是否要[弃用 rel=prerender](https:\u002F\u002Fgroups.google.com\u002Fa\u002Fchromium.org\u002Fforum\u002F%23!topic\u002Fblink-dev\u002F0nSxuuv9bBw?sa=D&ust=1522637949833000)，转而采用 [NoStatePrefetch](https:\u002F\u002Fdocs.google.com\u002Fdocument\u002Fd\u002F16VCYGGWau483IMSxODpg5faZny1FJ6vNK2v-BuM5EhU\u002Fedit%23?sa=D&ust=1522637949833000)——这是一种更为轻量化的机制，它仅将资源预取至 HTTP 缓存中，而不使用 Web 平台的其他状态信息。因此，解决方案需要考虑是依赖于 rel=prerender 的替代方案，还是采用 prefetch、preload 或其他方式。\n\nNoStatePrefetch 和 Prefetch 之间存在两个关键区别：\n\n1. nostate-prefetch 是一种机制，而 `\u003Clink rel=prefetch>` 则是一个 API。nostate-prefetch 可以通过其他入口点被触发，例如地址栏预测、自定义标签页以及 `\u003Clink rel=prerender>`。\n   \n2. 实现方式不同：`\u003Clink rel=prefetch>` 只会预取单个资源，而 nostate-prefetch 在此基础上还会对该资源运行预加载扫描器（在一个全新的渲染进程中），发现其中的子资源并一并进行预取（但不会递归调用预加载扫描器）。\n\n### 相关数据分析\n\n在这个领域中有三种主要的数据分析类型值得了解：描述性分析、预测性分析和 prescriptive 分析。每种分析类型相互关联，可以帮助团队从不同角度挖掘洞察。\n\n#### 描述性分析——发生了什么？\n\n描述性分析将原始数据汇总并转化为人类可理解的形式。它可以回顾过去的事件，无论这些事件发生的时间如何。通过描述性分析，团队可以从历史行为中学习，并利用这些经验来影响未来的决策。例如，描述性分析可以确定用户曾经访问过哪些页面，以及在给定起始页面的情况下，他们通常会遵循怎样的导航路径。\n\n#### 预测性分析——接下来会发生什么？\n\n预测性分析旨在“预测”未来可能发生的事情。它帮助我们理解未来趋势，并基于数据提供可操作的见解。预测性分析能够评估某一未来结果发生的可能性及其潜在价值。需要注意的是，没有任何算法能够完全准确地预测未来事件，但我们可以通过尽可能多地利用现有信号来提升预测的准确性。预测性分析的基础是基于数据计算出的概率。例如，预测性分析可以根据任意起始页面，预测用户接下来可能会访问的页面或页面集合。\n\n#### Prescriptive 分析——我们应该怎么做？\n\nPrescriptive 分析不仅能够预测未来可能发生的事情，还能进一步提出具体的行动建议，以引导团队走向解决方案。它试图量化未来决策可能产生的影响，在决策实施之前就给出关于可能结果的建议。Prescriptive 分析的目标不仅仅是预测“将会发生什么”，而是深入探究“为什么会发生”，并针对这些预测提出可行的行动方案，以便更好地利用这些洞察。例如，Prescriptive 分析可以预测用户接下来会访问的页面，同时还可以建议一些个性化设置，以充分利用这一预测信息。\n\n### 相关预测模型\n\n#### 马尔可夫模型\n\n在预取问题领域，预测模型的核心目标是在给定某一页面请求的情况下，识别用户接下来可能需要的请求。这样，服务器或客户端可以预先获取下一组页面，并尽量确保这些页面在用户直接访问之前已缓存在其缓存中。其目的是减少整体加载时间。如果实施得当，这一技术能够缩短页面访问时间和延迟，从而提升整体用户体验。\n\n[马尔可夫模型](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMarkov_model?sa=D&ust=1522637949805000)已被广泛用于研究和理解随机过程（随机概率分布）[[Ref](http:\u002F\u002Fciteseerx.ist.psu.edu\u002Fviewdoc\u002Fdownload?doi%3D10.1.1.436.2396%26rep%3Drep1%26type%3Dpdf?sa=D&ust=1522637949806000), [Ref](https:\u002F\u002Fwww.researchgate.net\u002Fpublication\u002F266568034_Effective_Web_Cache_Pre-fetching_technique_using_Markov_Chain?sa=D&ust=1522637949806000)]。研究表明，它们非常适合建模和预测用户的浏览行为。这类问题的输入通常是用户或一组用户（全站范围）访问的网页序列，目标是构建可用于建模和预测用户最有可能接下来访问哪些页面的马尔可夫模型。马尔可夫过程的状态代表已访问的页面，边则表示状态之间的转移概率，这些概率是从分析日志中的给定序列计算得出的。训练好的马尔可夫模型可以根据前k个状态来预测下一个状态。\n\n在某些应用中，一阶马尔可夫模型在预测用户浏览行为时并不够准确，因为它们并不总是回溯历史以区分已观察到的不同模式。这也是为什么通常会使用高阶模型的原因之一。然而，高阶模型存在状态空间复杂度高、覆盖范围较窄以及有时预测准确率降低等局限性。\n\n#### 全K阶马尔可夫模型\n\n一种解决该问题的方法[[Ref](http:\u002F\u002Fwww.siam.org\u002Fmeetings\u002Fsdm01\u002Fpdf\u002Fsdm01_04.pdf?sa=D&ust=1522637949807000)]是训练不同阶数的马尔可夫模型，然后在预测阶段加以使用。这种方法在该[Ref](https:\u002F\u002Fdl.acm.org\u002Fcitation.cfm?id%3D1251493?sa=D&ust=1522637949808000)中提出的[全K阶马尔可夫模型](http:\u002F\u002Fwww.siam.org\u002Fmeetings\u002Fsdm01\u002Fpdf\u002Fsdm01_04.pdf?sa=D&ust=1522637949808000)中得到了尝试。不过，这样做可能会使状态空间复杂度进一步恶化。另一种方法是识别频繁访问的模式（最长重复子序列），并利用这些序列进行预测。尽管这种方法可以将状态空间复杂度降低一个数量级，但可能会降低预测准确率。\n\n#### 选择性马尔可夫模型\n\n[选择性马尔可夫模型](http:\u002F\u002Fwww.siam.org\u002Fmeetings\u002Fsdm01\u002Fpdf\u002Fsdm01_04.pdf?sa=D&ust=1522637949808000)（SMM）只存储模型中的一部分状态，也被提出作为解决状态空间复杂度权衡问题的一种方案。它首先从全K阶马尔可夫模型开始，随后采用后剪枝方法去除那些预计无法提供准确预测的状态。最终得到的模型具有与全K阶模型相同的预测能力，同时拥有更低的状态空间复杂度和更高的预测精度。在[Deshpane和 Karpis](http:\u002F\u002Fwww.siam.org\u002Fmeetings\u002Fsdm01\u002Fpdf\u002Fsdm01_04.pdf?sa=D&ust=1522637949809000)的研究中，探讨了在预测前对模型中的状态进行剪枝的不同标准（频率、置信度、误差）。\n\n#### 语义剪枝的选择性马尔可夫模型\n\n在[Mabroukeh和 Ezeife](http:\u002F\u002Fieeexplore.ieee.org\u002Fdocument\u002F5360449\u002F?reload%3Dtrue?sa=D&ust=1522637949809000)的研究中，对富含语义信息的1阶和2阶马尔可夫模型的性能进行了研究，并将其与高阶SMM及语义剪枝的SMM进行了比较。他们发现，语义剪枝的SMM比按频率剪枝的SMM小16%，且预测准确率几乎相当。\n\n#### 聚类分析\n\n通过观察用户的导航模式，我们可以分析其行为。这种方法需要访问用户会话标识，将会话聚集成相似的簇，并基于当前及之前的访问模式建立预测模型。该领域的许多先前工作都依赖于诸如[K-means聚类](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FK-means_clustering?sa=D&ust=1522637949810000)之类的聚类算法，并结合[欧几里得距离](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FEuclidean_distance?sa=D&ust=1522637949810000)来提高预测的置信度。然而，使用K-means的一个缺点是难以确定聚类的数量，初始中心点的选择也较为随机，而且页面访问顺序往往未被充分考虑。[Kumar等人](http:\u002F\u002Fieeexplore.ieee.org\u002Fdocument\u002F7519368\u002F?sa=D&ust=1522637949811000)对此进行了研究，提出了一种改进的[Levenshtein距离](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FLevenshtein_distance?sa=D&ust=1522637949811000)的层次聚类方法，结合基于访问时间长度和频率的PageRank，以及高阶马尔可夫模型来进行预测。\n\n### 研究综述\n\n以下章节中引用的许多论文都围绕马尔可夫模型、关联规则和聚类展开。我们重点关注那些突出与演化页面预测准确性相关的模式发现工作的文献。\n\n#### Sarukkai [2000] “[利用马尔可夫链进行链接预测与路径分析](https:\u002F\u002Fwww.sciencedirect.com\u002Fscience\u002Farticle\u002Fpii\u002FS138912860000044X?sa=D&ust=1522637949813000)”。\n\n该研究使用一阶马尔可夫模型来建模用户请求的网页序列，以预测他们接下来可能访问的页面。马尔可夫链使系统能够根据先前的状态动态地模拟导航日志中观察到的 URL 访问模式。为每个用户训练一个“个性化”马尔可夫模型，并用于预测用户的未来会话。然而，在实践中，为每个用户构建独特的模型成本过高，且当网站拥有庞大的用户群体时，这种扩展的成本会变得更加棘手。\n\n#### Chun-Jung Lin [2005] “[利用隐马尔可夫模型预测网络购物用户的意图](https:\u002F\u002Fwww.researchgate.net\u002Fpublication\u002F260319657_Using_Hidden_Markov_Model_to_Predict_the_Surfing_User's_Intention_of_Cyber_Purchase_on_the_Web?sa=D&ust=1522637949814000)”\n\n这是首篇探讨隐马尔可夫模型（HMM）的论文。作者收集了 Web 服务器日志，对数据进行了修剪，并补全了用户浏览过的路径。基于 HMM，作者构建了一个专门用于 Web 浏览的模型，用以实时预测用户是否具有购买意图。此外，还研究了相关措施，例如加快操作速度及其在购物模式下的影响。\n\n#### Elli Voudigari [2010–2011] “[网页排名预测框架](https:\u002F\u002Flink.springer.com\u002Fchapter\u002F10.1007\u002F978-3-642-23960-1_29?sa=D&ust=1522637949814000)”。\n\n提出了一种基于页面历史排名来预测其排名位置的框架。假设有一组连续的 Top-K 排名，作者基于不同的方法论识别出预测因子。预测质量通过预测排名与实际排名之间的相似度来量化。研究者在一个真实的大规模数据集上，针对全局和基于查询的 Top-K 排名进行了详尽的实验。文中还介绍了一系列用于比较 Top-K 排行榜的现有相似度度量，其中包括一种新颖的方法。\n\n#### Mogul [1996] “[利用预测性预取提升万维网延迟](https:\u002F\u002Fwww.semanticscholar.org\u002Fpaper\u002FUsing-predictive-prefetching-to-improve-World-Wide-Padmanabhan-Mogul\u002F4d7e5e430bec3db4044b13ce8da7411f09c745f3?sa=D&ust=1522637949815000)”。\n\n提出使用 N 跳马尔可夫模型来预测用户接下来可能访问的网页。该方法将用户当前的访问序列与其历史 Web 访问序列进行匹配，以提高预取的预测准确率。\n\n#### Borges, Levene [2007] “[评估变长马尔可夫链模型在用户 Web 导航会话分析中的应用](http:\u002F\u002Fieeexplore.ieee.org\u002Fdocument\u002F4118703\u002F?sa=D&ust=1522637949816000)”。\n\n提出了一种基于动态聚类的方法，以提高马尔可夫模型在表示一组 Web 导航会话时的准确性。该方法采用状态克隆的概念，通过分离对应二阶概率存在差异的入链，从而复制状态。所提出的方法还包括一种聚类技术，用于将具有相似二阶概率的入链分配到同一克隆中。\n\n#### Banu Deniz Gunel [2010] “[研究持续时间、页面大小和频率对基于 PageRank 算法的下一页推荐的影响](https:\u002F\u002Fwww.researchgate.net\u002Fpublication\u002F268366760_Investigating_the_Effect_of_Duration_Page_Size_and_Frequency_on_Next_Page_Recommendation_with_Page_Rank_Algorithm?sa=D&ust=1522637949817000)”。\n\n将 PageRank 算法的应用扩展到了多个导航属性：页面大小、页面停留时间、页面间过渡的持续时间（即连续两次访问页面的时间间隔）、页面及过渡的频率。定义了基于持续时间的排名（DPR）和基于受欢迎程度的 PageRank（PPR）。作者结合持续时间信息，考察了页面和过渡的受欢迎程度，并将其与页面大小和访问频率相结合。通过利用页面的受欢迎程度，本文试图改进传统的 PageRank 算法，并在给定 Top-N 值的情况下构建下一页预测模型。\n\n## 参考文献\n\n* [使用 R 加速页面加载](http:\u002F\u002Fcode.markedmondson.me\u002FpredictClickOpenCPU\u002Fsupercharge.html?sa=D&ust=1522637949840000)\n* [利用 Google Analytics 预测点击](https:\u002F\u002Fwww.noisetosignal.io\u002F2016\u002F11\u002Fusing-google-analytics-to-predict-clicks-and-speed-up-your-website\u002F?sa=D&ust=1522637949841000)\n* [Gatsby 的 Link 组件](https:\u002F\u002Fgithub.com\u002Fgatsbyjs\u002Fgatsby\u002Ftree\u002Fmaster\u002Fpackages\u002Fgatsby-link?sa=D&ust=1522637949841000)\n* [Eve Dynamic Prerender 插件](https:\u002F\u002Fwordpress.org\u002Fplugins\u002Feve-dynamic-prerender\u002F?sa=D&ust=1522637949841000)\n* [InstartLogic - 多页面预测性预取](https:\u002F\u002Fwww.instartlogic.com\u002Fblog\u002Fpredicting-future-multi-page-predictive-prefetching?sa=D&ust=1522637949841000)\n* [Sirko Engine](https:\u002F\u002Fgithub.com\u002Fsirko-io\u002Fengine?sa=D&ust=1522637949842000) —— 依赖 Service Worker\n\n\u003Ch2>团队\u003C\u002Fh2>\n\n\u003Ctable>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd align=\"center\" valign=\"top\">\n        \u003Cimg width=\"100\" height=\"100\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fguess-js_guess_readme_710da23ea701.png\">\n        \u003Cbr>\n        \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmgechev\">Minko Gechev\u003C\u002Fa>\n      \u003C\u002Ftd>\n      \u003Ctd align=\"center\" valign=\"top\">\n        \u003Cimg width=\"100\" height=\"100\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fguess-js_guess_readme_7bdfb016bd89.png\">\n        \u003Cbr>\n        \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Faddyosmani\">Addy Osmani\u003C\u002Fa>\n      \u003C\u002Ftd>\n      \u003Ctd align=\"center\" width=\"20%\" valign=\"top\">\n        \u003Cimg width=\"100\" height=\"100\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fguess-js_guess_readme_db7096b31a17.png\">\n        \u003Cbr>\n        \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkhempenius\">Katie Hempenius\u003C\u002Fa>\n      \u003C\u002Ftd>\n      \u003Ctd align=\"center\" valign=\"top\">\n        \u003Cimg width=\"100\" height=\"100\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fguess-js_guess_readme_b1f3639bf13c.png\">\n        \u003Cbr>\n        \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkyleamathews\">Kyle Mathews\u003C\u002Fa>\n      \u003C\u002Ftd>\n     \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>","# Guess.js 快速上手指南\n\n## 环境准备\n- Node.js 10.0+（建议使用 LTS 版本）\n- Google Analytics 账号（用于获取 API 数据）\n\n## 安装步骤\n```bash\n# 使用国内镜像加速安装\nnpm install -g cnpm --registry=https:\u002F\u002Fregistry.npmmirror.com\n# 安装 Guess.js Webpack 插件\ncnpm install guess-webpack --save-dev\n```\n\n## 基本使用\n1. 在 `webpack.config.js` 中添加插件配置：\n```javascript\nconst GuessPlugin = require('guess-webpack').default;\n\nmodule.exports = {\n  \u002F\u002F ... 其他配置\n  plugins: [\n    new GuessPlugin({\n      ga: {\n        viewId: 'YOUR_VIEW_ID', \u002F\u002F 替换为你的 Google Analytics View ID\n      }\n    })\n  ]\n};\n```\n\n2. 运行构建命令：`npm run build`  \n   （构建后将自动基于 Google Analytics 数据预加载用户可能访问的页面）","某电商网站的前端团队在优化用户浏览体验时，发现页面加载延迟导致购物车转化率下降，亟需提升交互流畅度。\n\n### 没有 guess 时\n- 开发者需每周手动解析Google Analytics报告，耗时数小时筛选“高概率页面”，但数据滞后导致预加载策略过时，常预加载用户实际不会访问的页面。\n- 预加载规则基于静态规则（如所有产品页均预加载），造成30%的无效请求，额外消耗服务器带宽和用户流量。\n- 用户点击“下一步”后，页面加载平均延迟1.2秒，转化率因此下降6%，客服投诉中“加载慢”占比达40%。\n\n### 使用 guess 后\n- guess自动接入Google Analytics数据，实时分析用户导航路径（如从产品页到购物车的概率达85%），动态生成精准预加载列表，策略更新时效从周级缩短至分钟级。\n- 仅预加载高概率页面（如购物车、相关商品页），无效请求减少55%，服务器负载降低25%，用户流量节省显著。\n- 页面加载时间压缩至0.25秒内，用户转化率提升7.5%，客服投诉中“加载慢”问题下降至8%。\n\nguess通过机器学习驱动的自动化预加载，将数据决策从人工经验升级为实时智能优化，实现性能与用户体验的双重飞跃。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fguess-js_guess_26325e17.png","guess-js","Guess.js","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fguess-js_e424611a.png","Data-driven user experiences for the web",null,"https:\u002F\u002Fgithub.com\u002Fguess-js",[82,86,90],{"name":83,"color":84,"percentage":85},"TypeScript","#3178c6",77.8,{"name":87,"color":88,"percentage":89},"JavaScript","#f1e05a",21.8,{"name":91,"color":92,"percentage":93},"Smarty","#f0c040",0.4,7123,200,"2026-04-05T05:27:27","MIT","","未说明",{"notes":99,"python":99,"dependencies":101},[],[13],[104,105,106,107,108,109],"machine-learning","performance","web-performance","prefetch","prerender","hacktoberfest","2026-03-27T02:49:30.150509","2026-04-06T05:32:15.685855",[113,118,123,128],{"id":114,"question_zh":115,"answer_zh":116,"source_url":117},5554,"使用 guess-webpack 时 Google 登录失败如何解决？","设置 `jwt` 属性。参考 [2ality.com 教程](https:\u002F\u002F2ality.com\u002F2015\u002F10\u002Fgoogle-analytics-api.html) 生成 JWT 文件，并将其配置到 `GuessPlugin` 的 `jwt` 属性中，例如：`new GuessPlugin({ jwt: 'path\u002Fto\u002Fjwt.json' })`。","https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Fissues\u002F80",{"id":119,"question_zh":120,"answer_zh":121,"source_url":122},5555,"在 Angular 项目中使用 guess-webpack 时出现 'Cannot read property 'eagerRoutes' of undefined' 错误如何解决？","生成 Google Analytics 的 JWT 令牌。通过 [2ality.com 教程](https:\u002F\u002F2ality.com\u002F2015\u002F10\u002Fgoogle-analytics-api.html) 获取 JWT 文件，并在 `GuessPlugin` 配置中设置 `jwt` 属性，例如：`new GuessPlugin({ jwt: 'path\u002Fto\u002Fjwt.json' })`。","https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Fissues\u002F311",{"id":124,"question_zh":125,"answer_zh":126,"source_url":127},5556,"使用 guess 时出现 'Cannot read property 'guess' of undefined' 错误如何解决？","检查 PWA 配置。临时禁用 PWA 模块并清除浏览器缓存后，问题通常得到解决。例如，在 Nuxt.js 中关闭 `pwa` 模块并清除缓存。","https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Fissues\u002F83",{"id":129,"question_zh":130,"answer_zh":131,"source_url":132},5557,"在 Angular 项目中使用多路由模块时构建失败 'Multiple root routing modules found' 如何解决？","确保在 `parseAngularRoutes` 函数调用中不传递第二个参数。该函数不支持第二个参数，移除相关调用即可。例如，将 `parseAngularRoutes('.', 'someParam')` 改为 `parseAngularRoutes('.')`。","https:\u002F\u002Fgithub.com\u002Fguess-js\u002Fguess\u002Fissues\u002F199",[134,137,140,143,146,149,152,155,158,161,164,167,170,173,176,179,182,185,188,191],{"id":135,"version":136,"summary_zh":79,"released_at":79},105102,"v0.4.22",{"id":138,"version":139,"summary_zh":79,"released_at":79},105103,"v0.4.21",{"id":141,"version":142,"summary_zh":79,"released_at":79},105104,"v0.4.20",{"id":144,"version":145,"summary_zh":79,"released_at":79},105105,"v0.4.19",{"id":147,"version":148,"summary_zh":79,"released_at":79},105106,"v0.4.18",{"id":150,"version":151,"summary_zh":79,"released_at":79},105107,"v0.4.17",{"id":153,"version":154,"summary_zh":79,"released_at":79},105108,"v0.4.16",{"id":156,"version":157,"summary_zh":79,"released_at":79},105109,"v0.4.15",{"id":159,"version":160,"summary_zh":79,"released_at":79},105110,"v0.4.14",{"id":162,"version":163,"summary_zh":79,"released_at":79},105111,"v0.4.13",{"id":165,"version":166,"summary_zh":79,"released_at":79},105112,"v0.4.12",{"id":168,"version":169,"summary_zh":79,"released_at":79},105113,"v0.4.11",{"id":171,"version":172,"summary_zh":79,"released_at":79},105114,"v0.4.10",{"id":174,"version":175,"summary_zh":79,"released_at":79},105115,"v0.4.9",{"id":177,"version":178,"summary_zh":79,"released_at":79},105116,"v0.4.8",{"id":180,"version":181,"summary_zh":79,"released_at":79},105117,"v0.4.7",{"id":183,"version":184,"summary_zh":79,"released_at":79},105118,"v0.4.6",{"id":186,"version":187,"summary_zh":79,"released_at":79},105119,"v0.4.5",{"id":189,"version":190,"summary_zh":79,"released_at":79},105120,"v0.4.4",{"id":192,"version":193,"summary_zh":79,"released_at":79},105121,"v0.4.3"]