javaScript拾遗_document.getelementbyid('root')-CSDN博客

本文链接：https://blog.csdn.net/qq_46222031/article/details/125958203

JS有哪些内置对象

js 中的内置对象主要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象

致寒疾，空数剑

值属性

例如 Infinity、NaN、undefined、null 字面量

函数属性

例如 eval()、parseFloat()、parseInt() 等

基本对象

Object、Function、Boolean、Symbol、Error 等

数字和日期对象

Number、Math、Date

使用键的集合对象

Map、Set、WeakMap、WeakSet

控制抽象对象

Promise、Generator 等

常用组件

下拉框

<select>

<option>请选择</option>

</select>

输入框

<input type="text" placeholder="请输入您的姓名">

text 单行文本框

password 密码域（

checkbox 复选框

radio 单选框（单选框要写name属性确保单选）

file 文件域

name 数据的名字（相当于给数据写名字）

value 提交数据

button 提交按钮（这个要配合js使用）

submit 提交按钮（为保险起见不同浏览器编译出的不同在写这个属性是后面要加value属性）

reset 重置按钮（（为保险起见不同浏览器编译出的不同在写这个属性是后面要加value属性

文本域

<textarea name="" id="" cols="60" rows="10"></textarea>

事件类型

鼠标事件：

onclick：鼠标单击对象时触发

onmousedown：鼠标按钮被按下时触发

onmousemove：鼠标被移动时触发

onmouseout：鼠标离开监听该事件的元素或子元素时触发

onmouseover：鼠标移动到监听该事件的元素或子元素时触发

onmouseup：鼠标按键被松开时触发

mouseleave：鼠标移出；

键盘事件：

onkeydown：键盘按键按下触发

keypress：键盘按键按住触发

keyup：键盘按键松开触发

绑定方法

在DOM中直接绑定事件：

<input type="button" value="click me" οnclick="hello()">

在JavaScript代码中绑定事件

<input type="button" value="click me" id="btn">

document.getElementById("btn").onclick = function(){

alert("hello world!");

}

使用事件监听绑定事件

