website·Indexed 29 days ago
https://sunchenyang.cnA personal site featuring a portfolio of projects including a unified visualization platform (PIS), a rural road inspection management platform, an OA management system, and an archive lifecycle management system, alongside technical documentation on HTML resource preloading.
The project is an archives management system designed for archives, group companies, and large-scale enterprises. It manages the full lifecycle and process of archives, assisting personnel in the efficient compilation, appraisal, and preservation of records. It facilitates data retrieval for internal and external users and ensures compliance with regulatory inspections.
Core functional modules include:
The Field Inspection Software is responsible for the centralized storage and real-time display of data from on-board cameras, GPS, and line-scan cameras, with functionality to export data packages for office use.
Technical stack:
The Office Annotation Software imports field inspection projects, provides pavement images for AI-based defect recognition, and supports manual annotation and modification. It also enables exporting defect data into various report formats.
Technical stack:
<link rel="preload">. This allows the browser to start fetching the resource earlier than it would otherwise encounter it during parsing.<body>
<!-- c.js will enter the request queue first, but will still execute after a.js and b.js -->
<link rel="preload" as="script" href="c.js">
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
</body>These two events indicate different stages of the page loading process:
DOMContentLoaded: Triggered when the HTML document has been completely loaded and parsed. At this stage, external resources like images and stylesheets may not have finished loading.Load: Triggered only after all page resources, including the HTML, stylesheets, images, and scripts, have fully loaded.Standard external scripts block HTML parsing while they are being loaded and executed. To prevent the loading phase from blocking the parser, use the async or defer attributes. Both allow the script to be downloaded in parallel with HTML parsing, but they differ in when the script executes:
async: The script executes immediately after it finishes downloading, pausing the HTML parser at that moment.defer: The script executes only after the entire HTML document has been fully parsed (coinciding with the DOMContentLoaded event).<!-- Non-blocking load, executes as soon as downloaded -->
<script src="script.js" async></script>
<!-- Non-blocking load, executes after HTML parsing is complete -->
<script src="script.js" defer></script>The PIS platform is built using the following technical stack to handle data visualization and performance optimization:
The <img> tag uses alt and title for different purposes:
alt: Required attribute. Provides fallback text displayed if the image fails to load.title: Optional attribute. Provides a tooltip that appears when a user hovers the mouse over the image.<img src="image.jpg" alt="Description for accessibility and failures" title="Hover tooltip text">The project utilizes the following technical stack for its implementation: