前端基础知识整理汇总（上）

　　前端基础知识整理汇总（上）

　　又是一年跳槽季，最近听到最多的消息就是，我们公司又有同事离职了，所以，如果你想在职场上掌握主动权，你就需要比别人更加努力，更加夯实的技能基础，不然你拿什么去跟别人拼？所以，今天我们跟大家分享一些前端基础知识，希望对你有所帮助。HTML页面的生命周期

　　HTML页面的生命周期有以下三个重要事件：

　　每个事件都有特定的用途:

　　DOMContentLoaded

　　DOMContentLoaded 由 document 对象触发。使用 addEventListener 来*敏*感*词*它：

　　document.addEventListener("DOMContentLoaded", () => {});

　　DOMContentLoaded 和脚本

　　当浏览器在解析 HTML 页面时遇到了标签，将无法继续构建DOM树（UI 渲染线程与 JS 引擎是互斥的，当 JS 引擎执行时 UI 线程会被挂起），必须立即执行脚本。所以DOMContentLoaded有可能在所有脚本执行完毕后触发。

　　外部脚本（带src的）的加载和解析也会暂停DOM树构建，所以DOMContentLoaded也会等待外部脚本。带async的外部脚本，可能会在DOMContentLoaded事件之前或之后执行。带defer的脚本肯定会在在DOMContentLoaded事件之前执行。

　　DOMContentLoaded 与样式表

　　外部样式表并不会阻塞 DOM 的解析，所以DOMContentLoaded并不会被它们影响。

　　load

　　window对象上的load事件在所有文件包括样式表，图片和其他资源下载完毕后触发。

　　window.addEventListener('load', function(e) {...});<br />window.onload = function(e) { ... };

　　beforeunload

　　当窗口即将被卸载（关闭）时, 会触发该事件。此时页面文档依然可见, 且该事件的默认动作可以被取消。beforeunload在unload之前执行，它还可以阻止unload的执行。

　　// 推荐使用window.addEventListener('beforeunload', (event) => { // Cancel the event as stated by the standard. event.preventDefault(); // Chrome requires returnValue to be set. event.returnValue = '关闭提示';});<br /><br />window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示';};

　　unload

　　用户离开页面的时候，window对象上的unload事件会被触发，无法阻止用户转移到另一个页面上。

　　// 推荐使用window.addEventListener("unload", function(event) { ... });<br />window.onunload = function(event) { ... };

　　readyState

　　document.readyState表示页面的加载状态，有三个值：

　　可以在readystatechange中追踪页面的变化状态：

　　document.addEventListener('readystatechange', () => { console.log(document.readyState);});