前端开发原理面试题

面试官系列

// TODO

经典面试题

1.浏览器渲染原理, 回流, 重绘的概念和原理?

总结:

回流必定触发重绘, 重绘不一定触发回流。重绘的开销较小, 回流的代价较高。所以尽量减少触发回流的操作, 以达到更好的性能

2.对WEB标准以及W3C的理解与认识?

Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成, 简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表, 通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互, 这部分主要由JS组成

W3C, 全称: world wide web consortium是一个制定各种标准的非盈利性组织, 也叫万维网联盟, 标准包括HTML、CSS、ECMAScript等等, web标准的制定有很多好处, 比如说:

可以统一开发流程, 统一使用标准化开发工具(VSCode、WebStorm、Sublime), 方便多人协作
学习成本降低, 只需要学习标准就行, 否则就要学习各个浏览器厂商标准
跨平台, 方便迁移都不同设备
降低代码维护成本

3.XHTML和HTML有什么区别?

xhtml和html的区别

其基础语言不同

XhtmL是基于可扩展标记语言(XmL)。
htmL是基于标准通用标记语言(sgmL)。

语法严格程度不同

XhtmL语法比较严格, 存在dtd定义规则。
htmL语法要求比较松散, 这样对网页编写者来说, 比较方便。

可混合应用不同

XhtmL可以混合各种XmL应用, 比如mathmL、sVg。
htmL不能混合其它XmL应用。

大小写敏感度不同

XhtmL对大小写敏感, 标准的XhtmL标签应该使用小写。
htmL对大小写不敏感。

公布时间不同

XhtmL是2000年w3c公布发行的。
htmL4.01是1999年w3c推荐标准。

4.Doctype? 严格模式与混杂模式-如何触发这两种模式?

严格模式与混杂模式

5.写出几种IE6 BUG的解决方法?

强制浏览器是用Web标准解析


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml"></html>

Set Position: relative

给元素指定Position: relative能够解决很多奇怪的问题, 比如对齐和显示不正确等。对于Position的属性要小心设置, 特别是设为absolute。

给Float的元素加上inline属性避免双倍margin

这大概是最著名的一个bug了, IE6下对于浮动元素, 会莫名其妙的双倍空白边, 解决的方法也很莫名, 设上display:inline属性就好了, 对于float元素这个属性本身没有任何意义。

给特定元素加上hasLayout属性

很多IE6(甚至是IE7)的问题可以通过设置hasLayout这个ie only的内部属性来解决, 比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有 hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候, 你不能显示的为其设定高度, 可以使用设置高度为1%, 而其父元素如果没有确定的高度时, 该设置不会被应用到实际的高度上, 但是hasLayout会被激活。

Fix字符重复bug

这是IE6上面一个非常奇怪的BUG, 他的触发条件也是相当诡异, 在浮动元素间如果有这样的普通的HTML注释的话, 会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中, 具体的介绍大家可以看这里positioniseverything 。

解决的方法也很奇怪

将所有的浮动元素设为 display: inline;
给最后的浮动元素设置 margin-right: -3px;
使用条件注释避免IE6下的问题 Put your commentary in here…
在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)

需要悬浮效果的地方, 尽量使用<a>标签IE6中只能对<a>应用css hover效果, 所以尽可能使用<a>标签来获取最大的兼容性。
使用!important或者高级选择器来兼容IE6

使用!important和高级选择器来兼容IE6, 可以避免使用那些通不过校验的非常规hack, 比如所谓的_width这样的东西。我们来看个简单的例子。


#element {
	min-height: 20em;
	height: auto !important; /* understood by all browsers */
	height: 20em; /* IE6 incorrectly uses this value */
}

IE6是不能正确解读!important这个修饰符的, 所以他会错误的使用height:20em这个属性来实现最小高度。(IE6下容器会自动扩展)

IE6下是用百分比的尺寸是件非常让人头疼的事情, 尽可能避免这样的使用, 而是采用结合!important和精确尺寸来明确元素的大小。

频繁测试, 尽早测试

和其他编程一样, 现在编程提倡持续测试, 尽早测试, 甚至可以测试驱动, 在CSS开发过程中也要尽可能的频繁测试, 可以参看我之前介绍的一些测试工具。

重构你的代码

在任何浏览器中, 需要获得鼠标hover效果, 都建议尽量采用A标签, 可以先将A标签强制转化为block块级元素(display:block), 然后就可以为其设定宽度和高度, 但是它也具有了块级元素自动换行的属性, 所以麻烦的是如果要其横排还要为其指定float:left, 并且在应用完成后及时的清除浮动

6.标签上title与alt属性的区别是什么?

alt: 当图片不显示是用文字代表
title: 为该属性提供信息

7.前端页面有哪三层构成, 分别是什么?作用是什么?

结构层 Html
表示层 Css
行为层 JavaScript

8.解释什么是语义化的HTML?

什么是HTML语义化?

基本上都是围绕着几个主要的标签, 像标题(H1~H6)、列表(li)、强调(strong em)等等

根据内容的结构化(内容语义化), 选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

**为什么要语义化? **

为了在没有CSS的情况下, 页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;

用户体验: 例如title、alt用于解释名词或解释图片信息、label标签的活用;

有利于SEO: 和搜索引擎建立良好沟通, 有助于爬虫抓取更多的有效信息: 爬虫依赖于标签来确定上下文和各个关键字的权重;

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

