Research And Implementation Of CSS Simplification Based On Dynamic Analysis Technology

With the development of web technology and a large number of applications,CSS is one of the three cores of web technology.Due to its special cascading mechanism and lack of unified management specifications,a large number of styles are redundant.In the current era of supreme user experience,how to streamline CSS styles more efficiently and conveniently and improve web page loading speed has become an urgent research topic.Existing solutions either focus only on the repetition of the semantic declarations of the CSS itself,which can be streamlined in size,or they are streamlined solutions based on static string matching,which can easily miss the dynamic generation of JavaScript and cause missed detection.Aiming at the above problems,this paper proposes a simplified CSS solution based on dynamic analysis technology,and gives the implementation on the browser and server side respectively.The main research results are reflected in the following three aspects:Firstly,a simplified CSS scheme based on dynamic analysis is proposed.The solution dynamically executes the JavaScript code introduced by the target website,accurately collects style dependencies from HTML and JavaScript,and then streamlines the target website based on these dependency data and the total style data loaded by the website.Secondly,design and implement a browser-based CSS streamlining tool.With the help of the browser’s ability to control the web page,the tool counts the style dependencies and total style set in HTML and JavaScript by communicating with the page,and uses its own life cycle characteristics to implement functions such as CSS simplification and page style statistical analysis.Experiments show that this streamlining tool can accurately and conveniently reduce redundant CSS code that has been loaded but not used in the target website,thereby improving page loading speed.Thirdly,design and implement a selenium-based CSS-streamlined program that can run on the server.With the help of Selenium’s full control of Chrome in Headless mode,the program implements functions such as dependency collection,data statistics,and CSS streamlining.Through comparison experiments,it is verified that the streamlined program still maintains good performance in the case of a server-side environment without visual conditions and requiring a large number of manual triggers to implement incremental code execution.