前端面试题整理

完整面试题整理详情: https://poetries1.gitee.io/fe-interview

关注公众号:前端进阶之旅,获取更多资讯

前端面试题整理_第1张图片

$HTML, HTTP,web综合问题

1、前端需要注意哪些SEO

  • 合理的titledescriptionkeywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同;keywords列举出重要关键词即可

  • 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页

  • 重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取

  • 重要内容不要用js输出:爬虫不会执行js获取内容

  • 少用iframe:搜索引擎不会抓取iframe中的内容

  • 非装饰性图片必须加alt

  • 提高网站速度:网站速度是搜索引擎排序的一个重要指标

2、titlealt有什么区别

  • 通常当鼠标滑动到元素上的时候显示

  • alt的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。

3、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通道

4、从浏览器地址栏输入url到显示页面的步骤

  • 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;

  • 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);

  • 浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTMLDOM);

  • 载入解析到的资源文件,渲染页面,完成。

5、如何进行网站性能优化

  • content方面

    1. 减少HTTP请求:合并文件、CSS精灵、inline Image

    2. 减少DNS查询:DNS缓存、将资源分布到恰当数量的主机名

    3. 减少DOM元素数量

  • Server方面

    1. 使用CDN

    2. 配置ETag

    3. 对组件使用Gzip压缩

  • Cookie方面

    1. 减小cookie大小

  • css方面

    1. 将样式表放到页面顶部

    2. 不使用CSS表达式

    3. 使用不使用@import

  • Javascript方面

    1. 将脚本放到页面底部

    2. javascriptcss从外部引入

    3. 压缩javascriptcss

    4. 删除不需要的脚本

    5. 减少DOM访问

  • 图片方面

    1. 优化图片:根据实际颜色需要选择色深、压缩

    2. 优化css精灵

    3. 不要在HTML中拉伸图片

6、HTTP状态码及其含义

  • 1XX:信息状态码
    • 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息

  • 2XX:成功状态码
    • 200 OK 正常返回信息

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

    • 202 Accepted 服务器已接受请求,但尚未处理

  • 3XX:重定向
    • 301 Moved Permanently 请求的网页已永久移动到新位置。

    • 302 Found 临时性重定向。

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

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

  • 4XX:客户端错误
    • 400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。

    • 401 Unauthorized 请求未授权。

    • 403 Forbidden 禁止访问。

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

  • 5XX: 服务器错误
    • 500 Internal Server Error 最常见的服务器端错误。

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

7、语义化的理解

  • 用正确的标签做正确的事情!

  • html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;

  • 在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的。

  • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO

  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解