便于团队开发和维护, 语义化更具可读性, 是下一步吧网页的重要动向, 遵循W3C标准的团队都遵循这个标准, 可以减少差异化。

**写HTML代码时应注意什么? **

尽可能少的使用无语义的标签p和span;

在语义不明显时, 既可以使用p或者p时, 尽量用p, 因为p在默认情况下有上下间距, 对兼容特殊终端有利;

不要使用纯样式标签, 如: b、font、u等, 改用css设置。

需要强调的文本, 可以包含在strong或者em标签中(浏览器预设样式, 能用CSS指定就不用他们), strong默认样式是加粗(不要用b), em是斜体(不用i);

使用表格时, 标题要用caption, 表头用thead, 主体部分用tbody包围, 尾部用tfoot包围。表头和一般单元格要区分开, 表头用th, 单元格用td;

表单域要用fieldset标签包起来, 并用legend标签说明表单的用途;

每个input标签对应的说明文本都需要使用label标签, 并且通过为input设置id属性, 在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

9.Doctype作用? 标准模式与兼容模式各有什么区别?

!DOCTYPE声明位于位于HTML文档中的第一行, 处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中, 页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

10.如何实现浏览器内多个标签页之间的通信?

实现多个标签页之间的通信, 本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信, 因此我们可以找一个中介者, 让标签页和中介者进行通信, 然后让这个中介者来进行消息的转发。通信方法如下:

websocket

websocket 协议可以实现服务器推送, 所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数据, 然后由服务器向其他标签页推送转发。

shareWorker

shareWorker 会在页面存在的生命周期内创建一个唯一的线程, 并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程, 然后通过这个共享的线程来实现数据的交换。

localStorage

我们可以在一个标签页对 localStorage 的变化事件进行监听, 然后当另一个标签页修改数据的时候, 我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。

postMessage

如果我们能够获得对应标签页的引用, 就可以使用postMessage 方法, 进行通信

11.Http状态码有那些?

说说HTTP 常见的状态码有哪些, 适用场景?

12.常用那几种浏览器测试? 有哪些内核(Layout Engine)?

(Q1)浏览器: IE, Chrome, FireFox, Safari, Opera。

(Q2)内核: Trident, Gecko, Presto, Webkit。

13.解释什么是盒子模型?

盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。除去内容部分, 其余每个部分又分别包含上、下、左和右4个方向, 方向既可以分别定义也可以统一定义。

我们生活中常见的手机盒子就可以看作一个盒子模型, 完整的手机盒子通常包含手机、内填充物和盛装手机的外壳。如果把手机想象成HTML标记, 那么手机盒子就是一个CSS盒子模型。内容就是盒子里装的手机;内边距就是怕手机损坏得填充物: 边框就是盒子本身外部的壳;外边距就是多个手机盒子排放时空的缝隙。

标记

div英文全称为division, 译为中文是”分割、区域”。标记简单而言就是一个块标记, 可以实现网页的规划和布局。在HTML文档中, 页面会被划分为很多区域, 不同区域显示不同的内容, 如导航栏、banner、内容区等, 这些区块一般都通过标记可以在div标记中设置外边距、内边距、宽和高, 同时内部可以容纳段落、标题、表图像等各种网页元素, 也就是说大多数HTML标记都可以嵌套在标记中, 中还可以嵌套多层。标记非常强大, 通过与id、class等属性结合设置CSS样式, 可以替代大多数的块级文本标记。

盒子的宽与高

网页是由多个盒子排列而成的, 每个盒子都有固定的大小, 在CSS中使用宽度属性widh和高度属性height控制盒子的大小。widh和height属性值可以是不同单位的数值或相对于父标记的百分比, 实际工作中, 最常用的属性值是像素值。

相关阅读: 什么是实体化三属性?

实体化是指给标记划分区域(画盒子), 并通过宽度、高度、背景色这三种属性, 让标记形态化, 成为一个盒子。需要注意的是, 宽度属性wdh和高度属性height仅适用于块级元素, 对行内元素无效(和标记除外)。

14.前端标准 px和em的区别?

说说em/px/rem/vh/vw区别?

15.XML和JSON的区别?

数据体积方面: JSON相对于XML来讲, 数据的体积小, 传递的速度更快些。
数据交互方面: JSON与JavaScript的交互更加方便, 更容易解析处理, 更好的数据交互。
数据描述方面: JSON对数据的描述性比XML较差。
传输速度方面: JSON的速度要远远快于XML。

16.WebWorker和WebSocket的含义解释?

worker主线程:

通过 worker = new Worker(url) 加载一个JS文件来创建一个worker, 同时返回一个worker实例。
通过worker.postMessage( data ) 方法来向worker发送数据。
绑定worker.onmessage方法来接收worker发送过来的数据。
可以使用 worker.terminate() 来终止一个worker的执行。

WebSocket

Web应用程序的传输协议, 它提供了双向的, 按序到达的数据流。他是一个Html5协议, WebSocket的连接是持久的, 他通过在客户端和服务器之间保持双工连接, 服务器的更新可以被及时推送给客户端, 而不需要客户端以一定时间间隔去轮询。

详细

WebWorker

WebSocket

17.简述对前端模块化的认识?

模块化的概念

