LOADING

js理论

2022/1/23

原生 ajax

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();

//步骤二:设置请求的url参数,参数一是请求的类型,
参数二是请求的url,可以带参数,
动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);

//步骤三:发送请求
ajax.send();

//步骤四:注册事件 onreadystatechange 状态改变就会调用，如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
ajax.onreadystatechange = function () {
    if (ajax.readyState==4 &&ajax.status==200) {
        console.log(ajax.responseText);//输入相应的内容
    }
}

前端有哪些页面优化方法?

  • 减少 HTTP 请求数
  • 从设计实现层面简化页面
  • 合理设置 HTTP 缓存
  • 资源合并与压缩
  • 合并 CSS 图片，减少请求数的又一个好办法。
  • 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
  • 多图片网页使用图片懒加载。
  • 在 js 中尽量减少闭包的使用
  • 尽量合并 css 和 js 文件
  • 尽量使用字体图标或者 SVG 图标，来代替传统的 PNG 等格式的图片
  • 减少对 DOM 的操作
  • 在 JS 中避免“嵌套循环”和 “死循环”
  • 尽可能使用事件委托（事件代理）来处理事件绑定的操作

浏览器渲染的主要流程是什么?

  • 将 html 代码按照深度优先遍历来生成 DOM 树。
  • css 文件下载完后也会进行渲染，生成相应的 CSSOM。
  • 当所有的 css 文件下载完且所有的 CSSOM 构建结束后，就会和 DOM 一起生成 Render Tree。
  • 接下来，浏览器就会进入 Layout 环节，将所有的节点位置计算出来。
  • 最后，通过 Painting 环节将所有的节点内容呈现到屏幕上。

undefined 和 null 区别

null： Null 类型，代表“空值”，代表一个空对象指针，使用 typeof 运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined 类型，当一个声明了一个变量未初始化时，得到的就是 undefined。

null 是 javascript 的关键字，可以认为是对象类型，它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是 javascript 才有的。undefined 是在 ECMAScript 第三版引入的，为了区分空指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为 undefined，没有实参的形参也是 undefined。

谈谈 This 对象的理解

this 是 js 的一个关键字，随着函数使用场合不同，this 的值会发生变化。
但是有一个总原则，那就是 this 指的是调用函数的那个对象。
this 一般情况下：是全局对象 Global。 作为方法调用，那么 this 就是指这个对象

IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？

我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
事件处理机制：IE 是事件冒泡、火狐是 事件捕获；
ev.stopPropagation();

如何编写高性能的 JavaScript？

  • 遵循严格模式：”use strict”;
  • 将 js 脚本放在页面底部，加快渲染页面;
  • 将 js 脚本成组打包，减少请求;
  • 使用非阻塞方式下载 js 脚本;
  • 尽量使用局部变量来保存全局变量;
  • 尽量减少使用闭包;
  • 使用 window 对象属性方法时省略 window;
  • 尽量减少对象成员嵌套;
  • 缓存 DOM 节点的访问;
  • 通过避免使用 eval 和 function()构造器;
  • 给 setTimeout()和 setInterval()传递函数而不是字符作为参数;
  • 尽量使用直接量创建对象和数组;

HTML 生命周期

HTML 页面的生命周期

HTML 页面的生命周期包含四个重要事件：

  • DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但样式表之类的外部资源可能尚未加载完成。
  • load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
  • beforeunload —— 当用户正在离开页面时。
  • unload —— 用户几乎已经离开了

生命周期的作用

  • DOMContentLoaded 事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。
  • load 事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。
  • beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
  • unload 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。

六、window.onload

当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。

七、window.onunload

当访问者离开页面时，window 对象上的 unload 事件就会被触发。我们可以在那里做一些不涉及延迟的操作，例如关闭相关的弹出窗口。
有一个值得注意的特殊情况是发送分析数据。
假设我们收集有关页面使用情况的数据：鼠标点击，滚动，被查看的页面区域等。
自然地，当用户要离开的时候，我们希望通过 unload 事件将数据保存到我们的服务器上。
有一个特殊的 navigator.sendBeacon(url, data) 方法可以满足这种需求，详见规范 w3c.github.io/beacon/。
它在后台发送数据，转换到另外一个页面不会有延迟：浏览器离开页面，但仍然在执行 sendBeacon。
当 sendBeacon 请求完成时，浏览器可能已经离开了文档，所以就无法获取服务器响应（对于分析数据来说通常为空）。
还有一个 keep-alive 标志，该标志用于在 fetch 方法中为通用的网络请求执行此类“离开页面后”的请求。你可以在 Fetch API 一章中找到更多相关信息。
如果我们要取消跳转到另一页面的操作，在这里做不到。但是我们可以使用另一个事件 —— onbeforeunload。

八、window.onbeforeunload

如果访问者触发了离开页面的导航（navigation）或试图关闭窗口，beforeunload 处理程序将要求进行更多确认。
如果我们要取消事件，浏览器会询问用户是否确定。

总结

页面生命周期事件：

  • 九、 当 DOM 准备就绪时，document 上的 DOMContentLoaded 事件就会被触发。在这个阶段，我们可以将 JavaScript 应用于元素。
    • 诸如 或 之类的脚本会阻塞 DOMContentLoaded，浏览器将等待它们执行结束。
    • 图片和其他资源仍然可以继续被加载。
  • 当页面和所有资源都加载完成时，window 上的 load 事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。
  • 当用户想要离开页面时，window 上的 beforeunload 事件就会被触发。如果我们取消这个事件，浏览器就会询问我们是否真的要离开（例如，我们有未保存的更改）。
  • 当用户最终离开时，window 上的 unload 事件就会被触发。在处理程序中，我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制，它很少被使用。我们可以使用 navigator.sendBeacon 来发送网络请求。