ಪುಟ ರೆಂಡರಿಂಗ್ ಅನ್ನು ವೇಗಗೊಳಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ವರ್ಡ್ಪ್ರೆಸ್ ಲೇಜಿ ಲೋಡ್ ಮಾಡುವುದು ಹೇಗೆ?

ವರ್ಡ್ಪ್ರೆಸ್ಪುಟ ರೆಂಡರಿಂಗ್ ವಿಧಾನಗಳನ್ನು ವೇಗಗೊಳಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡುವುದು.

JavaScript ನ ಡಿಫರ್ ಆಸ್ತಿ ಎಂದರೇನು?

ಪ್ರತಿಯೊಬ್ಬರೂ ಬಹುಶಃ ಈ ಪರಿಸ್ಥಿತಿಯನ್ನು ಎದುರಿಸಿದ್ದಾರೆ:

ತಲೆಯಲ್ಲಿ N ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿವೆ, ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಿದಾಗ, ಅದು ಪುಟ ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ, ಅದು ಸಾಮಾನ್ಯವಾಗಿ ಖಾಲಿಯಾಗಿರುತ್ತದೆ.

ಸಹಜವಾಗಿ, ಮೂಲ ಕೋಡ್‌ನಲ್ಲಿರುವ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಅಡಿಟಿಪ್ಪಣಿಗೆ ಹಾಕುವ ಮೂಲಕ ನಾವು ಇದನ್ನು ಪಡೆಯಬಹುದು.

ಆದಾಗ್ಯೂ, ಕೆಲವು ಸಂಕೀರ್ಣ ಅಭಿವೃದ್ಧಿ ಪರಿಸರಗಳು ಈ ಸರಳ ಕೆಲಸವನ್ನು ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣಗೊಳಿಸಬಹುದು.

ಈ ಹಂತದಲ್ಲಿ ನಾವು Defer ಆಸ್ತಿಯನ್ನು ಬಳಸಬಹುದು, ಇದು JavaScript ನಲ್ಲಿ ತುಲನಾತ್ಮಕವಾಗಿ ಅಪರೂಪದ ಆಸ್ತಿಯಾಗಿದೆ.

ನೀವು ಅದನ್ನು ಎಂದಿಗೂ ಬಳಸದಿರಬಹುದು, ಆದರೆ ಈ ಪರಿಚಯವನ್ನು ಓದಿದ ನಂತರ, ನೀವು ಅದನ್ನು ಬಿಡುವುದಿಲ್ಲ ಎಂದು ನನಗೆ ಖಾತ್ರಿಯಿದೆ.

ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡಿದ ನಂತರ ಸ್ಕ್ರಿಪ್ಟ್ ಪಾರ್ಸ್ ಮಾಡಲು ಅವಕಾಶ ನೀಡುವುದು ಇದರ ಮುಖ್ಯ ಕಾರ್ಯವಾಗಿದೆ, ಇದು ಲೋಡ್‌ನಲ್ಲಿ ಪಾರ್ಸ್ ಮಾಡುವ ಬದಲು, ಈವೆಂಟ್-ಪ್ರಚೋದಿತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಹೊಂದಿರುವ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗೆ ಪೂರ್ಣ ಪುಟ ಲೋಡ್ ವೇಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಹೌದು, ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್ ಡಿಫರ್ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿದ್ದರೆ, HTML ಪುಟವನ್ನು ತಲೆಯ ಮೇಲೆ ಇರಿಸಿದರೂ ಅದನ್ನು ಪಾರ್ಸ್ ಮಾಡಿದ ನಂತರ ಅದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ, ಇದು ಪುಟದ ಕೆಳಭಾಗದಲ್ಲಿ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಹಾಕುವಂತೆಯೇ ಇರುತ್ತದೆ.

ಸಹಜವಾಗಿ, ವಿಳಂಬದ ಬಳಕೆಯು ಸಹ ಸೀಮಿತವಾಗಿದೆ, ಸಾಮಾನ್ಯವಾಗಿ 2 ಅಂಶಗಳಿಗೆ ಗಮನ ಕೊಡಿ:

1) ಡಾಕ್ಯುಮೆಂಟ್. ರೈಟ್ ಆಜ್ಞೆಯನ್ನು ಮುಂದೂಡಿದ ಡಿಫರ್ ಟೈಪ್ ಸ್ಕ್ರಿಪ್ಟ್ ಬ್ಲಾಕ್‌ನಲ್ಲಿ ಕರೆಯಬೇಡಿ;

• ಏಕೆಂದರೆ document.write ನೇರ ಔಟ್‌ಪುಟ್ ಪರಿಣಾಮವನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ.

2) ಯಾವುದೇ ತಕ್ಷಣದ ಕಾರ್ಯಗತಗೊಳಿಸುವ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಡಿಫರ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಲ್ಲಿ ಜಾಗತಿಕ ವೇರಿಯಬಲ್‌ಗಳು ಅಥವಾ ಕಾರ್ಯಗಳನ್ನು ಬಳಸಬೇಡಿ.

WordPress ನಲ್ಲಿ ಬಳಸುವ ಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ Defer ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ

WordPress ನಲ್ಲಿ, WordPress ಬಳಸುವ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗೆ ನಾವು ಡಿಫರ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೇಗೆ ಸೇರಿಸಬಹುದು?

ನಾವು ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಪ್ರಸ್ತುತ ಥೀಮ್‌ನ functions.php ಫೈಲ್‌ಗೆ ಸೇರಿಸಬಹುದು ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• ಮೇಲಿನ ಕೋಡ್ ಪ್ರಕಾರ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆವರ್ಡ್ಪ್ರೆಸ್ ಪರಿಚಯಿಸಿದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ಪರಿಣಾಮಕಾರಿಯಾಗಲಿದೆ.

ಮುನ್ನೆಚ್ಚರಿಕೆಗಳು

ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆ ನಿರ್ವಹಣೆಯು ಖಾಲಿ ಪ್ರದರ್ಶಿಸಬಹುದು:

ನೀವು ಮೇಲಿನ ಕೋಡ್ ಅನ್ನು ಬಳಸಿದರೆ, ನೀವು ನೈಜ-ಸಮಯದ ಪೂರ್ವವೀಕ್ಷಣೆ ನಿರ್ವಹಣೆಯನ್ನು ತೆರೆದಾಗ (ಗೋಚರತೆ → ಕಸ್ಟಮೈಸ್), ಅದು ಖಾಲಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು, ಆದ್ದರಿಂದ ದಯವಿಟ್ಟು ಅದನ್ನು ಸೂಕ್ತವಾಗಿ ಬಳಸಿ.

ನೈಜ-ಸಮಯದ ಪೂರ್ವವೀಕ್ಷಣೆ ನಿರ್ವಹಣೆಯ ಅಗತ್ಯವಿರುವಾಗ, ಮೇಲಿನ ಕೋಡ್ ಅನ್ನು ಕಾಮೆಂಟ್ ಮಾಡಿ ಮತ್ತು ಕಸ್ಟಮೈಸೇಶನ್ ಪೂರ್ಣಗೊಂಡ ನಂತರ ಕಾಮೆಂಟ್ ಮಾಡಿದ ಕೋಡ್ ಅನ್ನು ಅಳಿಸಿ.

PHP ಕಾಮೆಂಟ್ ಕೋಡ್ ಉದಾಹರಣೆ:

/*

这里是代码 

*/