8、介绍一下你对浏览器内核的理解?

  • 主要分成两部分:渲染引擎(layout engineerRendering Engine)和JS引擎

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

  • JS引擎则:解析和执行javascript来实现网页的动态效果

  • 最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎

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

  • HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加

    • 绘画 canvas

    • 用于媒介回放的 videoaudio 元素

    • 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失

    • sessionStorage 的数据在浏览器关闭后自动删除

    • 语意化更好的内容元素,比如articlefooterheadernavsection

    • 表单控件,calendardatetimeemailurlsearch

    • 新的技术webworker, websocket, Geolocation

  • 移除的元素:

    • 纯表现的元素:basefontbigcenterfont, sstrike,tt,u`

    • 对可用性产生负面影响的元素:frameframesetnoframes

  • 支持HTML5新标签:

    • IE8/IE7/IE6支持通过document.createElement方法产生的标签

    • 可以利用这一特性让这些浏览器支持HTML5新标签

    • 浏览器支持新标签后,还需要添加标签默认的样式

  • 当然也可以直接使用成熟的框架、比如html5shim

10、HTML5的离线储存怎么使用,工作原理能不能解释一下?

  • 在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件

  • 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示

  • 如何使用:

    • 页面头部像下面一样加入一个manifest的属性;

    • cache.manifest文件的编写离线存储的资源

    • 在离线状态时,操作window.applicationCache进行需求实现

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

  • 在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。

  • 离线的情况下,浏览器就直接使用离线存储的资源。

12、请描述一下 cookiessessionStoragelocalStorage 的区别?

  • cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)

  • cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递

  • sessionStoragelocalStorage不会自动把数据发给服务器,仅在本地保存

  • 存储大小:

    • cookie数据大小不能超过4k

    • sessionStoragelocalStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大

  • 有期时间:

    • localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据

    • sessionStorage 数据在当前浏览器窗口关闭后自动删除

    • cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

13、iframe有那些缺点?

  • iframe会阻塞主页面的Onload事件

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

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

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

14、WEB标准以及W3C标准是什么?

  • 标签闭合、标签小写、不乱嵌套、使用外链cssjs、结构行为表现的分离

15、xhtml和html有什么区别?

  • 一个是功能上的差别

    • 主要是XHTML可兼容各大浏览器、手机以及PDA,并且浏览器也能快速正确地编译网页

  • 另外是书写习惯的差别

    • XHTML 元素必须被正确地嵌套,闭合,区分大小写,文档必须拥有根元素

16、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

  • 页面被加载的时,link会同时被加载,而@imort页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载 import只在IE5以上才能识别,而linkXHTML标签,无兼容问题 link方式的样式的权重 高于@import的权重

  • 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器, 用什么文档类型 规范来解析这个文档

  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行

  • 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

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

  • 行内元素有:a b span img input select strong

  • 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p

  • 空元素:


  • 行内元素不可以设置宽高,不独占一行

  • 块级元素可以设置宽高,独占一行

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

  • class:为元素设置类标识

  • data-*: 为元素增加自定义属性

  • draggable: 设置元素是否可拖拽

  • id: 元素id,文档内唯一

  • lang: 元素内容的的语言

  • style: 行内css样式

  • title: 元素相关的建议信息

19、Canvas和SVG有什么区别?

  • svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一整幅画布

  • svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会是真和锯齿。而canvas输出标量画布,就像一张图片一样,放大会失真或者锯齿

20、HTML5 为什么只需要写 ?

  • HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为

  • HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型

21、如何在页面上实现一个圆形的可点击区域?

  • svg

  • border-radius

  • js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

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

  • 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水

  • 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

$CSS部分

1、css sprite是什么,有什么优缺点

  • 概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

  • 优点:

    • 减少HTTP请求数,极大地提高页面加载速度

    • 增加图片信息重复度,提高压缩比,减少图片大小

    • 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

  • 缺点:

    • 图片合并麻烦

    • 维护麻烦,修改一个图片可能需要从新布局整个图片,样式

2、display: none;visibility: hidden;的区别

  • 联系:它们都能让元素不可见

  • 区别:

    • display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见

    • display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式

    • 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。

    • 读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容

3、link@import的区别

  1. linkHTML方式, @import是CSS方式

  2. link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC

  3. link可以通过rel="alternate stylesheet"指定候选样式

  4. 浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式

  5. @import必须在样式规则之前,可以在css文件中引用其他文件

  6. 总体来说:link优于@import

4、什么是FOUC?如何避免

  • Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。

  • 解决方法:把样式表放到文档的head

5、如何创建块级格式化上下文(block formatting context),BFC有什么用

  • 创建规则:

    • 根元素

    • 浮动元素(float不是none

    • 绝对定位元素(position取值为absolutefixed

    • display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素

    • overflow不是visible的元素

  • 作用:

    • 可以包含浮动元素

    • 不被浮动元素覆盖

    • 阻止父子元素的margin折叠

6、display,float,position的关系

  • 如果displaynone,那么positionfloat都不起作用,这种情况下元素不产生框

  • 否则,如果position值为absolute或者fixed,框就是绝对定位的,float的计算值为nonedisplay根据下面的表格进行调整。

  • 否则,如果float不是none,框是浮动的,display根据下表进行调整

  • 否则,如果元素是根元素,display根据下表进行调整

  • 其他情况下display的值为指定值

  • 总结起来:绝对定位、浮动、根元素都需要调整display

7、清除浮动的几种方式,各自的优缺点

  • 父级div定义height

  • 结尾处加空div标签clear:both

  • 父级div定义伪类:afterzoom

  • 父级div定义overflow:hidden

  • 父级div也浮动,需要定义宽度

  • 结尾处加br标签clear:both

  • 比较好的是第3种方式,好多网站都这么用

8、为什么要初始化CSS样式?

  • 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

  • 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化

9、css3有哪些新特性

  • 新增各种css选择器

  • 圆角 border-radius

  • 多列布局

  • 阴影和反射

  • 文字特效text-shadow

  • 线性渐变

  • 旋转transform

CSS3新增伪类有那些?

  • p:first-of-type 选择属于其父元素的首个

    元素的每个

    元素。

  • p:last-of-type 选择属于其父元素的最后

    元素的每个

    元素。

  • p:only-of-type 选择属于其父元素唯一的

    元素的每个

    元素。

  • p:only-child 选择属于其父元素的唯一子元素的每个

    元素。

  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个

    元素。

  • :after 在元素之前添加内容,也可以用来做清除浮动。

  • :before 在元素之后添加内容

  • :enabled

  • :disabled 控制表单控件的禁用状态。

  • :checked 单选框或复选框被选中

10、display有哪些值?说明他们的作用

  • block 象块类型元素一样显示。

  • none 缺省值。象行内元素类型一样显示。

  • inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。

  • list-item 象块类型元素一样显示,并添加样式列表标记。

  • table 此元素会作为块级表格来显示

  • inherit 规定应该从父元素继承 display 属性的值

11、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

  • 有两种, IE盒子模型、W3C盒子模型;

  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);

  • 区 别: IE的content部分把 borderpadding计算了进去;

12、CSS优先级算法如何计算?

  • 优先级就近原则,同权重情况下样式定义最近者为准

  • 载入样式以最后载入的定位为准

  • 优先级为: !important > id > class > tag important 比 内联优先级高

13、对BFC规范的理解?

  • 它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用

14、谈谈浮动和清除浮动

  • 浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

15、position的值, relative和absolute定位原点是

  • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位

  • fixed:生成绝对定位的元素,相对于浏览器窗口进行定位

  • relative:生成相对定位的元素,相对于其正常位置进行定位

  • static 默认值。没有定位,元素出现在正常的流中

  • inherit 规定从父元素继承 position 属性的值

16、display:inline-block 什么时候不会显示间隙?(携程)

  • 移除空格

  • 使用margin负值

  • 使用font-size:0

  • letter-spacing

  • word-spacing

17、PNG,GIF,JPG的区别及如何选

  • GIF

    • 8位像素,256

    • 无损压缩

    • 支持简单动画

    • 支持boolean透明

    • 适合简单动画

  • JPEG

    • 颜色限于256

    • 有损压缩

    • 可控制压缩质量

    • 不支持透明

    • 适合照片

  • PNG

    • PNG8truecolor PNG

    • PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,无动画

    • 适合图标、背景、按钮

18、行内元素float:left后是否变为块级元素?

  • 浮动后,行内元素不会成为块状元素,但是可以设置宽高。行内元素要想变成块状元素,占一行,直接设置display:block;。但如果元素设置了浮动后再设置display:block;那就不会占一行。

19、在网页中的应该使用奇数还是偶数的字体?为什么呢?

  • 偶数字号相对更容易和 web 设计的其他部分构成比例关系

20、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用

  • 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素

  • 用于区分伪类和伪元素

21、如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

  • 多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms

22、CSS合并方法

  • 避免使用@import引入多个css文件,可以使用CSS工具将CSS合并为一个CSS文件,例如使用Sass\Compass

23、CSS不同选择器的权重(CSS层叠的规则)

  • !important规则最重要,大于其它规则

  • 行内样式规则,加1000

  • 对于选择器中给定的各个ID属性值,加100

  • 对于选择器中给定的各个类属性、属性选择器或者伪类选择器,加10

  • 对于选择其中给定的各个元素标签选择器,加1

  • 如果权值一样,则按照样式规则的先后顺序来应用,顺序靠后的覆盖靠前的规则

24、列出你所知道可以改变页面布局的属性

  • positiondisplayfloatwidthheight、marginpaddingtopleftright、`

