likes
comments
collection
share

JavaScript核心基础

作者站长头像
站长
· 阅读数 82
DOM操作与性能问题
  • DOM 操作是否会带来性能问题
  • 页面需要渲染1万个DOM元素， 如何提升页面性能
事件冒泡和事件委托

  • 事件委托到父节点或者document中，哪个更好

    • 浏览器会将页面上具有事件处理程序的区域进行标记，被标记的区域会与主线程进行通信
    • 如果在document.body上绑定事件，整个页面都会被标记。即使我们不关心某些部分的用户交互

  • 事件委托的顺序：事件捕获阶段、目标阶段、事件冒泡阶段

  • document.body添加事件委托，每次触发事件时，会产生生等待，为什么会产生等待？passive: true的作用是什么？

    • 产生等待是因为合成器线程与主线程进行通信。passive 设置为 true 时，表示 listener 永远不会调用 preventDefault。根据规范，passive 选项的默认值始终为 false，这引入了处理某些触摸事件（以及其他）的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性，从而导致滚动处理期间性能可能大大降低。
虚拟DOM的设计

  • 为什么要使用虚拟DOM

  • 为什么要使用js对象来描述DOM

  • 简单描述下DOM的实现原理

  • 虚拟DOM设计的过程

    • 用JS对象模拟DOM树，得到一棵虚拟DOM树
    • 当页面数据变更时，生成新的虚拟DOM树，比较新旧两棵虚拟DOM树的差异
    • 把差异应用到真正的DOM树上
页面布局原理

  • 常说的盒子模型是指什么

    • 盒模型主要用来描述元素所占空间的内容，由四部分组成

  • 什么是文档流

    • 正常的文档流在 HTML 里面为从上到下，从左到右的排版布局

  • 浮动元素为什么无法撑开父元素？如何解决

页面布局技巧

  • 为什么将某个元素z-index设置为9999999，但是它依然被其他元素遮挡住了呢

    • 因为除了同级元素以外，z-index值的设置效果还会受到父元素的z-index值的影响，z-index值的设置只决定同一父元素中的同级子元素的堆叠顺序

  • 居中布局的几种实现方式

    • 传统布局方式
    • Flex布局方式
    • Grid布局方式

  • 对Flex布局， Grid布局方式的理解和使用

    • 通过flex-direction调整 Flex 元素的排列方向（主轴的方向）；

      用flex-wrap实现多行 Flex 容器如何换行；

      使用justify-content调整 Flex 元素在主轴上的对齐方式；

      使用align-items调整 Flex 元素在交叉轴上如何对齐；

      使用align-content调整多根轴线的对齐方式。

浏览器的布局过程
  • 浏览器在进行页面布局过程会做些什么
  • 重绘和重排会导致什么问题
  • css动画和JS动画相比， 有什么优缺点
JavaScript的原型和继承

  • 如何理解JavaScript中的“一切皆对象"

  • 如何创建一个对象

  • 函数也是一个对象，有属性和值。 所有函数会有一个特别的属性prototype，该属性的值也是一个对象，这个对象便是我们常说的原型对象。

  • --proto-- 与 prototype的区别

    • --proto--属性指向对象的原型对象。
    • 对函数来说，原型对象是prototype

  • --proto--和prototype的关系

    • 每个对象都有-proto-属性来标识自己所继承的原型对象，但只有函数才有prototype属性
    • 对于函数来说，每个函数都有一个prototype属性，该属性为该函数的原型对象
    • 通过将实例对象的proto属性赋值为其构造函数的原型对象prototype，JavaScript 可以使用构造函数创建对象的方式，来实现继承

  • 函数原型对象prototype的特点

    • 函数原型对象都有constructor属性，该属性指向与之关联的构造函数
    • 构造函数的原型对象同样拥有自己的原型对象，用--proto--属性表示。前边说过，函数是Object实例，因此Person.prototyped 原型对象为Object.prototype。

  • JavaScript 中对象是怎么实现继承的（使用 prototype 和 proto 实现继承）

    • 对象之所以使用广泛，是因为对象的属性值可以为任意类型。因此，属性的值同样可以为另外一个对象，这意味着 JavaScript 可以这么做：通过将对象 A 的proto属性赋值为对象 B，即A.proto = B，此时使用A.proto便可以访问 B 的属性和方法
    • 这样，JavaScript 可以在两个对象之间创建一个关联，使得一个对象可以访问另一个对象的属性和方法，从而实现了继承

  • 通过原型链访问对象的方法和属性

    • 首先会优先在该对象上搜寻。如果找不到，还会依次层层向上搜索该对象的原型对象、该对象的原型对象的原型对象等（套娃告警）
    • JavaScript 中的所有对象都来自Object，Object.prototype.proto === null。null没有原型，并作为这个原型链中的最后一个环节；
    • JavaScript 会遍历访问对象的整个原型链，如果最终依然找不到，此时会认为该对象的属性值为undefined
对单线程JavaScript的理解
  • 单线程来源
  • WebWorkers 和 ServiceWorkers的理解