模块化是一种处理复杂系统分解成为更好的可管理模块的方式, 它可以把系统代码划分为一系列职责单一, 高度解耦且可替换的模块, 系统中某一部分的变化将如何影响其它部分就会变得显而易见, 系统的可维护性更加简单易得。

模块化是一种分治的思想, 通过分解复杂系统为独立的模块实现细粒度的精细控制, 对于复杂系统的维护和管理十分有益。模块化也是组件化的基石, 是构成现在色彩斑斓的前端世界的前提条件。

为什么需要模块化

前端开发和其他开发工作的主要区别, 首先是前端是基于多语言、多层次的编码和组织工作, 其次前端产品的交付是基于浏览器, 这些资源是通过增量加载的方式运行到浏览器端, 如何在开发环境组织好这些碎片化的代码和资源, 并且保证他们在浏览器端快速、优雅的加载和更新, 就需要一个模块化系统。

模块化的好处

可维护性。因为模块是独立的, 一个设计良好的模块会让外面的代码对自己的依赖越少越好, 这样自己就可以独立去更新和改进。

命名空间。在 JavaScript 里面, 如果一个变量在最顶级的函数之外声明, 它就直接变成全局可用。因此, 常常不小心出现命名冲突的情况。使用模块化开发来封装变量, 可以避免污染全局环境。

重用代码。我们有时候会喜欢从之前写过的项目中拷贝代码到新的项目, 这没有问题, 但是更好的方法是, 通过模块引用的方式, 来避免重复的代码库。我们可以在更新了模块之后, 让引用了该模块的所有项目都同步更新, 还能指定版本号, 避免 API 变更带来的麻烦。

18.简述 Expires和Cache-Control?

浏览器缓存Expires属性和Cache-Control属性都属于强缓存策略。

**什么是强缓存策略? **

使用强缓存策略时, 如果缓存资源有效, 则直接使用缓存资源, 不必再向服务器发起请求。

http 头信息中的 Expires 属性

服务器通过在响应头中添加 Expires 属性, 来指定资源的过期时间。在过期时间以内, 该资源可以被缓存使用, 不必再向服务器发送请求。这个时间是一个绝对时间, 它是服务器的时间, 因此可能存在这样的问题, 就是客户端的时间和服务器端的时间不一致, 或者用户可以对客户端时间进行修改的情况, 这样就可能会影响缓存命中的结果。

http 头信息中的 Cache-Control 属性

Expires 是 http1.0 中的方式, 因为它的一些缺点, 在 http 1.1 中提出了一个新的头部属性就是 Cache-Control 属性, 它提供了对资源的缓存的更精确的控制。它有很多不同的值, 常用的比如:

通过设置 max-age 来指定资源能够被缓存的时间的大小, 这是一个相对的时间, 它会根据这个时间的大小和资源第一次请求时的时间来计算出资源过期的时间, 因此相对于 Expires 来说, 这种方式更加有效一些。

private, 用来规定资源只能被客户端缓存, 不能够代理服务器所缓存。

no-store , 用来指定资源不能够被缓存。

no-cache 代表该资源能够被缓存, 但是立即失效, 每次都需要向服务器发起请求。

一般来说只需要设置其中一种方式就可以实现强缓存策略, 当两种方式一起使用时, Cache-Control 的优先级要高于 Expires 。

19.关于HTTP2.0 的概念和描述 ?

HTTP/2引入了”服务端推(server push)“的概念, 它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中, 从而提高性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技术, 允许多个消息在一个连接上同时交差。

它增加了头压缩(header compression), 因此即使非常小的请求, 其请求和响应的header都只会占用很小比例的带宽

20.简述浏览器Cookie的理解 ?

Cookie虽然在持久保存客户端数据提供了方便, 分担了服务器存储的负担, 但还是有很多局限性的。

每个特定的域名下最多生成20个cookie

IE6或更低版本最多20个cookie
IE7和之后的版本最后可以有50个cookie。
Firefox最多50个cookie
chrome和Safari没有做硬性限制

IE和Opera 会清理近期最少使用的cookie, Firefox会随机清理cookie。 cookie的最大大约为4096字节, 为了兼容性, 一般不能超过4095字节。 IE 提供了一种存储可以持久化用户数据, 叫做userdata, 从IE5.0就开始支持。每个数据最多128K, 每个域名下最多1M。这个持久化数据放在缓存中, 如果缓存没有清理, 那么会一直存在。

优点: 极高的扩展性和可用性

通过良好的编程, 控制保存在cookie中的session对象的大小。
通过加密和安全传输技术(SSL), 减少cookie被破解的可能性。
只在cookie中存放不敏感数据, 即使被盗也不会有重大损失。
控制cookie的生命期, 使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点:

Cookie数量和长度的限制。每个domain最多只能有20条cookie, 每个cookie长度不能超过4KB, 否则会被截掉.
安全性问题。如果cookie被人拦截了, 那人就可以取得所有的session信息。即使加密也与事无补, 因为拦截者并不需要知道cookie的意义, 他只要原样转发cookie就可以达到目的了。
有些状态不可能保存在客户端。例如, 为了防止重复提交表单, 我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端, 那么它起不到任何作用。

21.Web Storage和cookie的区别?

Javascript本地存储的方式有哪些?区别及应用场景?

22.cookie 和Session 的区别?