25、CSS在性能优化方面的实践

  • css压缩与合并、Gzip压缩

  • css文件放在head里、不要用@import

  • 尽量用缩写、避免用滤镜、合理使用选择器

26、CSS3动画(简单动画的实现,如旋转等)

  • 依靠CSS3中提出的三个属性:transitiontransformanimation

  • transition:定义了元素在变化过程中是怎么样的,包含transition-propertytransition-durationtransition-timing-functiontransition-delay

  • transform:定义元素的变化结果,包含rotatescaleskewtranslate

  • animation:动画定义了动作的每一帧(@keyframes)有什么效果,包括animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction

27、base64的原理及优缺点

  • 优点可以加密,减少了http请求

  • 缺点是需要消耗CPU进行编解码

28、几种常见的CSS布局

流体布局

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: red;
 }
 .right {
  float: right;
  width: 200px;
  height: 200px;
  background: blue;
 }
 .main {
  margin-left: 120px;
  margin-right: 220px;
  height: 200px;
  background: green;
 }

    
    
    

圣杯布局

.container {
            margin-left: 120px;
            margin-right: 220px;
        }
        .main {
            float: left;
            width: 100%;
            height:300px;
            background: green;
        }
        .left {
            position: relative;
            left: -120px;
            float: left;
            height: 300px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            position: relative;
            right: -220px;
            float: right;
            height: 300px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

 
 
 

双飞翼布局

 .content {
            float: left;
            width: 100%;
        }
        .main {
            height: 200px;
            margin-left: 110px;
            margin-right: 220px;
            background: green;
        }
        .main::after {
            content: '';
            display: block;
            font-size:0;
            height: 0;
            zoom: 1;
            clear: both;
        }
        .left {
            float:left;
            height: 200px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

    

29、stylus/sass/less区别

30、postcss的作用

$JavaScript

1、闭包

说说你对闭包的理解

使用闭包的注意点

2、说说你对作用域链的理解

3、JavaScript原型,原型链 ? 有什么特点?

4、请解释什么是事件代理

5、Javascript如何实现继承?

 function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//继承了Parent,通过原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//得到被继承的属性
  }

6、谈谈This对象的理解

7、事件模型

W3C中定义事件的发生经历三个阶段:捕获阶段(capturing)、目标阶段(targetin)、冒泡阶段(bubbling

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

9、Ajax原理

 // 1. 创建连接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 连接服务器
    xhr.open('get', url, true)
    // 3. 发送请求
    xhr.send(null);
    // 4. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }

ajax 有那些优缺点?

10、如何解决跨域问题?

11、模块化开发怎么做?

var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
  })();

