web前端面试

最新推荐文章于 2024-09-22 19:20:04 发布
最新推荐文章于 2024-09-22 19:20:04 发布
阅读量173 收藏
点赞数
文章标签： 面试 前端 运维 ViewUI
原文链接：https://my.oschina.net/jasper1987/blog/1841653
版权

不用临时变量怎么实现 swap(a, b)——用加法或者异或都可以

CSS3新属性

CSS居中

事件委托机制

请解释什么是事件代理

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能 可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒 可以实现当新增子对象时无需再次对其绑定

盒模型

闭包

垃圾回收

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

  • 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
  • setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
  • 闭包使用不当

缓存

谈谈你对webpack的看法

用过哪些设计模式？

如何解决跨域问题?

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

HTTP协议

  1. 2XX 成功
200 OK，表示从客户端发来的请求在服务器端被正确处理
204 No content，表示请求成功，但响应报文不含实体的主体部分
206 Partial Content，进行范围请求
  1. 3XX 重定向
 301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
 302 found，临时性重定向，表示资源临时被分配了新的 URL
 303 see other，表示资源存在着另一个 URL，应使用 GET 方法丁香获取资源
 304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
 307 temporary redirect，临时重定向，和302含义相同
  1. 4XX 客户端错误
400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源
  1. 5XX 服务器错误
500 internal sever error，表示服务器端在执行请求时发生了错误
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求

HTTP的几种请求方法用途

1. GET方法
发送一个请求来取得服务器上的某一资源
2. POST方法
向URL指定的资源提交数据或附加新的数
3. PUT方法
跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
4. HEAD方法
只请求页面的首部
5. DELETE方法
删除服务器上的某资源
6. OPTIONS方法
它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
7. TRACE方法
TRACE方法被用于激发一个远程的，应用层的请求消息回路
8. CONNECT方法
把请求连接转换到透明的TCP/IP通道

如何进行网站性能优化

content方面

  • 减少HTTP请求：合并文件、CSS精灵、inline Image
  • 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
  • 减少DOM元素数量

Server方面

  • 使用CDN
  • 配置ETag
  • 对组件使用Gzip压缩

Cookie方面

  • 减小cookie大小

css方面

  • 将样式表放到页面顶部
  • 不使用CSS表达式
  • 使用<link>不使用@import

Javascript方面

  • 将脚本放到页面底部
  • 将javascript和css从外部引入
  • 压缩javascript和css
  • 删除不需要的脚本
  • 减少DOM访问

图片方面

  • 优化图片：根据实际颜色需要选择色深、压缩
  • 优化css精灵
  • 不要在HTML中拉伸图片

Redux

ES6

  • 新增模板字符串（为JavaScript提供了简单的字符串插值功能）
  • 箭头函数
  • for-of（用来遍历数据—例如数组中的值。）
  • arguments对象可被不定参数和默认参数完美代替。
  • ES6将promise对象纳入规范，提供了原生的Promise对象。
  • 增加了let和const命令，用来声明变量。
  • 增加了块级作用域。
  • let命令实际上就增加了块级作用域。
  • 还有就是引入module模块的概念

异步机制

算法

window.onload和document.ready的区别

window.onload是在页面中包含图片在内的素有元素全部加载完成； document.ready是文档结构加载完成，但不包含图片，其他媒体文件； 在jQuery中会看到$(function(){})和$(document).ready(function(){})，是在DOM树加载完成之后执行； window.onload是在DOM树加载完以及所有文件加载完成才执行，因此慢于document.ready。

数组去重

  1. new Set
  2. indexOf()
  3. splice()

new具体做了些什么

创建一个新对象foo； 并将它的__proto__指向其构造函数的prototype，foo.proto = Foo.prototype; 动态将this指向新对象，Foo.apply(foo，arguments); 执行函数体中的代码； 放回新对象foo;

说说严格模式的限制

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性，否则报错
  • 不能使用with语句
  • 禁止this指向全局对象

语义化的理解

  • 用正确的标签做正确的事情！
  • html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  • 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
  • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