cookie数据存放在客户的浏览器上, session数据放在服务器上。
cookie不是很安全, 别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多, 会比较占用你服务器的性能考虑到减轻服务器性能方面, 应当使用COOKIE。
单个cookie保存的数据不能超过4K, 很多浏览器都限制一个站点最多保存20个cookie。
所以个人建议:

将登陆信息等重要信息存放为SESSION
其他信息如果需要保留, 可以放在COOKIE中

23.`display: none`和`visibility: hidden`的区别?

css中, 有哪些方式可以隐藏页面元素? 区别?

24.阐述对前端BFC规范的理解和应用模式?

谈谈你对BFC的理解

25.阐述你对语义化的理解?

去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO: 和搜索引擎建立良好沟通, 有助于爬虫抓取更多的有效信息: 爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护, 语义化更具可读性, 是下一步吧网页的重要动向, 遵循W3C标准的团队都遵循这个标准, 可以减少差异化。

26.常见前端开发测试兼容性问题?

png24位的图片在iE6浏览器上出现背景, 解决方案是做成PNG8.也可以引用一段脚本处理. 浏览器默认的margin和padding不同。解决方案是加一个全局的* { margin: 0; padding: 0; }来统一。

IE6双边距bug:块属性标签float后, 又有横行的margin情况下, 在ie6显示margin比设置的大。浮动ie产生的双倍距离(IE6双边距问题: 在IE6下, 如果对元素设置了浮动, 同时又设置了margin-left或margin-right, margin值会加倍。)


#box {
  float: left;
  width: 10px;
  margin: 0 0 0 100px;
}

这种情况之下IE会产生20px的距离, 解决方案是在float的标签样式控制中加入_display: inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式, 从总体中逐渐排除局部。首先, 巧妙的使用”9”这一标记, 将IE游览器从所有情况中分离出来。接着, 再次使用”+“将IE8和IE7、IE6分离开来, 这样IE8已经独立识别。


.bb {
  background-color: #f1ee18; /*所有识别*/
  .background-color: #00deff9; /*IE6、7、8识别*/
  +background-color: #a200ff;  /*IE6、7识别*/
  _background-color: #1e0bd1; /*IE6识别*/
}

怪异模式问题: 漏写DTD声明, Firefox仍然会按照标准模式来解析网页, 但在IE中会触发

怪异模式。为避免怪异模式给我们带来不必要的麻烦, 最好养成书写DTD声明的好习惯。现在可以使用html5 推荐的写法

27.阐述异步加载和延迟加载?

异步加载和延迟加载

28.简述Promise的构造函数?

你是怎么理解ES6中 Promise的?使用场景?

29.简述严格模式的限制?

严格模式主要有以下限制:

变量必须声明后再使用
函数的参数不能有同名属性, 否则报错
不能使用with语句
不能对只读属性赋值, 否则报错
不能使用前缀0表示八进制数, 否则报错
不能删除不可删除的属性, 否则报错
不能删除变量delete prop, 会报错, 只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字(比如protected、static和interface)

设立”严格模式”的目的, 主要有以下几个:

消除Javascript语法的一些不合理、不严谨之处, 减少一些怪异行为;
消除代码运行的一些不安全之处, 保证代码运行的安全; = 提高编译器效率, 增加运行速度;
为未来新版本的Javascript做好铺垫。

注: 经过测试IE6,7,8,9均不支持严格模式。

30.阐述网络各种协议?

ICMP协议: 因特网控制报文协议。它是TCP/IP协议族的一个子协议, 用于在IP主机、路由器之间传递控制消息。
TFTP协议: 是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议, 提供不复杂、开销不大的文件传输服务。
HTTP协议: 超文本传输协议, 是一个属于应用层的面向对象的协议, 由于其简捷、快速的方式, 适用于分布式超媒体信息系统。
DHCP协议: 动态主机配置协议, 是一种让系统得以连接到网络上, 并获取所需要的配置参数手段。

31.关于Web端iframe有那些缺点?

优点:

从上文中我们可以发现, 使用ifame框架的弊端是无法被搜索引擎所爬行抓取。但凡事总是具有两面性。它的这个缺点也可能是他的优点。利用这一点那我们就可以把我们站点上一些需要给我们的用户查看, 但是不需要搜索引擎爬行的内容用ifame框架进行显示, 这样就可以让ifram发挥真正的效果了, 而且有我们站点中的代码也可以得到很大的精简, 举一个例子, 就如笔者上文提到的添加微博直播信息, 这些微博信息我们并不需要提供给搜索引擎, 而我们需要提供的是与访客的一个互动的体验, 如下图所示, 而如果我们使用ifame框架嵌入微博的信息, 不仅可以简便的添加站点的微博直播平台, 同时我们看到代码也十分的精简。

缺点:

在网页中使用框架结构最大的弊病是搜索引擎的爬虫程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时, 它们只看到框架而无法找到链接, 因此它们会以为该网站是个死站点, 并且很快转身离去。对一个网站来说这无异于一场灾难。如果你想销售产品, 你需要客户;如想得到客户, 你首先要让人们访问你的网站, 而要做到这一点, 你就非求助于搜索引擎不可。你花费了大量的时间、精力和金钱开设了一家网上商店, 却又故意不让搜索引擎检索你, 这就好象开家零售商店, 却将窗户全部漆成黑色, 而且还不挂任何招牌一样。

