前端开发面试、笔试常问题及分析解答资源-CSDN文库

需积分: 18 87 浏览量 2018-12-16 20:05:23 上传评论收藏 57KB DOCX 举报

### 前端开发面试、笔试常问题及分析解答 #### CSS定位机制 - **`position`属性**：这是CSS中用于控制元素定位的核心属性。它定义了一个元素如何被定位，以及它与其他元素的关系。 - **`static`**：这是`position`属性的默认值。当一个元素被设置为`static`时，它将遵循正常的文档流布局规则，即按照HTML代码中出现的顺序来排列。不会受到其他`position`属性的影响。 - **`relative`**：相对定位。当元素的`position`属性设置为`relative`时，该元素仍然占据原来的空间，但可以根据`top`、`right`、`bottom`和`left`属性相对于其正常位置移动。这种定位方式不会影响到其他元素的位置，即其他元素仍假设该元素未被移动。 - **`absolute`**：绝对定位。当元素的`position`属性设置为`absolute`时，它将相对于最近的非`static`定位的祖先元素进行定位。如果没有这样的祖先，则相对于初始包含块（通常是`<html>`元素）。`absolute`定位的元素不再占据原有位置空间，因此不会影响其他元素的布局。 - **`fixed`**：固定定位。与`absolute`相似，但`fixed`定位的元素相对于视口进行定位，即使页面滚动，该元素也会保持在相同的位置不变。需要注意的是，早期版本的Internet Explorer浏览器并不支持`fixed`定位。 - **`sticky`**：粘性定位。这是一种混合了`relative`和`fixed`定位的特性。元素在跨越特定边界时会表现为固定定位，否则表现为相对定位。当用户滚动页面时，元素会在特定位置“粘”住，直到再次达到另一个边界时恢复原样。 #### 跨域问题解决方案 - **JSONP**：JSON with Padding，是一种利用动态插入`<script>`标签实现跨域请求的方法。其工作原理是通过`<script>`标签请求一个JavaScript文件，该文件在加载完成后会执行一个预先定义好的回调函数，并将所需数据作为参数传递给该函数。这种方式只适用于GET请求。 - **CORS (Cross-Origin Resource Sharing)**：跨源资源共享是一种机制，允许一个域上的网页请求另一个域上的资源。服务器端需要通过HTTP响应头`Access-Control-Allow-Origin`来明确允许哪些源进行跨域请求。CORS机制比JSONP更灵活，支持各种HTTP请求方法。 - **利用`document.domain`进行跨子域**：如果两个子域名共享相同的顶级域名，并且协议、端口也相同，那么可以通过设置它们的`document.domain`属性为相同的顶级域名来绕过同源策略。 - **`window.name`方法**：`window.name`属性在同一个窗口的整个生命周期内是持久存在的，这使得它成为一种跨域数据传递的方式。页面可以写入`window.name`，而另一个页面可以从`window.name`读取数据。 - **`window.postMessage`**：HTML5引入的API，允许不同源的脚本安全地交换数据。这种方法非常灵活，支持多种类型的数据结构，包括字符串、对象和数组等。 #### XML与JSON的区别 - **数据体积**：JSON通常比XML体积更小，因为JSON使用更简洁的文本格式，这使得数据在网络上传输时更快。 - **数据交互**：JSON与JavaScript的交互更为自然，因为JSON数据可以直接被解析成JavaScript对象，便于处理。 - **数据描述性**：XML提供了更丰富的数据描述能力，比如通过DTD或Schema定义数据结构。而JSON则更偏向于轻量级的数据交换格式。 - **传输速度**：由于JSON数据结构更紧凑，解析速度通常比XML更快。 #### Webpack的理解 Webpack是一个强大的模块打包系统，主要用于前端开发环境。它能够解析项目中的模块依赖关系，并生成静态资源文件供浏览器加载。Webpack的主要特点包括： - **Code Splitting**：能够自动将代码分割成多个小块，按需加载，提高应用性能。 - **Loader机制**：通过自定义的加载器处理不同类型的静态资源，如CSS、JavaScript、图片等，使Webpack具有高度的灵活性和扩展性。 - **插件系统**：提供了大量的插件来增强功能，如压缩、热更新、优化等。 - **兼容性**：支持CommonJS、AMD、ES6等多种模块规范，便于新旧项目的过渡。 - **配置文件**：拥有一个独立的配置文件`webpack.config.js`，用于定义构建流程和选项。 Webpack是一个非常强大的工具，极大地简化了前端开发和部署过程中的许多任务。

资源推荐

资源详情

资源评论

posion 的值， relave 和 absolute 分别是相对于谁进行定位的？

生成绝对定位的元素，相对于最近一级的定位不是 的父元素来进行定位。

（老  不支持）生成绝对定位的元素，通常相对于浏览器窗口或 进行定位。