12、异步加载JS的方式有哪些?

13、那些操作会造成内存泄漏?

14、XML和JSON的区别?

15、谈谈你对webpack的看法

16、说说你对AMD和Commonjs的理解

17、常见web安全及防护原理

XSS原理及防范

XSS防范方法

XSS与CSRF有什么区别吗?

CSRF的防御

18、用过哪些设计模式?

19、为什么要有同源限制?

20、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

21、javascript有哪些方法定义对象

22、常见兼容性问题?

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}

22、说说你对promise的了解

Promise 的构造函数

var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });
promise.then(onFulfilled, onRejected)

23、你觉得jQuery源码有哪些写的好的地方

24、vue、react、angular

25、Node的应用场景

26、谈谈你对AMD、CMD的理解

27、那些操作会造成内存泄漏?

28、web开发中会话跟踪的方法有哪些

29、介绍js的基本数据类型

30、介绍js有哪些内置对象?

31、说几条写JavaScript的基本规范?

32、JavaScript有几种类型的值?,你能画一下他们的内存图吗?

前端面试题整理_第2张图片

image

33、javascript创建对象的几种方式?

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON;但写法有很多种,也能混合使用

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
 function Person(){}
    var person=new Person();//定义一个function,如果使用new"实例化",该function可以看作是一个Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();