32.设计中使用了非标准的字体, 该如何处理?

用图片代替。
使用一些在线字体库, 例如Typekit, Google Webfonts等。
使用@font-face

33.XHTML的局限性?

语法上更严格, 放弃了一些语义不好的标签
必须要有head, body.标签必须闭合
一些老的浏览器并不兼容

34.为什么利用多个域名来提供网站资源会更有效?

CDN缓存更方便
突破浏览器并发限制(一般每个域名建立的链接不超过6个)
Cookieless, 节省带宽, 尤其是上行带宽一般比下行要慢
对于UGC的内容和主站隔离, 防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名, 而是一个完全独立的第三方域名。
数据做了划分, 甚至切到了不同的物理集群, 通过子域名来分流比较省事。这个可能被用的不多。

PS:关于Cookie的问题, 带宽是次要的, 安全隔离才是主要的。关于多域名, 也不是越多越好, 虽然服务器端可以做泛解释, 浏览器做dns解释也是耗时间的, 而且太多域名, 如果要走https的话, 还有要多买证书和部署的问题。

35,解释什么是FOUC(无样式内容闪烁)? 你如何来避免FOUC?

FOUC(Flash Of Unstyled Content)—文档样式闪烁


<style type="text/css"media="all">
  @import"../fouc.css";
</style>

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM, 然后再去导入外部的CSS文件, 因此, 在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的, 这段时间的长短跟网速, 电脑速度都有关系。解决方法简单的出奇, 只要在<head>之间加入一个<link>或者<script>元素就可以了

36.简述SVG样式?

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

什么是SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

37.解释一下你对盒模型的理解, 以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局?

说说你对盒子模型的理解

38.阐述一个页面从输入 URL 到页面加载显示完成, 这个过程中都发生了什么过程?

说说地址栏输入 URL 敲下回车后发生了什么?

39.简述同步和异步的区别?

同步是阻塞模式, 异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候, 若该请求需要一段时间才能返回信息, 那么这个进程将会一直等待下去, 直到收到返回信息才继续执行下去; 异步是指进程不需要一直等下去, 而是继续执行下面的操作, 不管其他进程的状态。当有消息返回时系统会通知进程进行处理, 这样可以提高执行的效率

40.阐述对AMD和Commonjs的理解 ?

CommonJS是服务器端模块的规范, Node.js采用了这个规范。CommonJS规范加载模块是同步的, 也就是说, 只有加载完成, 才能执行后面的操作。AMD规范则是非同步加载模块, 允许指定回调函数。

AMD推荐的风格通过返回一个对象做为模块对象, CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

共同点: 两者都是为了实现模块化编程而出现的, 对于大型项目, 参与人数多, 代码逻辑复杂, 是最适合使用模块化的思想来完成整个项目的。同时采用这种思想也很便于对整个项目进行管控。

区别: CommonJS是适用于服务器端的, 著名的Node执行环境就是采用的CommonJS模式。它是同步加载不同模块文件。之所以采用同步, 是因为模块文件都存放在服务器的各个硬盘上, 实际的加载时间就是硬盘的文件读取时间。

AMD, Asynchronous Module Definition, 即异步模块定义。它是适用于浏览器端的一种模块加载方式。从名字可知, AMD采用的是异步加载方式(js中最典型的异步例子就是ajax)。浏览器需要使用的js文件(第一次加载, 忽略缓存)都存放在服务器端, 从服务器端加载文件到浏览器是受网速等各种环境因素的影响的, 如果采用同步加载方式, 一旦js文件加载受阻, 后续在排队等待执行的js语句将执行出错, 会导致页面的‘假死’, 用户无法使用一些交互。所以在浏览器端是无法使用CommonJS的模式的。目前, 主要有两个Javascript库实现了AMD规范: require.js和curl.js

41.WEB应用从服务器主动推送Data到客户端有那些方式?

Javascript数据推送
Commet: 基于HTTP长连接的服务器推送技术
基于WebSocket的推送方案
SSE(Server-Send Event): 服务器推送数据新方式

42.简述Etag概念和应用 ?

ETag是URL的TAG, 主要是标志URL对象有没发生改变, 用于客户端的缓存。服务器产生ETag, 并在HTTP响应头中将其传送到客户端, 服务器用它来判断页面是否被修改过, 如果未修改返回304, 无需传输整个对象。 HTTP协议里ETag是”被请求变量的实体值”。站点启用ETag的好处有哪些? 1、Sitemap启用ETag后, 百度就可以快速的知道Sitemap的更新, 在内容没有做更改的情况下, 服务器只发回304应答头, 对流量的消耗极小, 平均每个head在227B大小的通常下, 如果24个小时每秒回应的流量消耗仅为18.7M。 2、站长平台对每个站点的Sitemap主动抓取次数是有上限的, 目前并没有对所有站点开放, 如果你的站点Sitemap开启了ETag, 并通过了测试, 就可以用较小的流量享受百度及时更新网站的Sitemap的功能, 加速了百度收录网站的内容。 3、网站上的文件会出现周期性的更改, 但主体的内容并没有改变, 仅改变了修改的时间, 站长不需要客户端认为这个文件被修改了, 而重新GET。 4、网站上的某些文件修改起来会比较麻烦, 比如在1秒的期间内, 修改了N次, If-Modified-Since能检查到的粒度是秒级, 但是这种修改是无法判断的。正常情况下ETag会与Last-Modified一起使用, 这样可利用客户端的缓存。

