搜刮群友的

2023/10/19

不知道哪家的，据说手上几个offer了

Details

微前端
聊一聊promise
es6新特性
事件循环
计算属性和 watche
ts与js的区别
登录模块
动态路由
角色鉴权
登录持久化

AI生成的

Q: 给我出一些笔试题: 主要考察计算机基础及前端相关知识（TCP,HTTPS,闭包，单例等）

A：当然，我可以为您提供一些与计算机基础和前端相关知识有关的笔试题。请注意，以下问题可能包含多个选择题、填空题或简答题。希望对您有所帮助！

TCP是什么，它在计算机网络中的作用是什么？

TCP是网络协议，位于传输层。TCP是面向连接的，确保按顺序到达目的地，提供有纠错和检查机制，确保数据可靠性和完整性。

TCP通过使用序列号、确认和重传机制来实现可靠性，还通过流量控制和拥塞控制机制来保持网络的稳定性和公平性。

HTTPS是什么，它与HTTP相比有什么不同？

HTTPS是通过加密的身份验证保护数据传输的HTTP扩展，使用TLS或者SSL协议进行加密，使用公钥加密来确保客户端和服务端传输的机密性，用数字证书对服务器进行身份验证，确保真实性。

什么是闭包？请给出一个闭包的例子，并解释其工作原理。

函数外部调用函数内部的方法或者取得函数内部的变量。

function outsideFunc() {
    var variable = 'Hello'

    const func = () => {
        console.log(variable)
    }

    return func
}
var closure = outsideFunc()
closure()

什么是单例模式？请给出一个使用JavaScript实现的单例模式的示例代码。

单例模式确保一个实例只实例化一个对象，并且提供全局访问点。

class singleten {
    instance;

    createInstance(){
        const obj = new Object('hi')
        return obj
    }

    getInstance(){
      if(!instance){
        instance = createInstance()
      }
      return instance
    }
}

请解释一下CSS盒模型是什么，以及它的组成部分有哪些？

盒模型是一个概念模型，将每个html元素理解为一个个盒子，他们有内边距、外边距、边框、内容，盒模型允许开发者自定义他们，从而实现灵活的布局和设计。

请解释一下CSS中的浮动（float）属性是如何工作的，以及它可能带来的一些问题。

控制元素在容器内的定位和对齐的方式，设置浮动之后会脱离文档流，然后根据float的方向去移动。

什么是响应式网页设计（Responsive Web Design）？请列举一些实现响应式设计的方法或技术。

就是网页在不同屏幕大小下，通过自动调整来呈现的不同的元素布局。

可以通过媒体查询、弹性盒子、移动端优先、使用响应式框架来实现响应式网页设计。

请解释一下JavaScript中的事件冒泡和事件捕获，以及它们之间的区别。

事件冒泡就是点击到目标DOM的事件开始将父元素的事件按顺序触发，直到根节点，事件捕获就是从最外层元素的事件开始触发，直到触发目标元素的事件。启用的方式是分别将addEventListener的第三个参数设置为false和true.

在DOM的事件传播模型中是先捕获，到目标，最后冒泡，这个机制可以用来实现事件委托，把事件绑定到父节点上提高代码执行效率。

请解释一下跨域（Cross-Origin）是什么，以及它可能导致的问题和解决方法。

在不同协议、不同域名、相同域名不同端口的情况下请求资源就会产生跨域，请求的资源会被浏览器的同源策略阻止使用。

可以用JSONP解决、后端设置CORS响应头解决、使用代理服务器解决、WebSocket也行。

请解释一下什么是AJAX，以及它在前端开发中的作用和优势。

Asynchronous JavaScript And XML，异步js和xml，就是在不刷新页面的情况下与服务端通信，实现页面部分内容的更新。

优势是可以不用刷新整个页面，提供良好的用户体验。

异步通信不会阻塞页面内容渲染。

减少带宽消耗。

支持多种数据格式。

请解释一下什么是DOM（文档对象模型），以及它在前端开发中的作用。

DOM将网页描述成一个树形结构，每个元素都是一个节点，使用JS可以对元素进行事件的定义，元素样式的修改等。

请解释一下CSS选择器中的id选择器和类选择器有什么区别？

id选择器以`#`开头, 类选择器以`.`开头，一个元素只能有一个id选择器，可以有多个类选择器，id选择器的优先级会比类选择器高。