element.addEventListener('事件名称', 处理函数，true（捕获阶段）false（冒泡阶段）

页面加载过程

readyState 属性描述了文档的加载状态，在整个加载过程中 document.readyState会不断变化，每次变化都会触发readystatechange事件。

readyState的值变化：

1.loading（加载）文档被加载时

2.interactive（交互）文档结束加载并且被解析，可以操作对象，但部分资源还没有加载完成；如图像，样式表和框架之类的子资源仍在加载

3.complete（完成）全部资源已经加载完成。状态表示window的load 事件即将被触发。

4.loaded （加载完毕）文档数据加载完毕

1、document加载结束并解析，此时css等其他资源未加载完成。

此时readyState为'interactive'，表明document已经load并解析完成，

触发 readystatechange，

触发DOMContentLoaded(在大多数浏览器上的表现如此)。此时，加载完成且带有defer标记的脚本，会按顺序开始执行。

2、css、img等子资源加载完成之后

此时readyState为'complete'

此时触发window.load事件

3、点击关闭标签或者刷新时，会依次触发beforeunload、unload事件。

window.onload =function

DOM和BOM

DOM 指的是文档对象模型，它指的是把文档当做一个对象来对待，这个对象主要定义了处理网页内容的方法和接口。

BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的方法和接口。BOM 的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。

关于取消请求

调用 XMLHttpRequest 对象上的 `abort` 方法来取消请求：

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://developer.mozilla.org/", true);
xhr.send();
setTimeout(() => xhr.abort(), 300);

通过 Axios 内部提供的 `CancelToken` 来取消请求：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.post('/user/12345', {
  name: 'semlinker'
}, {
  cancelToken: source.token
})

source.cancel('Operation canceled by the user.'); // 取消请求，参数是可选的

axios.CancelToken.token

axios.CancelToken.cancel

Cors

使用cors中间件解决跨域问题

1、npm i cors

2、const cors = require( " cors " )//导入中间件

3、在路由之前调用app.use( cors )//配置中间件

什么是cors

跨域资源共享，有一些列HTTP响应头组成，这些HTTP响应头决定浏览器是否能阻止前端js代码跨域获取资源。配置了CORS相关的HTTP响应头就可以解决跨域限制。

Access-Control-Allow-Origin

origin指定了允许访问该资源的url ，那些网页可以访问资源

Access-Control-Allow-Headers

cors仅支持9个请求头，Access-Control-Allow-Headers允许对额外的请求头声明

Access-Control-Allow-Methods

默认情况，cors仅支持客户端发起GET、POST、HEAD请求

若希望发起PUT、DDELETE等请求，需要Access-Control-Allow-Methods设置支持的方法

cors的两种请求

请求方式的限制: GET POST HEAD
请求头字段的限制: Accept Accept-Language Content-Language Content-Type DPR Downlink Save-Data Viewport-Width Width.
请求头值的限制: Content-Type, 值为 text/plain 、multipart/form-data 、application/x-www-form-urlencoded(这个是 form 提交默认的 Content-Type) 三者中的一个.

RESTFUL

Rest(Representational State Transfer)全称是表述性状态转移,

优点

(一) 优点:

它是面向资源的(名词)
通过URL就知道需要什么资源
通过Http Method(get/post...)就知道针对资源干什么
通过Http Status Code就知道结果如何

伪元素与伪类

0.1+0.2=0.3

IEEE 754 中双精度浮点数使用 64 bit 来进行存储：

第一位存储符号表示正负号 0 正 1 负
2-12位存储指数表示次方数
13-64位存储尾数表示精确度

8.8125 =》1000.1101=》 1.0001101 * 2^3

尾数位就是科学计数法的小数部分： 0001101

解决方法

1、toFIxed四舍五入

2、引入第三方库：Math.js

3、乘以一个10的幂次方：把需要计算的数字乘以10的n次方，让数值都变为整数，计算完后再除以10的n次方，这样就不会出现浮点数精度丢失问题

PostMessage

允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.

发送数据:

postMessage

otherWindow.postMessage(message, targetOrigin, [transfer]);

接收数据: 监听message事件的发生

监听message

window.addEventListener("message", receiveMessage, false) ;
function receiveMessage(event) {
     var origin= event.origin;
     console.log(event);
}

https握手

第1次握手

客户端向服务器发送一个随机数clientKey
客户端发送 SSL协议版本
客户端发送可选的加密算法
客户端发送可选的压缩算法

第2次握手

服务端向客户端发送随机数server key
服务端向客户端发送选择的压缩算法
服务端向客户端发送选择的加密算法
服务端发送数字证书(包含公钥)

第3次握手

客户端发送第三个随机数premaster key
使用3个key来生成会话用的对称密钥。
客户端通知编码变更：接下来会话都会加密。
客户端发送握手结束通知（一条前面所有内容的hash值，供服务端校验）

第4次握手

服务端接收到加密后的premaster key, 用私钥解密，用三个key计算出会话用的对称密钥。
通知编码变更
通知握手结束
发送hash值

React18新特性

1、批处理

在 18 之前，只有在react事件处理函数中，才会自动执行批处理，其它情况会多次更新
在 18 之后，任何情况都会自动执行批处理，多次更新始终合并为一次

2、 Render API

17

const root = document.getElementById('root')!;

ReactDOM.render(<App />, root);

18

const root = document.getElementById('root')!;

ReactDOM.createRoot(root).render(<App />);

3、flushSync

批处理是一个破坏性改动，如果你想退出批量更新，你可以使用 flushSync

4、Suspense

允许我们为尚未准备好显示的 UI 元素指定后备来解决该问题。

<Suspense fallback={<Loading/>}>
<MyComponent myData={myData}/>
</Suspense>

5、ConcurrentMode（并发模式）

React 17 和 React 18 的区别就是：从同步不可中断更新变成了异步可中断更新。

性能优化指标以及工具

RAIL 模型

三大核心指标

LCP：最大内容绘制，LCP（Largest Contentful Paint），用于记录视窗内最大的元素绘制的时间
FID：首次输入延迟，FID（First Input Delay），可交互时间
CLS：累计位移偏移，CLS（Cumulative Layout Shift），记录了页面上非预期的位移波动

工具

Lighthouse

WebPageTest

自定义Hook（自定义函数）

执行条件

hooks本质上是一个函数。prop的修改就是hooks的执行条件

自定义hook基本用法

自定义hook是一个函数，以use开头

import { useEffect, useState } from "react";

//定义size对象
interface WindowSize {
    width: number,
    height: number
}
const useWindowSize = () => {
    const [size, setSize] = useState<WindowSize>({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    })

    useEffect(() => {
        const fun = () => {
            setSize({
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            })
        }
        window.addEventListener('resize', fun)
        return () => {
            window.removeEventListener('resize', fun)
        }
    },[])
    return size
}

export default useWindowSize

SEO(Search Engine Optimization)，即搜索引擎优化

浏览器会使用爬虫更新自己的关键词数据库，用于搜索展示。

一个关键词对应多个网址就有排序问题，相应的当与关键词最吻合的网址就会排在前面。网站内容能被引擎识别，搜索引擎就会提升该网站的权重。这个过程称为seo

优化规范

（1）控制首页链接数量

（2）扁平化的目录层次

尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。

（3）导航优化

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，

（4）利用布局，把重要内容HTML代码放在最前

（5）控制页面的大小，减少http请求，提高网站的加载速度。

Z-index

z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：(父浮)

父元素position为relative时，子元素的z-index失效。
元素在设置z-index的同时还设置了float浮动。

map连带键名一起遍历

const map=new Map([[1,'二'],[2,'三'],[3,'四']])

for( let [key,value] of map){

    console.log(key,value)

}

HTML与XHTML

XML是可扩展标记语言，用来存储数据和传输数据用的

而HTML超文本标记语言，用来显示数据用的

XML更严格是HTML的子集

Redux 和 Vuex 有什么区别，它们的共同思想

（1）Redux 和 Vuex区别

Vuex改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，无需switch，只需在对应的mutation函数里改变state值即可
Vuex由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可
Vuex数据流的顺序是∶View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变（vue检测到数据变化自动渲染）

通俗点理解就是，vuex 弱化 dispatch，通过commit进行 store状态的一次更变;取消了action概念，不必传入特定的 action形式进行指定变更;弱化reducer，基于commit参数直接对数据进行转变，使得框架更加简易;

（2）共同思想

单—的数据源
变化可以预测

本质上：redux与vuex都是对mvvm思想的服务，将数据从视图中抽离的一种方案; 形式上：vuex借鉴了redux，将store作为全局的数据中心，进行mode管理;

Composition API与React Hook很像，区别是什么

从React Hook的实现角度看，React Hook是根据useState调用的顺序来确定下一次重渲染时的state是来源于哪个useState，所以出现了以下限制

不能在循环、条件、嵌套函数中调用Hook
必须确保总是在你的React函数的顶层调用Hook
useEffect、useMemo等函数必须手动确定依赖关系

顺序和依赖

而Composition API是基于Vue的响应式系统实现的，与React Hook的相比

声明在setup函数内，一次组件实例化只调用一次setup，而React Hook每次重渲染都需要调用Hook，使得React的GC比Vue更有压力，性能也相对于Vue来说也较慢
Compositon API的调用不需要顾虑调用顺序，也可以在循环、条件、嵌套函数中使用
响应式系统自动实现了依赖收集，进而组件的部分的性能优化由Vue内部自己完成，而React Hook需要手动传入依赖，而且必须必须保证依赖的顺序，让useEffect、useMemo等函数正确的捕获依赖变量，否则会由于依赖不正确使得组件性能下降。

实现私有属性

1、Symbol实现

2、class中使用#

class Dog {
    #name;
    constructor(name){
        this.#name = name;
    } 
    hello(dog){
        console.log(this.#name + '说:你好' + dog.#name);
    }
}

3、闭包

1、立即执行的返回值为函数的，匿名函数

2、返回的函数是闭包，原型上有读取方法

const Person = (function() {
  let name;

  function Person(n) {
      name = n;
  }

  Person.prototype.getName = function() {
      return name;
  };

  return Person;
}());
let person1 = new Person('小明');

4、weakMap

const Person = (function() {
  const private = new WeakMap();

  function Person(name) {
    private.set(this, {});
    private.get(this).name = name;
  }

  Person.prototype.getName = function() {
      return private.get(this).name;
  };

  return Person;
}());

let person1 = new Person('小明');
let person2 = new Person('大明');
console.log(person1.getName()); // 小明

React Hooks 解决了哪些问题

组件之间难以复用状态逻辑。

过去常见的解决方案是高阶组件、render props 及状态管理框架。

复杂的组件变得难以理解。

生命周期函数与业务逻辑耦合太深，导致关联部分难以拆分。

人和机器都很容易混淆类

如this

useEffect 与 useLayoutEffect 的区别

useEffect 在 React 的渲染过程中是被异步调用的，用于绝大多数场景；

而 useLayoutEffect 会在所有的 DOM 变更之后同步调用，主要用于处理 DOM 操作

useLayoutEffect总是比useEffect先执行。

用es5如何实现 let 和 const

let

(function(){
	var a = 1;
    console.log(a)
})();

console.log(a)

const

var f = Object.freeze({'name':'admin'});

VUE与REACT异同

同

1、都使用了 vm

2、都有props的概念，允许组件之间传递数据

3、都鼓励组件化，将应用吃啊分成明确模块

异

1、数据流：vue双向绑定，react支持单向数据流

2、编写模板：vue是template近似html，react使用jsx

3、监听数据变化原理：vue使用数据劫持精确数据变化，react需要使用pureCOmponent等进行优化

webSocket

全双工通讯的网络技术，属于应用层协议。

浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

资源缓存的位置

1、service worker：运行在主线程之外，可以完成离线缓存，消息推送，网络代理等功能。

2、memory cache：内存缓存，效率最快持续性短。关闭tab页，内存中的缓存也释放了。

3、Disk Cache：硬盘中的缓存，读取速度慢，融安凌达，时间长。

在CORS请求中，如果想要传递Cookie，就要满足以下三个条件：

在请求中设置 withCredentials

默认情况下在跨域请求，浏览器是不带 cookie 的。但是我们可以通过设置 withCredentials 来进行传递 cookie.

// 原生 xml 的设置方式
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
// axios 设置方式
axios.defaults.withCredentials = true;
复制代码

Access-Control-Allow-Credentials 设置为 true
Access-Control-Allow-Origin 设置为非 *

SVG和Canvas的区别

Canvas是用笔刷来绘制2D图形的，SVG是用标签来绘制不规则矢量图的
不同点：Canvas画的是位图，SVG画的是矢量图
不同点：SVG支持分层和事件，Canvas不支持
不同点：SVG节点过多时渲染慢，Canvas性能好一点，但写起来更复杂

优先级计算

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素（类型）、伪元素选择器则该位得一分。
1. 通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。
2. 继承的属性优先级为0

选择器	千位	百位	十位	个位	优先级
h1	0	0	0	1	0001
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="en-US"] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100
内联样式	1	0	0	0	1000

ul { color: blue !important; }//!important优先级最高，但是后面是继承的，所以为0
ul > li { color: green; } 有两个元素选择器，优先级为0002
ul li + li { color: red; }有3个元素选择器，优先级为0003
li { color: yellow; }一个元素选择器，优先级为0001

所以最终的结果是：