生成相对定位的元素，相对于其在普通流中的位置进行定位。

默认值。没有定位，元素出现在正常的流中

生成粘性定位的元素，容器的位置根据正常文档流计算得出

如何解决跨域问题

：

原理是：动态插入  标签，通过  标签引入一个  文件，这个  文件载入成功后会

执行我们在  参数中指定的函数，并且会把我们需要的  数据作为参数传入。

由于同源策略的限制，!"#$% 只允许请求当前源（域名、协议、端口）的资源，

为了实现跨域请求，可以通过  标签实现跨域请求，然后在服务端输出  数据并执

行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持 &' 请求。

： ( )（内填充），顾名思义，就是把  填充到一个盒子里

*+

  ,-./

0 1 ,22.3

102423

10-3

 1) 5'),262.7891 :6,.3

;

,2 12.3

,/

2 222

;.3

  , ./

, 1 .3

;

*4+

:$

服务器端对于 :$ 的支持，主要就是通过设置 <=: =<>=) 来进行的。如果

浏览器检测到相应的设置，就可以允许 < 进行跨域的访问。

通过修改  1 来跨子域

将子域和主域的  1 设为同一个主域1前提条件：这两个域名必须属于同一个

基础域名?而且所用的协议，端口都要一致，否则无法利用  1 进行跨域

主域相同的使用  1

使用 > >1  来进行跨域

> > 对象有个  属性，该属性有个特征：即在一个窗口,> >.的生命周期内@窗口

载入的所有的页面都是共享一个 > >1  的，每个页面对 > >1  都有读写的权

限，> >1  是持久存在一个窗口载入过的所有页面中的

使用 "'ABC 中新引进的 > >1A) 方法来跨域传送数据

还有 D6、在服务器上设置代理页面等跨域方式。个人认为 > >1  的方法既不复杂，

也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。

XML 和 JSON 的区别？

,E.1数据体积方面。

 相对于 !AB 来讲，数据的体积小，传递的速度更快些。

,F.1数据交互方面。

 与  的交互更加方便，更容易解析处理，更好的数据交互。

,G.1数据描述方面。

 对数据的描述性比 !AB 较差。

,H.1传输速度方面。

 的速度要远远快于 !AB。

谈谈你对 webpack 的看法

I是一个模块打包工具，你可以使用 I 管理你的模块依赖，并编绎输出模块

们所需的静态文件。它能够很好地管理、打包 I 开发中所用到的 "'AB、、:

以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源

> 有对应的模块加载器。> 模块打包器会分析模块间的依赖关系，最后生成

了优化且合并后的静态资源。

webpack 的两大特色：

E1J )（可以自动完成）

F1可以处理各种类型的静态文件，并且支持串联操作

>是以   的形式来书写脚本滴，但对 <AK4:AK的支持也很全面，方便旧

项目进行代码迁移。

> 具有 % 和 > 的功能，但仍有很多自己的新特性：

E1对 : 、 <AK、L 的语法做了兼容

F1对 、、图片等资源文件都支持打包

G1串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对

:M、L 的支持

H1有独立的配置文件 >1 )1

C1可以将代码切割成不同的 6 ，实现按需加载，降低了初始化时间

L1支持 -和 A，易于调试

N1具有强大的 ) 接口，大多是内部插件，使用起来比较灵活

O1>使用异步 并具有多级缓存。这使得 >很快且在增量编译上更加快

说说 TCP 传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处，': 协议采用了三次握手策略。用 ': 协议把数据包

送出去后，': 不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。握手

过程中使用了 ': 的标志：P 和 <:Q。

发送端首先发送一个带 P 标志的数据包给对方。接收端收到后，回传一个带有 P4<:Q

标志的数据包以示传达确认信息。

最后，发送端再回传一个带 <:Q 标志的数据包，代表“握手”结束。

若在握手过程中某个阶段莫名中断，': 协议会再次以相同的顺序发送相同的数据包。

断开一个 TCP 连接则需要“四次握手”：

第一次挥手：主动关闭方发送一个 R，用来关闭主动方到被动关闭方的数据传送，也就

是主动关闭方告诉被动关闭方：我已经不会再给你发数据了,当然，在  包之前发送出去

的数据，如果没有收到对应的  确认报文，主动关闭方依然会重发这些数据.，但是，此

时主动关闭方还可以接受数据。