异步事件机制
  • 为什么使用异步事件机制
  • 在实际使用中异步事件可能会导致什么问题
  • 关于setTimeout、setInterval的时间准确性
作用域与闭包
  • 请描述一下代码的执行输出内容
  • apply、call、bind的使用
  • 箭头函数和普通函数的区别
对EventLoop的理解

  • 在浏览器里，每当一个被监听的事件发生时，事件监听器绑定的相关任务就会被添加进回调队列。通过事件产生的任务是异步任务，常见的事件任务包括用户交互事件、计时器、异步请求

  • 介绍浏览器的EventLoop

    • JavaScript 有一个主线程和调用栈，所有的任务最终都会被放到调用栈等待主线程执行。
    • 同步任务会被放在调用栈中，按照顺序等待主线程依次执行。
    • 主线程之外存在一个回调队列，回调队列中的异步任务最终会在主线程中以调用栈的方式运行。
    • 同步任务都在主线程上执行，栈中代码在执行的时候会调用浏览器的 API，此时会产生一些异步任务。
    • 异步任务会在有了结果（比如被监听的事件发生时）后，将异步任务以及关联的回调函数放入回调队列中。
    • 调用栈中任务执行完毕后，此时主线程处于空闲状态，会从回调队列中获取任务进行处理。

  • 宏任务和微任务的区别

  • setTimeout、promise、async/await在不同浏览器的执行顺序

浏览器相关（08）

浏览器的同源测略
  • 同源指什么
  • 哪些行为受到同源策略的限制
  • 常见的跨越方案有哪些
浏览器的缓存相关
  • web缓存通常包括哪些
  • 浏览器什么情况下会使用本地缓存
  • 强缓存和协商缓存的区别
  • 强制Ctrl+F5会发生什么
  • session、cookie、token及storage
浏览器的加载顺序
  • 为什么我们通常将JS放在body的最后边
  • 为什么我们将CSS放在head中
浏览器的渲染原理
  • HTML/CSS/JS的解析过程
  • 渲染树是怎样生成的
  • 重排和重绘是怎样的过程
  • 日常开发中要注意哪些渲染性能问题
浏览器事件
  • 浏览器中包括哪些事件
  • 在浏览器重，是如何处理用户的交互的
  • 对事件进行监听的回调函数，会在什么被执行

< 网络相关 >(06)

域名解析（涉及DNS的寻址过程）
TCP连接建立
  • TCP的3次握手
  • 为什么TCP连接握手需要3次通信，挥手却需要4次

< HTTP协议 >

HTTP消息的结构
  • Request请求
  • Response响应
  • 常见的HTTP状态码
  • HTTP请求方法
  • 使用PUT、DELETE等方法时为什么有时候在浏览器会看到两次请求
HTTP请求的应用场景
  • 浏览器是如何控制缓存的：相应的头信息、状态码
  • websocket 与 http请求的区别
  • 如何对请求进行抓包和改造
  • 网络请求的优化方法
HTTP 的更新迭代
  • HTTPS和HTTP的区别
  • HTTP2、HTTP3分别做了怎样的设计调整

< Web安全 >

前端安全
  • 前端安全中、需要注意哪些问题
  • XSS/CSRF是怎样的攻击过程，要怎样防范
  • 除了XSS和CSRF，你还了解哪些网络安全相关的问题呢
其他web安全
  • SQL注入、命令行注入是怎样进行的
  • DDoS攻击是什么
  • 流量劫持包括哪些内容
面试题

  • JavaScript 中0.1+0.2为什么等于0.30000000000000004，如何通过代码解决这个问题？

  • 手写代码Promise

  • 手写代码实现 call/apply/bind

  • 为什么要使用async、await

  • 介绍下Set和Map数据结构

  • Javascript 是怎么实现let和const作用域的

  • 网页加载流程

    • 打开页面，获取HTML内容，获取后，从上到下解析
    • 先解析head，遇到script和css，会暂停解析并下载js脚本。
    • 当脚本下载完成后，浏览器的控制权转交给js引擎。当脚本执行完成后，控制器会交回渲染引擎，继续解析HTML
    • 此时body开始解析，浏览器开始渲染。 所以head中放置script元素会阻塞页面的渲染过程。放在body后，能防止资源阻塞。 可以用defer/async/preload等属性来标记script标签，来控制js的加载顺序。async属性会让这些脚本并行进行请求获取资源，同时当资源获取完成后尽快解析和执行，这个过程是异步的，不会阻塞 HTML 的解析和渲染。
    • 浏览器在渲染页面的过程需要解析 HTML、CSS 以得到 DOM 树和 CSS 规则树，它们结合后才生成最终的渲染树并渲染。因此，我们还常常将 CSS 放在里，可用来避免浏览器渲染的重复计算。

  • DOM 和 HTML的不同

    • DOM是用来操作和描述HTML 和 XML文档的接口
    • 如果说浏览器用HTML来描述网页的结构并渲染，那DOM就是用来获取网页的结构并操作
    • 一般来说我们用JS来操作DOM接口，从而实现动态渲染

kaiwu.lagou.com/course/cour…

转载自:https://juejin.cn/post/7073385587016728606
评论
请登录