【web前端之超高频面试题整理】项目类&Web安全之超实用篇

墨家巨子@社会龙

于 2024-10-02 09:10:45 发布

阅读量591

点赞数 12

分类专栏： web前端超高频率面试题分类汇总文章标签：前端 javascript web安全安全

本文链接：https://blog.csdn.net/longshehui/article/details/142649693

版权

web前端超高频率面试题分类汇总专栏收录该内容

6 篇文章 0 订阅

订阅专栏

简介：

项目类&Web网络安全篇，将带你全面梳理前端开发中常见的项目类问题以及Web网络安全方面的考点。文章不仅涵盖项目开发中的关键技术栈与架构设计，还深入探讨了如XSS、CSRF等网络安全威胁及其应对策略。通过对这些高频面试题的整理与解析，帮助开发者全面提升项目开发能力和网络安全意识，轻松应对各类前端面试中的难题与挑战。

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

常见的web安全及防护原理

sql注入原理：

就是通过把SQL命令插入到web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

总的来说有以下几点：

- 永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双引号以及-进行转换等

- 永远不要使用动态拼接SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取

- 永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接

- 不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息

XSS原理及防范方法

xss（cross-site-scripting）攻击指的是攻击者往web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器汇总，而不是用户原本以为的信任站点

防范方法：首先代码里对用户输入的地方和变量都需要仔细检查长度和对“<> , ; . ”等字进行过滤；其次仁和内容写到页面之前都必须加encode，避免不小心把html tag弄出来。这一个层面做好，至少可以堵住超过一半的XSS攻击

CSRF的原理及防御

CSRF是代替用户完成指定的动作，需要知道其他哟范湖页面的代码和数据包。要完成一次CSRF攻击，受害者必须一次完成两个步骤：

1. 登录受信任网站A，并在本地生成cookie

2. 在不登出A的情况下，访问危险网站B

防御方法：服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数；通过验证码的方法

XSS与CSRF两种跨站攻击

XSS跨站脚本攻击，主要是前端层面，用户在输入层面插入攻击脚本，改变页面的显示，或则窃取网站cookie，预防方法：不相信用户的所有操作，对用户输入进行一个转移，不运行js对cookie的读写
CSRF跨站请求伪造，以你的名义，发送恶意请求，通过cookie加参数等形式过滤
我们没法彻底杜绝攻击，只能提高攻击门槛

网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

浏览器的缓存机制

浏览器缓存机制有两种, 一种为强缓存, 一种为协商缓存

强缓存: 浏览器在第一次请求的时候, 会直接下载资源, 然后缓存到本地, 第二次请求的时候, 直接使用缓存

协商缓存: 第一次请求缓存且保存缓存标识与时间, 重复请求向服务器发送缓存标识和最后缓存时间, 服务端进行校验, 如果失败则使用缓存

强缓存方案 :

Exprires: 服务端的响应头, 第一次请求的时候, 告诉客户端, 该资源什么时候会过期(Exprires的缺陷是必须保证服务端时间和客户端时间严格同步)

Cache-control: max-age, 表示该资源多少时间后过期, 解决了客户端和服务端时间必须同步的问题

协商缓存方案:

If-None-Match/ETag: 缓存标识,对比换缓存时使用它来标识一个缓存, 第一次请求的时候, 服务端会返回该标识给客户端, 客户端在第二次请求的时候会带上该标识与服务端进行对比并返回If-None-Match标识是否返回匹配

Last-modified/If-Modified-Since: 第一次请求的时候服务端但会Last-modified表明请求的资源上次的修改时间, 第二次请求的时候客户端带上请求头If-Modified-Since, 表示资源上次的修改时间, 服务端拿到这两个字段进行对比

图片压缩上传(移动端):

为什么要使用图片压缩上传功能?

在做移动端图片上传的收，用户穿的都是手机本地图片，而本地图片一般都相对比较大，拿IPhone6来说，平时拍的图片都是1-2M，如果直接上传，会占用一定的内存以及耗费大量的流量去长传文件，完整把图片上传显然不是一个很好的办法。目前来说HTML5的各种新API都在移动端的webkit是上得到了较好的实现。

图片压缩上传功能的实现步骤？

在移动端压缩图片并且上传主要用到的是filereader /faɪl/ /'riːdə/ 、canvas以及formdata这三个H5的API。
1、用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式）
2、把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas。toDataURL对图片进行压缩
3、获取到压缩后的base64格式图片数据，转成二进制塞入formdata，在通过XMLHttpRequest提交到fromdata

谈谈你对webpack的看法

webpack是一个模块打包工具，你可以使用webpack管理你的模块依赖，并编译输出模块们所需要的静态文件。它能够很好地管理、打包web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源

gulp是什么？

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成

Gulp的核心概念：流

流：简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的，而不用关心流的另一头数据的真正流向

gulp正是通过流和代码优于配置的策略来尽量简化任务编写的任务

Gulp的特点：

易于使用：通过代码优于配置的策略，gulp让简单的任务鸡蛋，复杂的任务可管理