43.网站伪静态和静态的区别, 网站为什么要做静态URL?

静态URL

加载的时候不需要调用数据库, 响应速度快。
纯静态网页是纯HTML格式的文件, 因此不容易遭受黑客攻击, 网站的安全性比较高。
网站的简洁化提高用户体验度。

伪静态URL

后台发布文章的时候, 可以实时更新内容。
方便的实现对化化引擎的优化, 并且比生成静态更加方便。
缩短了URL的长度, 隐藏文件实际路径提高了安全性, 易于用户记忆和输入。
占空间比较小。
URL地址以HTML为结尾的形式, 具有隐藏或加密, 跟纯静态的页面一样有防止黑客攻击。

**网站为什么要做静态URL? **

静态URL相对于另外两种HTML页面收录效果比较快、优化程度也比较容易。
静态URL比较清晰和更容易读懂, 分享的时候有一条链接, 动态页面显示是一串链接, 并不美观。
国内大部分都使用百度搜索引擎, 而百度搜索引擎暂时不支持js调用。

44.列举IE与 Firefox的不同之处?

不同之处如下

(1)IE支持 currentStyle;Firefox使用 get ComputStyle。

(2)IE使用 inner Text;Firefox使用 textContent。

(3)在透明度滤镜方面, 正使用 filter:alpha( opacity=num);Firefox使用-moz- opacity :num

(4)在事件方面, IE使用 attachEvent:Firefox使用 add Event Listener

(5)对于鼠标位置: IE使用 event. clientX;Firefox使用 event. pageX。

(6)IE使用 event. srcElement;Firefox使用 event. target

(7)要消除list的原点, IE中仅须使 margin: 0即可达到最终效果;Firefox中需要设置margin: 0、 padding: 0和 list-style:none

(8)CSS圆角: IE7以下不支持圆角。

45.Web-garden和web-farm有什么不同?

web-garden和 web-farm都是网络托管系统。唯一的区别是 web-garden是在单个服务器中包含许多处理器的设置, 而web-farm是使用多个服务器的较大设置

Web Farm

Web Garden

46.JavaScript是怎么样实现继承的?

Javascript如何实现继承

47.简述JavaScript如何通过new构建对象?

说说new操作符具体干了什么

48.简述JavaScript构造函数的特点?

构造函数的函数名首字母大写, 构造函数类似于一个模板, 可以使用new关键字执行构造函数, 创建实例化对象

49.用JavaScript写一个实现寄生式继承的方法?

以下代码实现了寄生式继承方法 inherit。


var inherit = (function () {
 
  // 定义寄生类
  function F() {};
 
  return function(sub, sup) {
    // 寄生类的原型指向父类
    F.prototype= sup.prototype;
    // 继承父类的原型
    sub.prototype = new F();
    // 更正构造函数
    sub.prototype.constructor = sub;
    // 返回子类
    return sub;
  }
})()


//父类
function Star(names) {
  this.names = names
}
 
Star.prototype.getNames = function() {
  return this.names
}
 
//子类
function Moviestar (names, age) {
  // 构造函数式继承
  Star.apply(this, arguments)
  this.age = age;
}
 
//寄生式继承
inherit(Moviestar, star);
  MovieStar.prototype.getAge =function () {
  return this.age;
}
 
console. log(new Moviestar('xiao bai', 20))

50.面向对象的特性有哪些?

(1)抽象, 就是忽略一个主题中与当前目标无关的那些方面, 以便更充分地关注与当前目标相关的方面。

(2)封装, 利用抽象数据类型将数据和基于数据的操作封装在一起, 使其构成一个不可分割的独立实体。数据存放在抽象数据类型的内部, 尽可能地隐藏内部的细节, 只保留一些对外接口, 使之与外部发生联系。

(3)继承, 使用已存在的类的定义作为基础, 建立新类的技术。新类的定义可以增加新的数据或新的功能, 也可以用父类的功能, 但不能选择性地继承父类。

(4)多态, 程序中定义的引用变量所指向的具体类型和通过该引用变量触发的方法调用在编程时并不确定, 而在程序运行期间才能确定, 即一个引用变量到底会指向哪个类的实例对象, 该引用变量触发的方法调用到底是哪个类中实现的方法, 必须在程序运行期间才能决定。

51.简述面向对象编程的三大特点 ?

(1)封装, 即将描述同一个对象的属性和方法定义在一个对象中。

(2)继承, 即父对象中的属性和方法被子对象使用。

(3)多态, 即同一个对象在不同情况下呈现不同的形态(注意, 在 JavaScript中无多态”的概念)。多态有以下两种形式。

重载, 即同一方法名, 根据传入的参数不同, 而执行不同操作。

重写, 即子对象在继承父对象的属性或方法后, 重新定义一个新的属性或方法以覆盖从父对象中继承的属性或方法。

52.简述方法重载(Overload)与方法重写(Override)的区别?

方法重载属于编译时的多态, 根据传递的参数不同, 执行不同的业务逻辑, 得到不同的结果。

方法重写属于运行时的多态, 子类原型指向父类原型, 子类重写父类的方法, 在调用子类方法的时候使用子类的方法, 从而重写父类中定义的方法