function Pet(name,age,hobby){
       this.name=name;//this作用域:当前对象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
       }
    }
    var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
    maidou.eat();//调用eat方法
var wcDog =new Object();
     wcDog.name="旺财";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();
function Dog(){

     }
     Dog.prototype.name="旺财";
     Dog.prototype.eat=function(){
     alert(this.name+"是个吃货");
     }
     var wangcai =new Dog();
     wangcai.eat();

 function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+",我现在卖"+this.price+"万元");
      }
    var camry =new Car("凯美瑞",27);
    camry.sell(); 

34、eval是做什么的?

35、null,undefined 的区别?

36、["1", "2", "3"].map(parseInt) 答案是多少?

37、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么?

38、JSON 的了解?

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
var last=obj.toJSONString();
var last=JSON.stringify(obj);

39、js延迟加载的方式有哪些?

40、同步和异步的区别?

41、渐进增强和优雅降级

42、defer和async

43、说说严格模式的限制

44、attribute和property的区别是什么?

45、谈谈你对ES6的理解

46、ECMAScript6 怎么写class么,为什么会出现class这种东西?

47、什么是面向对象编程及面向过程编程,它们的异同和优缺点

48、面向对象编程思想

49、对web标准、可用性、可访问性的理解

50、如何通过JS判断一个数组?

var arr = []; 
arr instanceof Array; // true
var arr = []; 
arr.constructor == Array; //true
Object.prototype.toString.call(value) == '[object Array]'
// 利用这个方法,可以写一个返回数据类型的方法
var isType = function (obj) {
     return Object.prototype.toString.call(obj).slice(8,-1); 
}
var a = new Array(123);
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

51、谈一谈let与var的区别?

52、map与forEach的区别?

53、谈一谈你理解的函数式编程?

54、谈一谈箭头函数与普通函数的区别?

55、谈一谈函数中this的指向吧?

graph LR
A-->B

56、异步编程的实现方式?

57、对原生Javascript了解程度

58、Js动画与CSS动画区别及相应实现

59、JS 数组和对象的遍历方式,以及几种方式的比较

通常我们会用循环的方式来遍历数组。但是循环是 导致js 性能问题的原因之一。一般我们会采用下几种方式来进行数组的遍历

60、gulp是什么?

61、说一下Vue的双向绑定数据的原理

$jQuery

1、你觉得jQuery或zepto源码有哪些写的好的地方

 (function( window, undefined ) {

         //用一个函数域包起来,就是所谓的沙箱

         //在这里边var定义的变量,属于这个函数域内的局部变量,避免污染全局

         //把当前沙箱需要的外部变量通过函数参数引入进来

         //只要保证参数对内提供的接口的一致性,你还可以随意替换传进来的这个参数

        window.jQuery = window.$ = jQuery;

    })( window );

2、jQuery 的实现原理?

3、jQuery.fninit 方法返回的 this 指的是什么对象? 为什么要返回 this

4、jQuery.extend 与 jQuery.fn.extend 的区别?

$.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});
$.min(2,3); //  2
$.max(4,5); //  5
var settings = {validate:false, limit:5};
var options = {validate:true, name:"bar"};
$.extend(settings, options);  // 注意:不支持第一个参数传 false
// settings == {validate:true, limit:5, name:"bar"}
$.fn.extend({
   alertValue: function() {
      $(this).click(function(){
        alert($(this).val());
      });
   }
});

$("#email").alertValue();

5、jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?

6、jQuery 的队列是如何实现的?队列可以用在哪些地方?

var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}

// 入栈队列事件
$('#box').queue("queue1", func1);  // push func1 to queue1
$('#box').queue("queue1", func2);  // push func2 to queue1

// 替换队列事件
$('#box').queue("queue1", []);  // delete queue1 with empty array
$('#box').queue("queue1", [func3, func4]);  // replace queue1

