web前端面试流程，前端开发中的基础思考题(1)，一文详解

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

• 查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

一次完整的HTTP事务是怎样的一个过程？

1. 域名解析

2. 发起TCP的3次握手

3. 建立TCP连接后发起http请求

4. 服务器端响应http请求，浏览器得到html代码

5. 浏览器解析html代码，并请求html代码中的资源

6. 浏览器对页面进行渲染呈现给用户

你所了解到的Web攻击技术，如何防止被攻击？

攻击：

• XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。

• SQL 注入攻击：通过表单提交可运行的 sql 语句，以破坏数据库数据。

• CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

• dDos 拒绝服务攻击：通过大量请求疯狂占用服务器资源至其瘫痪。

• CDN 攻击：使用不合理数据发起请求或请求不合理接口。

• 身份伪造：冒充服务器或用户获取从另一方获取信息。

防御：

• XSS:

1. 输入验证，过滤标签、事件、脚本、SQL

2. http头： X-XSS-Protection

3. cookie保护：set-cookie 头加入 http-only

• SQL 注入

1. 输入验证，过滤标签、事件、脚本、SQL

2. 数据库权限最小化

3. 使用接口而非 SQL 语句

4. 限制文件上传类型

• CSRF

1. 验证码

2. 验证 http 头 referer 项

3. 在 http 中加入 taken

• 身份伪造

1. 隐藏敏感信息

2. 加密

3. session 定期失效

4. 权限验证、中间件校验

5. 数字签名

6. CA 证书校验

• dDos 拒绝服务攻击

1. 流量防火墙

2. 验证码

• CDN 攻击

1. 对版本控制进行Hash验证

2. 跳转验证（重定向验证）

ajax是什么?ajax的交互模型?

ajax 是异步 javascript

readyState属性状态有5个可取值： 0=未初始化，1=启动 2=发送，3=接收，4=完成

Ajax的特点

1. 通过异步模式，提升了用户体验

2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

4. Ajax优点是通过异步通信实现局部刷新

ajax的缺点

1. ajax不支持浏览器back按钮。

2. 安全问题 AJAX暴露了与服务器交互的细节。

3. 对搜索引擎的支持比较弱。

4. 破坏了程序的异常机制。

5. 不容易调试。

如何解决跨域问题?

有三种行为受到限制：1. Cookie、LocalStorage和IndexDB无法获取；2. DOM无法获得。3. AJAX请求不能发送。

• 一级域名相同，只是二级域名不同，浏览器允许通过设置 document.domain 共享 cookie 和 DOM

• 目前有三种方法，可以解决跨域窗口的通信问题：

1. onhashchange 事件 + #data 片段标识符

2. 监听子窗口 window.name 属性的变化

3. window.postMessage(data, url), html5 新接口，监听 onmessage 事件

其他方法：代理服务器，JSONP，WebSocket(http origin头)，CORS(Access-Control-Allow-Origin)

什么叫优雅降级和渐进增强？

渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级(graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

• 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

• 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

• 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

前端网页制作怎么克服不同分辨率的问题？

根据屏幕不同大小，缩小窗口出横向滚动条在所难免，但理想情况下，页面应该能适应不同客户端浏览器和分辨率。实际操作通常又有三种情况：版面自适应、视觉自适应、内容自适应。

严格模式特点

• 添加了保留字 protectedstatic 和 interface

• 在严格模式下不可以用with

• 在严格模式下变量必须显示声明varletconst

• 在严格模式下this默认是undefined

• 在严格模式下为只读变量和不可扩展对象赋值会报错 而不是静默失败

• 在严格模式下不可以在eval参数中定义变量和函数

• 在严格模式下有名参数是arguments参数的静态副本而非引用

• 在严格模式下用delete删除var声明的变量和不可配置属性时抛出异常而不是静默失败返回false

• 在严格模式下arguments和eval是关键字不能被修改

• 在严格模式下不可以用8进制

• 在严格模式下函数的形参不可以同名

• 在严格模式下不可以使用caller和arguments的属性会报错

在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。它们的本质是对象，其 key 为数字，而存在一个 key 为 ‘length’ 的属性表示其长度。典型的是函数的argument参数、NodeList对象。转换方式有一下几种：

1. var arr = Array.prototype.slice.call(fakeArray);

2. var arr = […fakeArray];

3. var arr = Array.from(fakeArray);

浏览器本地存储

在较高版本的浏览器中，js 提供了 sessionStorage 和 globalStorage。在HTML5中提供了 localStorage 来取代 globalStorage。html5中的Web Storage包括了两种存储方式：sessionStorage 和 localStorage。

• cookie 在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

• cookie 存储空间很有限(50个 or 4kB)，sessionStorage和localStorage的存储空间更大(5M)；

• sessionStorage和localStorage有更多丰富易用的接口；

• sessionStorage和localStorage各自独立的存储空间；

• sessionStorage 活到会话结束，而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

线程与进程的区别

首先我们需要理解：进程是系统资源分配的最小单位，而线程是程序代码执行的最小单位

一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。

请说出三种减少页面加载时间的方法。

1. 压缩js html css和图片，使用 gzip 编码传输，减少传输时间

2. 选择合适的图片格式，合理利用缓存，减少传输时间

3. 合并 js css 及 图片(精灵图)，减少请求数量

4. 避免不必要的 repaint 和 reflow, 合理使用 GPU 加速渲染

5. 避免不必要的重定向，使用长连接，优化网络结构

6. 使用 CDN 减短数据传输路径

7. 优化服务器，快速响应与负载均衡

null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。当声明的变量还未被初始化时，变量的默认值为undefined。

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

• 变量被声明了，但没有赋值时，就等于undefined。

• 调用函数时，应该提供的参数没有提供，该参数等于undefined。

• 对象没有赋值的属性，该属性的值为undefined。

• 函数没有返回值时，默认返回undefined。

null表示”没有对象”，即该处不应该有值。典型用法是：

• 作为函数的参数，表示该函数的参数不是对象。

• 作为对象原型链的终点。

new操作符具体干了什么呢?

1.创建一个空对象，并将this绑定在该对象；

2.该对象继承构造函数的原型；

3.执行构造函数；

4.如果构造函数返回对象类型，则返回该对象，否则返回第一步新建的对象 this

哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在，无意义的占用内存。

会导致内存泄露的事情：

• 绑定事件的元素是不能在remove时被清理的，应该在remove之前取消事件绑定。不过更好的办法是用事件委托的方式绑定事件。

• 意外的全局变量，会使得实际函数结束就应该释放的内存保留下来，造成资源浪费，包括以下两种情况：

• 定时器中的变量定义，会在每次执行函数的时候重复定义变量，产生严重的内存泄漏。

• 如果闭包的作用域链中保存着一个DOM对象或者ActiveX对象，那么就意味着该元素将无法被销毁:

• 通过createElement，createTextNode等方法创建的元素会在写入DOM后被释放

• 循环引用导致引用计数永远不为0，内存无法释放：

对 Node 的优点和缺点提出了自己的看法？

• 优点

1. 因为 Node 是基于事件驱动和无阻塞的，所以非常适合处理并发请求，

2. 因此构建在 Node 上的代理服务器相比其他技术实现的服务器表现要好得多。

3. 与 Node 代理服务器交互的客户端代码是由 Javascript 语言编写的，是同一种语言，这是非常美妙的事情。

• 缺点

1. Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，

2. 而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

3. 其实前两个已经好多了，现在呢，就是坑比较多。

你如何对网站的文件和资源进行优化?

• 文件合并

• 文件最小化/文件压缩

• 使用CDN托管

• 缓存的使用

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

简单来说，分为4个步骤：

• 当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

• 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

• 一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

• 此时，Web服务器提供资源服务，客户端开始下载资源。而后由浏览器完成页面渲染

HTTP 常见状态码

| 状态码 | 状态字 | 描述 |

| — | — | — |

| 100 | Continue | 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息 |

| 200 | OK | 正常返回信息 |

| 201 | Created | 请求成功并且服务器创建了新的资源 |

| 202 | Accepted | 服务器已接受请求，但尚未处理 |

| 301 | Moved Permanently | 请求的网页已永久移动到新位置。 |

| 302 | Found | 临时性重定向。 |

| 303 | See Other | 临时性重定向，且总是使用 GET 请求新的 URI。 |

| 304 | Not Modified | 自从上次请求后，请求的网页未修改过。 |

| 400 | Bad Request | 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。 |

| 401 | Unauthorized | 请求未授权。 |

| 403 | Forbidden | 禁止访问。 |

| 404 | Not Found | 找不到如何与 URI 相匹配的资源。 |

| 500 | Internal Server Error | 最常见的服务器端错误。 |

| 503 | Service Unavailable | 服务器端暂时无法处理请求（可能是过载或维护）。 |

请解释一下 JavaScript 的同源策略。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

后话

---

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算

你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算