【09】大厂面试知识总结 - 从JS基础知识到JS Web API_js练习项目大厂api文档-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32629809/article/details/120190530

本文探讨了JavaScript的基础知识，包括变量类型、原型链和作用域，以及JSWebAPI中的DOM操作。DOM作为树形数据结构，对于前端工程师至关重要。了解DOM的API，如attr与property的区别，以及如何通过一次性插入多个DOM节点来优化性能，是每个前端开发者的基础技能。即使在Vue和React等框架盛行的今天，DOM操作依然是不可或缺的知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS基础知识，规定语法（ECMA 262标准）
JS Web API，网页操作的API（W3C标准）
前者是后者的基础，两者结合才能真正实际应用

JS基础知识

变量的类型和计算
原型和原型链
作用域和闭包

JS Web API

DOM
BOM
事件绑定
ajax
存储

前言

vue和React框架应用广泛，封装了DOM操作
但DOM操作一直都是前端工程师的基础、必备知识
只会vue而不懂DOM操作的前端程序员，不会长久

DOM操作（Document Object Model）

题目
- DOM是哪种数据结构：树（DOM树）
- DOM操作的常用API
- attr和property的区别
- 一次性插入多个DOM节点，考虑性能
知识点
- DOM本质

<?xml version="1.0" encoding="UTF-8">
<node>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
    <other>
        <a></a>
        <b></b>
    </other>
</node>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <p>this is p</p>
    </div>
</body>
</html>

- DOM节点操作
- DOM结构操作
- DOM性能

解答

property和attribute

property：修改对象属性，不会体现到html结构中
attribute：修改html属性，会改变html结构
两者都会引起DOM重渲染

将频繁操作改为一次性操作

const list = document.getElementById('list')

// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()

for (let i  = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`

    // 先插入文档片段中
    frag.appendChild(li)
}

// 都完成之后，再统一插入到 DOM 结构中
list.appendChild(frag)