// 获取队列事件(返回一个函数数组)
$('#box').queue("queue1");  // [func3(), func4()]

// 出栈队列事件并执行
$('#box').dequeue("queue1"); // return func3 and do func3
$('#box').dequeue("queue1"); // return func4 and do func4

// 清空整个队列
$('#box').clearQueue("queue1"); // delete queue1 with clearQueue

7、jQuery 中的 bind(), live(), delegate(), on()的区别?

8、是否知道自定义事件? jQuery 里的 fire 函数是什么意思,什么时候用?

  document.createEvent(type); // 创建事件
  event.initEvent(eventType, canBubble, prevent); // 初始化事件
  target.addEventListener('dataavailable', handler, false); // 监听事件
  target.dispatchEvent(e);  // 触发事件

9、jQuery 通过哪个方法和 Sizzle 选择器结合的?

10、jQuery 中如何将数组转化为 JSON 字符串,然后再转化回来?

// 通过原生 JSON.stringify/JSON.parse 扩展 jQuery 实现
 $.array2json = function(array) {
    return JSON.stringify(array);
 }

 $.json2array = function(array) {
    // $.parseJSON(array); // 3.0 开始,已过时
    return JSON.parse(array);
 }

 // 调用
 var json = $.array2json(['a', 'b', 'c']);
 var array = $.json2array(json);

11、jQuery 一个对象可以同时绑定多个事件,这是如何实现的?

  $("#btn").on("mouseover mouseout", func);

  $("#btn").on({
      mouseover: func1,
      mouseout: func2,
      click: func3
  });

12、针对 jQuery 的优化方法?

13、jQuery 的 slideUp 动画,当鼠标快速连续触发, 动画会滞后反复执行,该如何处理呢?

14、jQuery UI 如何自定义组件?

15、jQuery 与 jQuery UI、jQuery Mobile 区别?

16、jQuery 和 Zepto 的区别? 各自的使用场景?

17、jQuery对象的特点

$编程题

1、写一个通用的事件侦听器函数

 // event(事件)工具集,来源:github.com/markyun
    markyun.Event = {
       
        // 视能力分别使用dom0||dom2||IE方式 来绑定事件
        // 参数: 操作的元素,事件名称 ,事件处理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件类型、需要执行的函数、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默认行为
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 获取事件目标
        getTarget : function(event) {
            return event.target || event.srcElement;
        }

2、如何判断一个对象是否为数组

function isArray(arg) {
    if (typeof arg === 'object') {
        return Object.prototype.toString.call(arg) === '[object Array]';
    }
    return false;
}

3、冒泡排序

var arr = [3, 1, 4, 6, 5, 7, 2];

function bubbleSort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
    for(var j = 0; j < arr.length - i - 1; j++) {
        if(arr[j + 1] < arr[j]) {
            var temp;
            temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
return arr;
}

console.log(bubbleSort(arr));

4、快速排序

var arr = [3, 1, 4, 6, 5, 7, 2];

function quickSort(arr) {
    if(arr.length == 0) {
        return [];    // 返回空数组
    }

    var cIndex = Math.floor(arr.length / 2);
    var c = arr.splice(cIndex, 1);
    var l = [];
    var r = [];

    for (var i = 0; i < arr.length; i++) {
        if(arr[i] < c) {
            l.push(arr[i]);
        } else {
            r.push(arr[i]);
        }
    }

    return quickSort(l).concat(c, quickSort(r));
}

console.log(quickSort(arr));

5、编写一个方法 求一个字符串的字节长度

function GetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i 255) bytes++;

        }

        return bytes;

    }

alert(GetBytes("你好,as"));

6、bind的用法,以及如何实现bind的函数和需要注意的点

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

$其他

1、谈谈你对重构的理解

2、什么样的前端代码是好的

3、对前端工程师这个职位是怎么样理解的?它的前景会怎么样?

4、你觉得前端工程的价值体现在哪

5、平时如何管理你的项目?

人事面

常问

你可能感兴趣的:(面试,前端面试,面试题)