JavaScript Domready 的作用是等待頁面元素完全加載后才執行 JavaScript 代碼。當你的 JS 代碼依賴于 DOM 元素或樣式表時，這個作用十分重要。

如果你在頁面未完全加載時執行 JavaScript 代碼，可能會導致元素不存在而拋出錯誤，或者樣式表還未加載就直接操作 DOM 而導致樣式出錯。

$(document).ready(function(){
// 在 DOM 加載完成后執行的代碼
});

使用 jQuery 的方式可以將代碼包裹在 Domready 內，但是這并不是 JavaScript 本身就支持的，實際上，Domready 只是一種約定俗成的方式，真正實現等待頁面元素加載完成的方式可能因庫而異。

document.addEventListener('DOMContentLoaded', function(){
// 在 DOM 加載完成后執行的代碼
});

上述代碼是使用原生 JavaScript 實現 Domready 的方式。這種方式相對比 jQuery 更加輕量級，但是可能不適用于老版本 IE 瀏覽器。

除了常用的 Domready 外，還有一種常見方式叫做 Window Load，它等待頁面所有資源完全加載后再運行 JavaScript 代碼。

window.onload = function(){
// 在頁面所有資源加載完成后執行的代碼
}

使用 Window Load 會非常慢，因為它等待的不僅僅是 DOM 元素，而是所有外部文件（包括 CSS、圖片等）的加載，如果文件過多或者文件過大，可能需要很長時間。

另外，因為 Domready 和 Window Load 執行的時機不同，所以它們之間需要謹慎選擇，如果你的代碼不依賴 CSS 文件或者外部資源，那么使用 Domready 會更好。

在實際項目中，因為工程代碼往往是經過壓縮合并而成的，所以我們通常使用框架內置的方法來實現 Domready。

// 在 React 中
import ReactDOM from 'react-dom';
ReactDOM.render(
<MyComponent />,
document.getElementById('root')
);
// 在 Vue 中
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

在上述代碼中，React 用 ReactDOM.render 在 DOM 加載完成后渲染組件，Vue 則是使用 new Vue 創建實例并掛載到指定 DOM 元素上。

總的來說，JavaScript Domready 是一個非常重要的概念，如果你想要避免因 JS 代碼執行時 DOM 元素未加載而導致的錯亂、報錯問題，那么掌握 Domready 就很必要了。