构建快速：利用nodeJs流的威力，你可以快速构建项目并减少频繁的IO操作

易于学习：通过最少的API，掌握gulp毫不费力，构建工作仅在掌握：如同一系列流管道

webpack的原理

webpack是把项目当作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到你项目当中的所有依赖文件，使用loaders来处理它们，最后打包成一个或多个浏览器可识别的js文件
通过设置webpack.config.js 的配置，由于webpack是基于Node构建的，webpack配置文件中所有的合法node语法都可以用

webpack的loader和plugin的区别？

Loader：用于模块源码的转换，loader描述了webpack如何处理非JS模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言转换为JS，或者将内联图转换为data URL。比如：CSS-Loader，Style-Loader等

Plugin：用于解决loader无法实现的其实事情，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件，例如：CommonPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面文件的应用程序共享代码创建的bundle

怎么使用webpack对项目进行优化?

构建优化:

减少编译体积ContextReplacementPugin、lgnorePlugin、babel-plugin-import、babel-plugin-transform-runtime。
并行编译happypack、thread-loader、uglifyWebpackPlugin开启并行
缓存cache-loader、hard-source-webpack-plugin、uglifyjsWebpackPlugin开启缓存、babel-loader开启缓存
预编译dllWebpackPlugin&&DllReferencePlugin、auto-dll-webpack-plugin

性能优化：

减少编译体积Tree-shaking、Scope-Hositing
hash缓存webpack-md5-plugin
拆包 splitChunksPlugin、import（）、require.ensure

项目类问题

如何规避javascript多人开发函数重名问题？

尽量少使用全局变量，尽可能的使用局部变量，这样不仅会减少变量重名的几率，更会减少内存开校，因为局部变量一般会在函数结束后自动销毁释放内存，而全局变量会到程序结束后才会被销毁。

什么是渐进渲染:

渐进式渲染是用于改进网页性能的技术名称(特别是改善感知的加载时间),以尽可能快的呈现内容以供显示。

这种技术的例子：

懒加载图片
优先考虑可见内容（或首屏渲染）---仅包括首先在用户浏览器中呈现的页面数量所需的最小CSS、内容、脚本，然后使用延迟脚本或监听DOMContentLoaded/load event 加载其他资源和内容
异步HTML片段---在后端构建页面时将部分HTML刷新到浏览器

如何提高页面加载速度？

减少http请求
使用CDN（内容发布网络），可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和web流量峰值压力
压缩组件，代理缓存
将样式表挡在文档头部
将脚本放在底部
避免CSS表达式
使用外部的JS和CSS文件
减少DNS查找

页面渲染优化:

禁止使用iframe(阻塞父文档onload事件)

iframe会阻塞主页面的onLoad事件

搜索引擎的检索程序无法解读这种页面，不利于SEO

iframe和主页面共享连接池，而浏览器对相同域的链接有限，所以会影响页面的并行加载

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascrip动态给iframe添加src属性值。这样可以绕开以上两个问题

禁止使用gif图片实现loading效果(降低CPU消耗，提升渲染性能)
使用CSS3代码替代JS动画（尽可能避免重绘重排以及回流）
对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较消耗CPU

小图优势在于：

1）减少HTTP请求

2）避免文件跨域

3）修改及时生效

css与js文件尽量使用外部文件（因为Renderer进程中，JS线程和渲染线程hi互斥的）
页面中空的href和src会阻塞页面其他资源的加载（阻塞下载进程）
网页Gzip、CDN托管、data缓存、图片服务器
前端模板JS+数据，减少HTML标签导致的宽带浪费，前端用变量把保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

前端需要注意哪些SEO？（搜索引擎优化）：

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调中你的那即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页。
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
重要内容不要用js输出：爬虫不会执行JS获取内容
非装饰性图片必须加alt
少用iframe：搜索引擎不会抓取iframe中的内容
提高网站速度：网站速度是搜索引擎排序的一个重要指标

前后端分离的项目如何seo？（偏难）

先去 www.baidu.com/robots.txt 找出常见的爬虫，然后在nginx上判断来访问页面用户的User-Agent是否是爬虫，如果是爬虫就用nginx方向代理到我们自己用nodejs+puppeteer实现的爬虫服务器上，然后用你的爬虫服务器怕自己的前后端分离的前端项目页面，增加扒页面的接受延时，保证异步渲染的接口数据返回，最后得到了页面的数据，返还给来访问的爬虫即可。

移动端常见的兼容性问题:

随着手机的普及,移动端的开发也成了一个重要方向，但是由于设备的不统一，会造成一些兼容性问题。