介绍一下你对浏览器内核的理解？

  • 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

  • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

  • JS引擎则：解析和执行javascript来实现网页的动态效果，最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

html5有哪些新特性、移除了那些元素？

  1. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
  • 绘画 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更好的内容元素，比如article、footer、header、nav、section
  • 表单控件，calendar、date、time、email、url、search
  • 新的技术webworker, websocket, Geolocation
  1. 移除的元素：
  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u
  • 对可用性产生负面影响的元素：frame，frameset，noframes
  1. 支持HTML5新标签：
  • IE8/IE7/IE6支持通过document.createElement方法产生的标签
  • 可以利用这一特性让这些浏览器支持HTML5新标签
  • 浏览器支持新标签后，还需要添加标签默认的样式
  1. 当然也可以直接使用成熟的框架、比如html5shim

iframe有那些缺点？

  • iframe会阻塞主页面的Onload事件
  • 搜索引擎的检索程序无法解读这种页面，不利于SEO
  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
  • 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

  • 行内元素有：a b span img input select strong
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
  • 空元素：<br> <hr> <img> <input> <link> <meta>
  • 行内元素不可以设置宽高，不独占一行
  • 块级元素可以设置宽高，独占一行

HTML全局属性(global attribute)有哪些

  • class:为元素设置类标识
  • data-*: 为元素增加自定义属性
  • draggable: 设置元素是否可拖拽
  • id: 元素id，文档内唯一
  • lang: 元素内容的的语言
  • style: 行内css样式
  • title: 元素相关的建议信息

link与@import的区别

  • link是HTML方式， @import是CSS方式
  • link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
  • link可以通过rel="alternate stylesheet"指定候选样式
  • 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
  • @import必须在样式规则之前，可以在css文件中引用其他文件
  • 总体来说：link优于@import

display,float,position的关系

  • 如果display为none，那么position和float都不起作用，这种情况下元素不产生框
  • 否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
  • 否则，如果float不是none，框是浮动的，display根据下表进行调整
  • 否则，如果元素是根元素，display根据下表进行调整
  • 其他情况下display的值为指定值
  • 总结起来：绝对定位、浮动、根元素都需要调整display

css3有哪些新特性

  • 新增各种css选择器
  • 圆角 border-radius
  • 多列布局
  • 阴影和反射
  • 文字特效text-shadow
  • 线性渐变
  • 旋转transform

CSS3新增伪类有那些？

  • p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
  • p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。
  • p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
  • p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
  • :after 在元素之前添加内容,也可以用来做清除浮动。
  • :before 在元素之后添加内容
  • :enabled
  • :disabled 控制表单控件的禁用状态。
  • :checked 单选框或复选框被选中

冒泡和捕获；

this相关(注意箭头函数的this指向问题)；

call、apply、bind；

setTimeout、setInterval和requestAnimationFrame；

模块化开发；

HTML attribute 与 DOM property 的对比

要想理解 Angular 绑定如何工作，重点是搞清 HTML attribute 和 DOM property 之间的区别。
attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。
少量 HTML attribute 和 property 之间有着 1:1 的映射，如 id。
有些 HTML attribute 没有对应的 property，如 colspan。
有些 DOM property 没有对应的 attribute，如 textContent。
大量 HTML attribute 看起来映射到了 property…… 但却不像你想的那样！
最后一类尤其让人困惑…… 除非你能理解这个普遍原则：
attribute 初始化 DOM property，然后它们的任务就完成了。property 的值可以改变；attribute 的值不能改变。
例如，当浏览器渲染 <input type="text" value="Bob"> 时，它将创建相应 DOM 节点， 它的 value 这个 property 被初始化为 “Bob”。
当用户在输入框中输入 “Sally” 时，DOM 元素的 value 这个 property 变成了 “Sally”。 但是该 HTML 的 value 这个 attribute 保持不变。如果你读取 input 元素的 attribute，就会发现确实没变： input.getAttribute('value') // 返回 "Bob"。
HTML 的 value 这个 attribute 指定了初始值；DOM 的 value 这个 property 是当前值。
disabled 这个 attribute 是另一种特例。按钮的 disabled 这个 property 是 false，因为默认情况下按钮是可用的。 当你添加 disabled 这个 attribute 时，只要它出现了按钮的 disabled 这个 property 就初始化为 true，于是按钮就被禁用了。
添加或删除 disabled 这个 attribute 会禁用或启用这个按钮。但 attribute 的值无关紧要，这就是你为什么没法通过 <button disabled="false">仍被禁用</button> 这种写法来启用按钮。
设置按钮的 disabled 这个 property（如，通过 Angular 绑定）可以禁用或启用这个按钮。 这就是 property 的价值。
就算名字相同，HTML attribute 和 DOM property 也不是同一样东西。
这句话值得再强调一次： 模板绑定是通过 property 和事件来工作的，而不是 attribute。

