A brief discussion on how Atom implements HTML real-time preview

AtomHow to implement HTML real-time preview? The following article will introduce to you the native and plug-in methods of Atom editor to implement real-time HTML preview. I hope it will be helpful to you!

Atom editor implements HTML real-time preview

1. Native implementation

PressCtrl Shift Min the edit box to open the native preview. (Without CSS style)

2. Plug-in atom-html-preview implementation

Click File->settings–>install-> to search for atom-html -preview -> Download, pressCtrl Shift Hin the edit box to open the preview panel (with CSS style). [Related recommendations:atom usage tutorial]

3. JavaScript window.onload

window.onload()method Used to perform operations immediately after the web page is loaded, that is, execute a method immediately after the HTML document is loaded.

window.onload()Usually used for elements to execute script code after the page is fully loaded (including images, css files, etc.). There are multiple function syntax to be executed:

window.onload=function(){ Func1(); Func2(); Func3(); ..... }

After the page is loaded, Func1, Func2, and Func3 are executed in sequence, and only executed once.

4.window.requestAnimationFrame

window.requestAnimationFrame()Tell the browser that you want to perform an animation , and requires the browser to call the specified callback function to update the animation before redrawing next time. This method requires passing in a callback function as a parameter, which will be executed before the next redraw of the browser.

【Related recommendation: "atom tutorial"】

The above is the detailed content of A brief discussion on how Atom implements HTML real-time preview. For more information, please follow other related articles on the PHP Chinese website!