第二次挥手：被动关闭方收到 R 包后，发送一个 <:Q 给对方，确认序号为收到序号(E

（与 P 相同，一个 R 占用一个序号）。

第三次挥手：被动关闭方发送一个 R，用来关闭被动关闭方到主动关闭方的数据传送，

也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。

第四次挥手：主动关闭方收到 R 后，发送一个 <:Q 给被动关闭方，确认序号为收到序号

(E，至此，完成四次挥手。

TCP 和 UDP 的区别

':（'  : ，传输控制协议）是基于连接的协议，也就是说，在正

式收发数据前，必须和对方建立可靠的连接。一个 ': 连接必须要经过三次“对话”才能建

立起来

-K（-K，用户数据报协议）是与 ': 相对应的协议。它是面向非连接的协

议，它不与对方建立连接，而是直接就把数据包发送过去！

-K 适用于一次只传送少量数据、对可靠性要求不高的应用环境。

说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能

向上访问，变量访问到 > > 对象即被终止，作用域链向下访问变量是不被允许的。

创建 ajax 过程

,E.创建 !AB"#$% 对象@也就是创建一个异步调用对象1

,F.创建一个新的 "'' 请求@并指定该 "'' 请求的方法、-$B 及验证信息1

,G.设置响应 "'' 请求状态变化的函数1

,H.发送 "'' 请求1

,C.获取异步调用返回的数据1

,L.使用  和 KA 实现局部刷新1

渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器

进行效果、交互等改进和追加功能达到更好的用户体验。

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

常见 > 安全及防护原理

% 注入原理

就是通过把 SB 命令插入到 I 表单递交或输入域名或页面请求的查询字符串，最终达到

欺骗服务器执行恶意的 SB 命令。

总的来说有以下几点：

E1永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限

制长度，对单引号和双T=T进行转换等。

F1永远不要使用动态拼装 SB，可以使用参数化的 SB 或者直接使用存储过程进行数据

查询存取。

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

接。

H1不要把机密信息明文存放，请加密或者 66 掉密码和敏感的信息。

XSS 原理及防范

!,= ).攻击指的是攻击者往 I 页面里插入恶意 6 标签或者  代

码。比如：攻击者在论坛中放一个

看似安全的链接，骗取用户点击后，窃取  中的用户私密信息；或者攻击者在论坛中

加一个恶意表单，

当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任

站点。

! 防范方法

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”*U@U+U@U3U@UVU等字符做过滤；

其次任何内容写到页面之前都必须加以  ，避免不小心把 6)弄出来。这一个层

面做好，至少可以堵住超过一半的 !攻击。

首先，避免直接在 中泄露用户隐私，例如 、密码等等。

其次，通过使 和系统 绑定来降低 泄露后的危险。这样攻击者得到的 

没有实际价值，不可能拿来重放。

如果网站不需要再浏览器端对 进行操作，可以在 =:末尾加上 "# 来防

止 代码直接获取 。

尽量采用 '而非 &'提交表单

XSS 与 CSRF 有什么区别吗？

! 是获取信息，不需要提前知道其他用户页面的代码和数据包。:$R 是代替用户完成指

定的动作，需要知道其他用户页面的代码和数据包。

要完成一次 :$R 攻击，受害者必须依次完成两个步骤：

登录受信任网站 <，并在本地生成 :。

在不登出 < 的情况下，访问危险网站 5。

CSRF 的防御

服务端的 :$R 方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。

通过验证码的方法

Web Worker 和 webSocket

> 主线程

E1通过 >0 >I,.加载一个  文件来创建一个 >，同时返回一个

> 实例。

F1通过 >1A),.方法来向 > 发送数据。

G1绑定 >1 ) 方法来接收 > 发送过来的数据。

H1可以使用 >1 ,.来终止一个 > 的执行。

I 是 I 应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个

"C 协议，I 的连接是持久的，他通过在客户端和服务器之间保持双工连接，服

务器的更新可以被及时推送给客户端，而不需要客户端以一定时间间隔去轮询。

剩余25页未读，继续阅读

评论收藏

内容反馈

_Admin

粉丝: 3
资源: 1

前端开发面试、笔试常问题及分析解答

2021年web前端开发笔试题集锦.pdf

前端笔试题分享 前端面试pdf.pdf

面试官常问的人事问题及回答

几乎完整的前端面试问题答案

笔试面试题宝典（前端开发）.pdf

100个常见面试问题和答案

面试前端

前端面试汇总

前端面试题及答案.pdf

web前端面试资料

前端面试题

H5前端面试大全-包含大厂面试题_25个md文件分类面试题.rar

前端开发-笔试面试题大全md.zip

面试笔试题合集（附答案）

笔试大全面试宝典 自己总结

前端开发面试题大收集

小米2019秋招前端开发笔试题.docx

前端面试指南

2015前端面试题（含答案）1

前端面试题 必看--

IT常见笔试面试题

互联网校招面试笔试题合集.rar

去哪儿网校园招聘笔试面试题合集

Vue.js核心概念与面试笔试题目详解

软件开发职位笔试试题

整理一些最近经常遇到的前端面试题

前端学习资料合集

web前端面试宝典

最新资源

前端笔试题分享前端面试pdf.pdf

笔试大全面试宝典自己总结

前端面试题必看--