前端基础知识整理汇总一

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

创新互联建站专注于新兴企业网站建设,成都响应式网站建设公司,成都商城网站开发。新兴网站建设公司,为新兴等地区提供建站服务。全流程按需搭建网站，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

HTML页面的生命周期

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

  • DOMContentLoaded —— 浏览器已经完全加载了 HTML，DOM 树已经构建完毕，但是像是 和样式表等外部资源可能并没有下载完毕。
  • load —— 浏览器已经加载了所有的资源(图像，样式表等)。
  • beforeunload —— 当用户即将离开当前页面(刷新或关闭)时触发。正要去服务器读取新的页面时调用，此时还没开始读取;
  • unload —— 在用户离开页面后触发。从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。
  • 每个事件都有特定的用途:
  • DOMContentLoaded —— DOM 加载完毕，所以 JS 可以访问所有 DOM 节点，初始化界面。
  • load —— 附加资源已经加载完毕，可以在此事件触发时获得图像的大小(如果没有被在 HTML/CSS 中指定)
  • beforeunload —— 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
  • unload —— 删除本地数据localstorage等

DOMContentLoaded

DOMContentLoaded 由 document 对象触发。使用 addEventListener 来监听它：

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

DOMContentLoaded 和脚本

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

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

DOMContentLoaded 与样式表

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

load

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

 
 
 
 
    
  
  
  
  
  1. window.addEventListener('load', function(e) {...});
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. window.onload = function(e) { ... };
    4.

beforeunload

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

 
 
 
 
    
  
  
  
  
  1. // 推荐使用
    2. 
  
  
  
  
  2. window.addEventListener('beforeunload', (event) => {
    3. 
  
  
  
  
  3.   // Cancel the event as stated by the standard.
    4. 
  
  
  
  
  4.   event.preventDefault();
    5. 
  
  
  
  
  5.   // Chrome requires returnValue to be set.
    6. 
  
  
  
  
  6.   event.returnValue = '关闭提示';
    7. 
  
  
  
  
  7. });
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. 
  
  
  
  
  10. window.onbeforeunload = function (e) {
    11. 
  
  
  
  
  11.   e = e || window.event;
    12. 
  
  
  
  
  12.   // 兼容IE8和Firefox 4之前的版本
    13. 
  
  
  
  
  13.   if (e) {
    14. 
  
  
  
  
  14.     e.returnValue = '关闭提示';
    15. 
  
  
  
  
  15.   }
    16. 
  
  
  
  
  16.   // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
    17. 
  
  
  
  
  17.   return '关闭提示';
    18. 
  
  
  
  
  18. };
    19.

unload

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

 
 
 
 
    
  
  
  
  
  1. // 推荐使用
    2. 
  
  
  
  
  2. window.addEventListener("unload", function(event) { ... });
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. window.onunload = function(event) { ... };
    5.

readyState

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

  • loading 加载 —— document仍在加载。
  • interactive 互动 —— 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
  • complete —— 文档和所有子资源已完成加载。 load 事件即将被触发。

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

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

Script标签：向HTML插入JS的方法

没有 defer 或 async，所有'字符串，如果必须出现，必须使用转义标签‘\’

  •     alert('<\/script>');
  •   }

  • 包含在

  • // 带有src属性的元素不应该在标签之间包含额外的js代码，即使包含，只会下载并执行外部文件，内部代码也会被忽略。

    • 与嵌入式js代码一样, 在解析外部js文件时，页面的处理会暂时停止。

    改变脚本行为的方法

    1. defer: 立即下载，延迟执行

    加载和渲染后续文档元素的过程将和脚本的加载并行进行(异步)，但是脚本的执行会在所有元素解析完成之后。脚本总会按照声明顺序执行。

    在DOMContentLoaded事件之前执行。

     
 
 
 
      
  
  
  
  
      2.

    2. async: 异步脚本

    加载和渲染后续文档元素的过程将和脚本的加载与执行并行进行(异步)。但是async 在下载完毕后的执行会阻塞HTML的解析。脚本加载后马上执行，不能保证异步脚本按照他们在页面中出现的顺序执行。

    一定会在load事件之前执行，可能会在DOMContentLoaded事件之前或之后执行。

     
 
 
 
      
  
  
  
  
      2.

    区别：

    meta

    META标签是HTML标记HEAD区的一个关键标签，它提供的信息虽然用户不可见，但却是文档的最基本的元信息。 除了提供文档字符集、使用语言、作者等网页相关信息外，还可以设置信息给搜索引擎，目的是为了SEO(搜索引擎优化)。

    HTML 元素表示那些不能由其它 HTML 元相关(meta-related)元素（(、,