53.JavaScript如何判断某个对象是否包含指定成员?

obj.hasOwnProperty("属性名")
"属性名"in obj
if (obj.属性名 === undefined) {}

54.简述JavaScript this通常指向?

在运行时, this关键字指向正在调用该方法的对象

谈谈this对象的理解

55.JavaScript如何判断属性是自有属性还是原型属性?

方法如下

(1)要判断自有属性, 使用 obj.hasOwnProperty("属性名")

(2)要判断原型属性, 使用”属性名" in obj && !obj.hasOwnProperty("属性名")的形式。

56.简述什么是函数柯里化?

柯里化, 是函数式编程的一个重要概念。它既能减少代码冗余, 也能增加可读性。另外, 附带着还能用来装逼。

先给出柯里化的定义: 在数学和计算机科学中, 柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

柯里化的定义, 理解起来有点费劲。为了更好地理解, 先看下面这个例子:


function sum (a, b, c) {
  console.log(a + b + c);
}
 
sum(1, 2, 3); // 6

毫无疑问, sum 是个简单的累加函数, 接受3个参数, 输出累加的结果。

假设有这样的需求, sum的前2个参数保持不变, 最后一个参数可以随意。那么就会想到, 在函数内, 是否可以把前2个参数的相加过程, 给抽离出来, 因为参数都是相同的, 没必要每次都做运算。如果先不管函数内的具体实现, 调用的写法可以是这样: sum(1, 2)(3); 或这样 sum(1, 2)(10); 。

就是, 先把前2个参数的运算结果拿到后, 再与第3个参数相加。

这其实就是函数柯里化的简单应用。

57.简述meta作用和解释 ?

// TODO

58.简述PWA使用过吗? serviceWorker的使用原理是啥?

渐进式网络应用(PWA) 是谷歌在2015年底提出的概念。基本上算是web应用程序, 但在外观和感觉上与原生app 类似。支持 PWA 的网站可以提供脱机工作、推送通知和设备硬件访问等功能。

Service Worker 是浏览器在后台独立于网页运行的脚本, 它打开了通向不需要网页或用户交互的功能的大门。现在, 它们已包括如推送通知和后台同步等功能。将来, Service Worker 将会支持如定期同步或地理围栏等其他功能。

PWA

Service Worker

59.如果一个构造函数, bind了一个对象, 用这个构造函数创建出的实例会继承这个对象的属性吗? 为什么 ?

不会继承, 因为根据 this 绑定四大规则, new 绑定的优先级高于 bind 显示绑定, 通过 new 进行构造函数调用时, 会创建一个新对象, 这个新对象会代替 bind 的对象绑定, 作为此函数的 this, 并且在此函数没有返回对象的情况下, 返回这个新建的对象

60.简述深度优先遍历和广度优先遍历, 如何实现?

深度优先遍历——是指从某个顶点出发, 首先访问这个顶点, 然后找出刚访问这个结点的第一个未被访问的邻结点, 然后再以此邻结点为顶点, 继续找它的下一个顶点进行访问。重复此步骤, 直至所有结点都被访问完为止。

代码示例


// 深度优先遍历的递归写法 
function deepTraversal(node) {
  let nodes = []
  if (node != null) {
    nodes.push[node]
  }
 
  let childrens = node.children
  for (let i = 0; i < childrens.length; i++) {
    deepTraversal(childrens[i])
  }
 
  return nodes
}
 
// 深度优先遍历的非递归写法 
function deepTraversal(node) {
  let nodes = []
  if (node != null) {
    let stack = []
    //同来存放将来要访问的节点
    stack.push(node)
  }
 
  while (stack.length != 0) {
    let item = stack.pop()
    //正在访问的节点
    nodes.push(item)
    let childrens = item.children
    for (let i = childrens.length - 1;i >= 0; i--){
    //将现在访问点的节点的子节点存入 stack, 供将来访问 )
      stack.push(childrens[i])
    }
  }
 
  return nodes
}

广度优先遍历——是从某个顶点出发, 首先访问这个顶点, 然后找出刚访问这个结点所有未被访问的邻结点, 访问完后再访问这些结点中第一个邻结点的所有结点, 重复此方法, 直到所有结点都被访问完为止。

代码示例


// 广度优先遍历的递归写法
function wideTraversal(node) {
  let nodes = [],
  i = 0
 
  if (node != null) {
    nodes.push(node)
    wideTraversal(node.nextElementSibling)
    node = nodes[i++]
    wideTraversal(node.firstElementChild)
  }
  return nodes
}
 
//广度优先遍历的非递归写法
function wideTraversal(node) {
  let nodes = [],
  i = 0
  while (node != null) {
    nodes.push(node)
    node = nodes[i++]
    let childrens = node.children
    for (let i = 0;i < childrens.length; i++) {
      nodes.push(childrens[i])
    }
  }
 
  return nodes
}

61.简述下 npm 模块安装机制, 为什么输入 npm install 就可以自动安装对应的模块 ?

npm 模块安装机制:

发出 npm install 命令 1 查询 node_modules 目录之中是否已经存在指定模块

若存在, 不再重新安装

若不存在

npm 向 registry 查询模块压缩包的网址下载压缩包, 存放在根目录下的.npm 目录里