Promises vs Observables

Promises：
返回单个值
不可取消
Observables：
可以使用多个值
可取消
支持map，filter，reduce和类似的操作符

转载于:https://my.oschina.net/jasper1987/blog/1841653

chuanghongxie9654
关注
HTTP常用状态码分析
znHD的博客
12-04 243
2XX 表示正常处理 200 OK 表示正常处理 GEt方法，会返回 请求资源的实体。 HEAD方法，会返回 请求资源的实体首部，不返回主体。 204 NO content  请求处理成功，但是没有资源可以返回。 对于一些提交到服务器处理的数据，只需要返回是否成功的情况下，可以考虑使用状态码204来作为返回信息，从而省掉多余的数据传输。 206 partial content 进行了范...
301 Moved Permanently解决
summer089089的博客
09-04 1万+
1.现象 用postman访问http://www.cnblogs.com/cuihongyu3503319/p/5892257.html正常没有，但是用java的HttpURLConnection 访问报错301 Moved Permanently，被请求的资源已永久移动到新位置。 <html> <head><title>301 Moved Permanently</title></head> <body bgcolor="white"&g
301 Moved Permanently问题排查与解决
taipoucha5799的博客
11-04 11万+
1、问题描述 技术支持反馈通知商户通知不到。即根据商户传过来的地址（举例：http://www.A.com）进行封装(封装后：http://www.A.com?trxNo=123)并请求商户，结果是失败。 2、问题排查 遇到问题，首先是在机器curl下，发现出现了301 Moved Permanently。简单解释下这个错误码 3xx 类状态码表示客户端请求的资源发送了变动，需要客户端⽤新的 URL ᯿新发送请求获取资源，也就是重定向。 「301 Moved Permanently」表示..
POST请求慎用301 Moved Permanently
qq_35909525的博客
10-19 2369
在全站启用HTTPS的过程中，遇到一个坑，在此做下记录。在全站支持HTTPS以后，用户可能还会使用http访问，所以很多建议使用301 Moved Permanently+HSTS（ Strict Transport Security Policy）的方式要求用户跳转到HTTPS后再访问。 然而，对于有POST请求的域名是不适合用301 Moved Permanently的，关于post请求重定...
最新Web前端面试题精选大全及答案
HanXiaoXi_yeal的博客
01-07 19万+
HTML、CSS相关 1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级别 2.请简述css盒子模型 一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的width和height属性只是设置content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 盒子真正
web前端面试题（全）
2401_84438488的博客
06-17 1563
（补充：JavaScript 中的内存管理是自动执行的，而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。当不再需要某样东西时会发生什么?JavaScript 引擎是如何发现并清理它?答：（1）垃圾回收概述。
web 前端面试题50道
Liumxe的博客
07-23 1万+
整理出来web前端面试比较常见的50道题
2023最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
热门推荐
xm1037782843的博客
06-15 56万+
2023前端最新最全面试题 javascript面试题 vue面试题 最新的全套面试题 附带答案
【web前端面试宝典】经典10问（上篇）
苏凉.py的博客
07-06 2578
前端面试宝典！建议收藏
web前端面试重点难点问题
Marco创作间
03-24 1万+
一、vue相关 Q：vue的底层原理？ A：Vue是采用数据劫持配合发布者-订阅者模式，通过Object.defineProperty来()来劫持各个属性的getter和setter。 在数据发生变化的时候，发布消息给依赖收集器，去通知观察者，做出对应的回调函数去更新视图。 Q：vue3.0的新特性？ A： 1.代码结构更清晰 2.压缩包体积更小 3.Object.defineProperty ............
WEB前端面试选择题解答（共36题）.pdf
08-22
以上知识点详细讲解了文档中提及的WEB前端面试题目的相关概念，对于掌握JavaScript的基础知识及其在前端开发中的应用具有重要意义。这些内容不仅涉及到数组的内置方法、数据类型的检测、运算符的使用，还包括了...
Web前端面试的常见知识点.pdf
05-11
在Web前端面试中，重绘与重排（回流）的知识点是考核应聘者对HTML页面性能优化理解的重要方面。在面试过程中，面试官常常通过这部分内容来判断应聘者是否具备深入理解浏览器渲染机制的能力。 首先，了解什么是重绘...
96道web前端面试题.pdf
08-27
Web 前端面试题精华 在这篇资源摘要中，我们将涵盖 web 前端面试题的几个关键点，包括自我介绍、position 的值、解决跨域问题、XML 和 JSON 的区别、对 Webpack 的看法等。 自我介绍 在面试时，自我介绍是一个...
初，中，高级工程师web前端面试题
04-25
适用于各级别工程师的面试题，包含基础js，html，css，vue+react 以及高级浏览器原理，工程化，手写代码和性能优化问题，适用于各级别工程师的面试题，包含基础js，html，css，vue+react 以及高级浏览器原理，工程化...
面试金典题2.5
m0_73096516的博客
09-22 232
(7 -> 1 -> 6) + (5 -> 9 -> 2)，即617 + 295。(6 -> 1 -> 7) + (2 -> 9 -> 5)，即617 + 295。直接计算求和，用一个变量存储进位，就可以算出链表的和。给定两个用链表表示的整数，每个节点包含一个数位。编写函数对这两个整数求和，并用链表形式返回结果。这些数位是反向存放的，也就是个位排在链表首部。2 -> 1 -> 9，即912。9 -> 1 -> 2，即912。leetcode代码。
刷题训练之栈
AAlykk的博客
09-21 1248
最早博主续写了牛客网130道题，这块的刷题是让同学们快速进入C语言，而我们学习c++已经有一段时间了，知识储备已经足够了但缺少了实战，面对这块短板博主续写刷题训练，针对性学习，把相似的题目归类，系统的刷题，而我们刷题的官网可以参考：​​​​​​力扣（LeetCode）官网 - 全球极客挚爱的技术成长平台牛客网 - 找工作神器|笔试题库|面试经验|实习招聘内推，求职就业一站解决_牛客网⭐知识讲解采用模拟。
产品经理面试整理-了解公司和产品
最新发布
不务正业的猿
09-22 166
查阅用户评论和评价（如App Store, Google Play, Trustpilot等）以了解用户对产品的看法、赞赏的地方和需要改进的地方。：研究公司服务的客户类型和主要的用户群体（B2B, B2C, B2G等），以及他们的需求和行为特点。通过以上的准备，你将能全面了解公司和产品，在面试中更自信地展示你的洞察力和适应能力。：熟悉公司的主要产品和服务，包括它们的核心功能、目标用户、使用场景和价值主张。：关注公司在社交媒体上的表现和用户反馈，加入相关论坛，了解社区和用户的讨论。
Java面试篇-AOP专题（什么是AOP、AOP的几个核心概念、AOP的常用场景、使用AOP记录操作日志、Spring中的事务是如何实现的）
聂可以的博客
09-21 1258
Java面试篇-AOP专题（什么是AOP、AOP的几个核心概念、AOP的常用场景、使用AOP记录操作日志、Spring中的事务是如何实现的）
Web前端面试必备：理解与技巧全解析
在"BAT，WEB前段面试宝典"这份资料中，涵盖了Web前端开发面试的重要知识点，包括对Web标准的...掌握这些知识点对于准备Web前端面试至关重要，能够展示求职者的专业知识和技术水平，同时也是实际项目开发中的最佳实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值