b259ec2c4f
Fresh export of all 20 diagrams as PNG and full HTML documentation site after the Grand Unification UML sync. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
404 lines
8.3 KiB
HTML
404 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Browser Rendering Flow</title>
|
|
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic|Source+Code+Pro:300,400,700' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="../assets/css/bootstrap.css">
|
|
<link rel="stylesheet" href="../assets/css/jquery.bonsai.css">
|
|
<link rel="stylesheet" href="../assets/css/main.css">
|
|
<link rel="stylesheet" href="../assets/icon-font/icons.css">
|
|
<script type="text/javascript" src="../assets/js/jquery-2.1.0.min.js"></script>
|
|
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
|
|
<script type="text/javascript" src="../assets/js/jquery.bonsai.js"></script>
|
|
<script type="text/javascript" src="../assets/js/imageMapResizer.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div>
|
|
|
|
<!-- Name Title -->
|
|
|
|
<h1>Browser Rendering Flow</h1>
|
|
|
|
<!-- Type and Stereotype -->
|
|
|
|
<section style="margin-top: .5em;">
|
|
<span class="alert alert-info">
|
|
<span class="node-icon staruml-icon icon-UMLInteraction"></span>
|
|
UMLInteraction
|
|
</span>
|
|
|
|
</section>
|
|
|
|
<!-- Path -->
|
|
|
|
<section style="margin-top: 10px">
|
|
|
|
|
|
|
|
|
|
<span class="label label-info"><a href='cf9c8b720f3815adeccaf3ef6e48c6c4.html'><span class='node-icon staruml-icon icon-Project'></span>Skill Seekers</a></span>
|
|
|
|
<span>::</span>
|
|
<span class="label label-info"><a href='6a4361334e8b649314ed681b9e6798c3.html'><span class='node-icon staruml-icon icon-UMLModel'></span>skill_seekers</a></span>
|
|
|
|
<span>::</span>
|
|
<span class="label label-info"><a href='31ead21e06afc26298aa0b7e0c12372a.html'><span class='node-icon staruml-icon icon-UMLCollaboration'></span>Sequence Diagrams</a></span>
|
|
|
|
<span>::</span>
|
|
<span class="label label-info"><a href='beded1da861ee3eb2c9e3c091905828a.html'><span class='node-icon staruml-icon icon-UMLInteraction'></span>Browser Rendering Flow</a></span>
|
|
|
|
</section>
|
|
|
|
<!-- Diagram -->
|
|
|
|
|
|
|
|
<!-- Description -->
|
|
|
|
|
|
<section>
|
|
<h3>Description</h3>
|
|
<div>
|
|
|
|
<p>When --browser flag is set, DocScraper uses BrowserRenderer (Playwright) instead of requests.get() to fetch JavaScript-rendered HTML from SPA sites.</p>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Specification -->
|
|
|
|
|
|
|
|
<!-- Directed Relationship -->
|
|
|
|
|
|
|
|
<!-- Undirected Relationship -->
|
|
|
|
|
|
|
|
<!-- Classifier -->
|
|
|
|
|
|
|
|
<!-- Interface -->
|
|
|
|
|
|
|
|
<!-- Component -->
|
|
|
|
|
|
|
|
<!-- Node -->
|
|
|
|
|
|
|
|
<!-- Actor -->
|
|
|
|
|
|
|
|
<!-- Use Case -->
|
|
|
|
|
|
|
|
<!-- Template Parameters -->
|
|
|
|
|
|
|
|
<!-- Literals -->
|
|
|
|
|
|
|
|
<!-- Attributes -->
|
|
|
|
|
|
|
|
<!-- Operations -->
|
|
|
|
|
|
|
|
<!-- Receptions -->
|
|
|
|
|
|
|
|
<!-- Extension Points -->
|
|
|
|
|
|
|
|
<!-- Parameters -->
|
|
|
|
|
|
|
|
<!-- Diagrams -->
|
|
|
|
|
|
|
|
<section class="element-list">
|
|
<h3>Diagrams</h3>
|
|
<div>
|
|
|
|
<div style="display: inline-block; width: 250px; vertical-align: top;">
|
|
<div class="member">
|
|
<a href="ee605a93ba894d1b04ee91a5c6776771.html">
|
|
<img src="../diagrams/ee605a93ba894d1b04ee91a5c6776771.svg">
|
|
<div style="text-align: center; margin-top: 1em;">20 Browser Rendering Sequence</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Behavior -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Action -->
|
|
|
|
|
|
|
|
<!-- Interaction -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section class="element-list">
|
|
<h3>Participants</h3>
|
|
<ul class="nav nav-list">
|
|
|
|
<li><a href='51f5edc823ff1cb215ce49b5175c3ff5.html'><span class='node-icon staruml-icon icon-UMLLifeline'></span>DocScraper</a></li>
|
|
|
|
<li><a href='8c9ba83ebb9b836a2f552015e95d804a.html'><span class='node-icon staruml-icon icon-UMLLifeline'></span>BrowserRenderer</a></li>
|
|
|
|
<li><a href='8958739b0e0d4bee0f93bf57e26999de.html'><span class='node-icon staruml-icon icon-UMLLifeline'></span>Playwright (Chromium)</a></li>
|
|
|
|
<li><a href='226fd91ed0bcb0a9ba367ea5ec0ac3ac.html'><span class='node-icon staruml-icon icon-UMLLifeline'></span>BeautifulSoup</a></li>
|
|
|
|
</ul>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section class="element-list">
|
|
<h3>Messages</h3>
|
|
<ul class="nav nav-list">
|
|
|
|
<li><a href='7dafec5f0bb361f92e16100c159a1c83.html'><span class='node-icon staruml-icon icon-UMLMessage'></span>scrape_page(url) [--browser mode] (DocScraper→DocScraper)</a></li>
|
|
|
|
<li><a href='7bd43eb28f4ce9e5f3a2034cd6afca66.html'><span class='node-icon staruml-icon icon-UMLMessage'></span>render_page(url) (DocScraper→BrowserRenderer)</a></li>
|
|
|
|
<li><a href='fd2677979c645c0c487eea44a08c1bf6.html'><span class='node-icon staruml-icon icon-UMLMessage'></span>_ensure_browser() [auto-install chromium if needed] (BrowserRenderer→BrowserRenderer)</a></li>
|
|
|
|
<li><a href='20b8567bdfffcad686eb964848dd5211.html'><span class='node-icon staruml-icon icon-UMLMessage'></span>page.goto(url, wait_until='networkidle') (BrowserRenderer→Playwright (Chromium))</a></li>
|
|
|
|
<li><a href='79b9746a528a00e47de171dd605ce332.html'><span class='node-icon staruml-icon icon-UMLMessage'></span>page.content() [JS-rendered HTML] (Playwright (Chromium)→BrowserRenderer)</a></li>
|
|
|
|
<li><a href='e4add66939453e23855b5723ff0ff7c3.html'><span class='node-icon staruml-icon icon-UMLMessage'></span>rendered HTML string (BrowserRenderer→DocScraper)</a></li>
|
|
|
|
<li><a href='e4b200454a88116c309869951de22456.html'><span class='node-icon staruml-icon icon-UMLMessage'></span>BeautifulSoup(html, 'html.parser') (DocScraper→BeautifulSoup)</a></li>
|
|
|
|
<li><a href='43d8c1611a800bc7b4155d331e5a34fb.html'><span class='node-icon staruml-icon icon-UMLMessage'></span>extract_content(soup, url) -> save_page(page) (DocScraper→DocScraper)</a></li>
|
|
|
|
</ul>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- CombinedFragment -->
|
|
|
|
|
|
|
|
<!-- Activity -->
|
|
|
|
|
|
|
|
<!-- State Machine -->
|
|
|
|
|
|
|
|
<!-- State Machine -->
|
|
|
|
|
|
|
|
<!-- State -->
|
|
|
|
|
|
|
|
<!-- Vertex -->
|
|
|
|
|
|
|
|
<!-- Transition -->
|
|
|
|
|
|
|
|
<!-- Data Model (ERD) -->
|
|
|
|
|
|
|
|
<!-- Columns (ERD) -->
|
|
|
|
|
|
|
|
<!-- Related Entities (ERD) -->
|
|
|
|
|
|
|
|
<!-- Data Flows (DFD) -->
|
|
|
|
|
|
|
|
<!-- Flows (Flowchart) -->
|
|
|
|
|
|
|
|
<!-- Properties -->
|
|
|
|
<section>
|
|
<h3>Properties</h3>
|
|
|
|
<table class="table table-striped table-bordered">
|
|
<tr>
|
|
<th width="50%">Name</th>
|
|
<th width="50%">Value</th>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
<td>name</td>
|
|
<td>Browser Rendering Flow</td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
<td>stereotype</td>
|
|
<td><span class='label label-info'>null</span></td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
<td>visibility</td>
|
|
<td>public</td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
<td>isReentrant</td>
|
|
<td><span class='label label-info'>true</span></td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</table>
|
|
|
|
</section>
|
|
|
|
<!-- Tags -->
|
|
|
|
|
|
|
|
<!-- Constraints, Dependencies, Dependants -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Relationships -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Owned Elements -->
|
|
|
|
|
|
|
|
<section class="element-list">
|
|
<h3>Owned Elements</h3>
|
|
<ul class="nav nav-list">
|
|
|
|
<li><a href='ee605a93ba894d1b04ee91a5c6776771.html'><span class='node-icon staruml-icon icon-UMLSequenceDiagram'></span>20 Browser Rendering Sequence</a></li>
|
|
|
|
</ul>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Diagrams -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Image Map Resizer (https://github.com/davidjbradshaw/image-map-resizer) -->
|
|
<script>
|
|
imageMapResize();
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|