解压压缩包到当前项目的 node_modules 目录

62.简述Virtual DOM 真的比操作原生 DOM 快吗?

// TODO

63.简述什么是webkit ?

Webkit 是浏览器引擎, 包括 html 渲染和 js 解析功能, 手机浏览器的主流内核, 与之相对应的引擎有 Gecko(Mozilla Firefox 等使用)和 Trident(也称 MSHTML, IE 使用)。

对于浏览器的调试工具要熟练使用, 主要是页面结构分析, 后台请求信息查看, js 调试工具使用, 熟练使用这些工具可以快速提高解决问题的效率

64.简述前端 templating(Mustache, underscore, handlebars)的作用, 怎么用?

Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的, Mustache 是一个 logic-less (轻逻辑)模板解析引擎, 它的优势在于可以应用在Javascript、PHP、Python、Perl 等多种编程语言中。

Underscore 封装了常用的 JavaScript 对象操作方法, 用于提高开发效率。

Handlebars 是 JavaScript 一个语义模板库, 通过对 view 和 data 的分离来快速构建Web 模板

65.简述你知道多少种Doctype文档类型?

该标签可声明三种 DTD 类型, 分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML 4.01 规定了三种文档类型: Strict、Transitional 以及 Frameset。 XHTML 1.0 规定了三种 XML 文档类型: Strict、Transitional 以及 Frameset。 Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页, 而 Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页

66.简述什么是同源限制?

同源策略(Sameoriginpolicy), 是一种约定, 它是浏览器最核心也最基本的安全功能

所谓同源(即指在同一个域)具有以下三个相同点

协议相同(protocol)
主机相同(host)
端口相同(port)

前端开发原理 面试题

面试官系列

经典面试题

1.浏览器渲染原理, 回流, 重绘的概念和原理?

2.对WEB标准以及W3C的理解与认识?

3.XHTML和HTML有什么区别?

4.Doctype? 严格模式与混杂模式-如何触发这两种模式?

5.写出几种IE6 BUG的解决方法?

6.标签上title与alt属性的区别是什么?

7.前端页面有哪三层构成, 分别是什么?作用是什么?

8.解释什么是语义化的HTML?

9.Doctype作用? 标准模式与兼容模式各有什么区别?

10.如何实现浏览器内多个标签页之间的通信?

11.Http状态码有那些?

12.常用那几种浏览器测试? 有哪些内核(Layout Engine)?

13.解释什么是盒子模型?

14.前端标准 px和em的区别?

15.XML和JSON的区别?

16.WebWorker和WebSocket的含义解释?

17.简述对前端模块化的认识?

18.简述 Expires和Cache-Control?

19.关于HTTP2.0 的概念和描述 ?

20.简述浏览器Cookie的理解 ?

21.Web Storage和cookie的区别?

22.cookie 和Session 的区别?

23.display: none和visibility: hidden的区别?

24.阐述对前端BFC规范的理解和应用模式?

25.阐述你对语义化的理解?

26.常见前端开发测试兼容性问题?

27.阐述异步加载和延迟加载?

28.简述Promise的构造函数?

29.简述严格模式的限制?

30.阐述网络各种协议?

31.关于Web端iframe有那些缺点?

32.设计中使用了非标准的字体, 该如何处理?

33.XHTML的局限性?

34.为什么利用多个域名来提供网站资源会更有效?

35,解释什么是FOUC(无样式内容闪烁)? 你如何来避免FOUC?

36.简述SVG样式?

37.解释一下你对盒模型的理解, 以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局?

38.阐述一个页面从输入 URL 到页面加载显示完成, 这个过程中都发生了什么过程?

39.简述同步和异步的区别?

40.阐述对AMD和Commonjs的理解 ?

41.WEB应用从服务器主动推送Data到客户端有那些方式?

42.简述Etag概念和应用 ?

43.网站伪静态和静态的区别, 网站为什么要做静态URL?

44.列举IE与 Firefox的不同之处?

45.Web-garden和web-farm有什么不同?

46.JavaScript是怎么样实现继承的?

47.简述JavaScript如何通过new构建对象?

48.简述JavaScript构造函数的特点?

49.用JavaScript写一个实现寄生式继承的方法?

50.面向对象的特性有哪些?

51.简述面向对象编程的三大特点 ?

52.简述方法重载(Overload)与方法重写(Override)的区别?

53.JavaScript如何判断某个对象是否包含指定成员?

54.简述JavaScript this通常指向?

55.JavaScript如何判断属性是自有属性还是原型属性?

56.简述什么是函数柯里化?

57.简述meta作用和解释 ?

58.简述PWA使用过吗? serviceWorker的使用原理是啥?

59.如果一个构造函数, bind了一个对象, 用这个构造函数创建出的实例会继承这个对象的属性吗? 为什么 ?

60.简述深度优先遍历和广度优先遍历, 如何实现?

61.简述下 npm 模块安装机制, 为什么输入 npm install 就可以自动安装对应的模块 ?

62.简述Virtual DOM 真的比操作原生 DOM 快吗?

63.简述什么是webkit ?

64.简述前端 templating(Mustache, underscore, handlebars)的作用, 怎么用?

65.简述你知道多少种Doctype文档类型?

66.简述什么是同源限制?

前端开发原理面试题

23.`display: none`和`visibility: hidden`的区别?