设置文字行高为字体行高，解决文字上下边留白问题
给动态元素添加事件，需要使用事件委托（绑定到document），解绑也需要用委托的方式。苹果机点击事件不能触发。需要用touch系列事件
Img标签src属性无值（php渲染过的），在苹果机上显示无图片，在安卓机上显示图片裂开。可添加alt属性及值
同一个标签多次绑定同一个事件（页面复杂情况容易出现这种情况，尽量避免这种情况），可以减少bug的出现，利于维护页面
在rem自适应页面使用精灵图。会容易出现图片缺角的问题（约1-2像素）。解决办法：使装精灵图的盒子变大，让图片居中显示
给选中的盒子增加一个标识，可以使用伪元素，减少标签的使用
有横向滚动条的内容被垂直触摸，在IOS机上无法滚动页面
当祖父元素使用overflow属性时，父元素采用transform属性会影响子元素定位position:absolute；导致子元素超出隐藏，建议用其他属性替换transform属性。
click事件在IOS系统上有时会失效，给绑定click事件的元素加上cursor：pointer解决
placeholder垂直居中问题：在IOS和Android中显示不同。解决方法是：在保证input输入文本垂直居中的条件下，给placehoder设置padding-top

对SPA单页面的理解, 以及它的优缺点是什么?

SPA( single-page application ) 仅在wev页面初始化时加载相应的HTML,JavaScript 和CSS。一旦页面加载完成后，SPA 不会因为用户的操作而进行页面的重新加载或跳转，取而代之的是利用路由机制实现HTML内容的变化，UI与用户的交互，避免页面的重新加载。

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
SPA相对而言对服务器压力小
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点:

首屏加载慢: 为实现单页web应用功能及显示效果, 需要在加载页面的时候讲JavaScript、CSS统一加载，部分页面按需加载
不利于SEO：由于所有内容都在一个页面中动态替换和显示，所以在SEO上其有着天然的弱势。

如何优化SPA(单页面Web应用)应用的首屏加载速度慢的问题？

将公用的JS库通过script标签外部引入，减少app。bundel的大小，让浏览器并行下载资源文件，提高下载速度
在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小App。bundel的体积，在调用某个组件时再加载对应的js文件
加一个首屏loading图，提升用户体验

网页从输入网址到渲染完成经历了哪些过程？

输入网址
发送到DNS服务器，并获取域名对应的web服务器对应的IP地址
与web服务器建立TCP连接
浏览器向web服务器发送http请求
web服务器响应请求，并返回一定url的数据（或错误信息，或重定向的新url地址）
浏览器下载web服务器返回的数据及解析html源文件
生成DOM树，解析css和js，渲染页面，直至显示完成

CSS和JS的位置会影响页面效率, 为什么?

CSS在加载过程中不会影响到DOM树的生成, 但是会影响到Render树的生成, 进而影响到layout, 所以一般来说, style的link标签需要尽量放在head里面, 因为在解析DOM树的时候是自上而下的, 而css样式又是通过异步加载的, 这样的话, 解析DOM树下的body节点和加载css样式能尽可能的并行, 加快Render树的生成速度
JS脚本应该放在底部, 原因在于JS线程与GUI渲染线程是互斥关系, 如果JS放在首部, 当下载执行JS的时候, 会影响渲染行程绘制页面, JS 的作用主要是处理交互, 而交互必须得先让页面呈现才能进行, 所以为了保证用户体验, 尽量让页面先绘制出来

简单介绍一下V8引擎的垃圾回收机制

v8 的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特点，一是新生的对象容易早死，另一个是不死的对象会活得更久。基于这个假说，v8 引擎将内存分为了新生代和老生代。
新创建的对象或者只经历过一次的垃圾回收的对象被称为新生代。经历过多次垃圾回收的对象被称为老生代。
新生代被分为 From 和 To 两个空间，To 一般是闲置的。当 From 空间满了的时候会执行 Scavenge 算法进行垃圾回收。当我们执行垃圾回收算法的时候应用逻辑将会停止，等垃圾回收结束后再继续执行。

这个算法分为三步：
（1）首先检查 From 空间的存活对象，如果对象存活则判断对象是否满足晋升到老生代的条件，如果满足条件则晋升到老生代。如果不满足条件则移动 To 空间。
（2）如果对象不存活，则释放对象的空间。
（3）最后将 From 空间和 To 空间角色进行交换。
新生代对象晋升到老生代有两个条件：
（1）第一个是判断是对象否已经经过一次 Scavenge 回收。若经历过，则将对象从 From 空间复制到老生代中；若没有经历，则复制到 To 空间。
（2）第二个是 To 空间的内存使用占比是否超过限制。当对象从 From 空间复制到 To 空间时，若 To 空间使用超过 25%，则对象直接晋升到老生代中。设置 25% 的原因主要是因为算法结束后，两个空间结束后会交换位置，如果 To 空间的内存太小，会影响后续的内存分配。
老生代采用了标记清除法和标记压缩法。标记清除法首先会对内存中存活的对象进行标记，标记结束后清除掉那些没有标记的对象。由于标记清除后会造成很多的内存碎片，不便于后面的内存分配。所以了解决内存碎片的问题引入了标记压缩法。
由于在进行垃圾回收的时候会暂停应用的逻辑，对于新生代方法由于内存小，每次停顿的时间不会太长，但对于老生代来说每次垃圾回收的时间长，停顿会造成很大的影响。为了解决这个问题 V8 引入了增量标记的方法，将一次停顿进行的过程分为了多步，每次执行完一小步就让运行逻辑执行一会，就这样交替运行。