什么是跨站脚本攻击（XSS）？如何预防XSS攻击？

攻击者通过注入非法代码到网页，通过输入校验、输出编码、内容安全策略、cookie安全处理来预防。

请解释一下什么是事件委托（Event Delegation），以及它在JavaScript中的应用场景。

将元素的事件绑定在父元素上面，比如动态添加按钮，使用事件委托可以减少事件处理的数量，不需要重新绑定事件处理函数。

请解释一下什么是响应式图像（Responsive Images），以及如何在网页中实现响应式图像。

自动适应不同分辨率的图像，通过css设置图像大小为容器的100%就行。

请解释一下什么是虚拟DOM（Virtual DOM），以及它在前端框架（如React）中的作用。

虚拟DOM是放在内存里的文档对象，页面发生变化时首先更新虚拟DOM，然后通过diff算法对比与实际DOM树的差异进行增量更新。

避免了频繁的操作实际DOM树，减少浏览器的回流和重绘，提高页面渲染效率。

请解释一下什么是WebSockets，以及它与HTTP协议的区别和优势。

WebSocket是全双工的网络协议，它在客户端与服务端之间建立一个长连接，允许服务端主动向客户端推送消息，数据传输完成后不会关闭，同时还支持跨域。

WebSocket数据传输完成后不会主动关闭，请求头比HTTP相比较小，有效的减少了连接建立和断开的开销，实时聊天更加便捷。

请解释一下什么是前端性能优化，列举一些常见的前端性能优化策略或技术。

前端性能优化是指改善或者加快网页的加载速度、响应速度和用户体验，提高网页性能。

可以通过压缩资源文件、减少http请求、延迟加载、cdn、优化图片格式、使用字体图标、利用浏览器缓存、使用构件工具压缩js、清理无用的注释等来进行前端性能优化。

请解释一下什么是前端路由（Front-end Routing），以及它在单页面应用（SPA）中的作用和实现方式。

单页面应用中，网页只加载一次，前端路由根据URL的变化通过js加载不同的页面，并且更新浏览器历史记录。

可以使用h5的history api来操作浏览器历史记录，也可以使用hash路由记录url的片段标识(url中`#`后面的部分)。

请解释一下什么是响应式框架（Responsive Framework），并举例说明常见的响应式框架。

响应式框架是根据不同的屏幕尺寸或者浏览器窗口大小，动态处理网页元素的布局和样式。

常见的响应式框架有bootstrap、foundation、bulma、semantic

请解释一下什么是跨站请求伪造（CSRF）攻击，以及如何预防CSRF攻击。

利用用户的身份信息去访问某些链接或进行其它操作，向服务端发送伪造请求。

可以使用2fa、请求头验证来源、随机令牌进行预防

请解释一下什么是前端路由（Front-end Routing），以及它与后端路由（Back-end Routing）的区别。

前端路由通常是单页面根据不同url来加载不同的页面，减轻服务器负担，后端路由是后端通过请求的url返回指定的网页到浏览器。

请解释一下什么是响应式字体（Responsive Typography），以及如何在网页中实现响应式字体。

在不同设备或者浏览器窗口大小调整的情况下，动态设置字体的大小。使用em/rem/vh/vw/，媒体查询，响应式组件库来实现响应式字体。

请解释一下什么是渐进式增强（Progressive Enhancement）和优雅降级（Graceful Degradation），并说明它们之间的区别。

是两种前端开发策略，用来处理浏览器兼容性问题。

渐进式增强是从基本功能开始，先确保所有用户都能使用，再逐步增加高级功能提升用户体验，

优雅降级是针对最高级的浏览器开发功能，提供最好的用户体验，然后逐步降级到基本功能，保证在不支持高级功能的情况下可以使用基础功能。

请解释一下什么是前端安全（Front-end Security），并列举一些常见的前端安全漏洞和防御措施。

是针对网页信息的保护，防止恶意利用前端技术进行入侵、数据泄露和其它安全漏洞。

常见的漏洞包括跨站脚本攻击、请求伪造、不安全的传输协议、未经认证的请求、为过滤的文件上传。

请解释一下什么是Webpack，以及它在前端开发中的作用和优势。

webpack是前端构件工具，将多个js文件进行打包和按照规则进行优化，最终打包成优化后的静态资源文件

搜刮群友的 ​

AI生成的 ​

搜刮群友的

AI生成的