前端开发中的基础思考题

2024年5月10日 124次阅读 来源: Faremax

前些日子在忙着面试，拿了心仪的 offer 以后闲下来整理了一些面试相关的基本概念。由于很多关于代码细节的东西之前的博客都有更详细的解释，所以本文涉及代码细节比较少，主要是面试相关的概念，也是前端比较零碎的一些知识。
以下内容包括我面试过程遇到的以及有些仅复习时遇到的内容，有不对的地方欢迎指正。

什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

简述同步和异步的区别

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

怎样添加、移除、移动、复制、创建和查找节点？

  • 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
  • 添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
  • 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

一次完整的HTTP事务是怎样的一个过程？

  1. 域名解析
  2. 发起TCP的3次握手
  3. 建立TCP连接后发起http请求
  4. 服务器端响应http请求，浏览器得到html代码
  5. 浏览器解析html代码，并请求html代码中的资源
  6. 浏览器对页面进行渲染呈现给用户

你所了解到的Web攻击技术，如何防止被攻击？

攻击：

  • XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
  • SQL 注入攻击：通过表单提交可运行的 sql 语句，以破坏数据库数据。
  • CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
  • dDos 拒绝服务攻击：通过大量请求疯狂占用服务器资源至其瘫痪。
  • CDN 攻击：使用不合理数据发起请求或请求不合理接口。
  • 身份伪造：冒充服务器或用户获取从另一方获取信息。

防御：

  • XSS:
  1. 输入验证，过滤标签、事件、脚本、SQL
  2. http头： X-XSS-Protection
  3. cookie保护：set-cookie 头加入 http-only
  • SQL 注入
  1. 输入验证，过滤标签、事件、脚本、SQL
  2. 数据库权限最小化
  3. 使用接口而非 SQL 语句
  4. 限制文件上传类型
  • CSRF
  1. 验证码
  2. 验证 http 头 referer 项
  3. 在 http 中加入 taken
  • 身份伪造
  1. 隐藏敏感信息
  2. 加密
  3. session 定期失效
  4. 权限验证、中间件校验
  5. 数字签名
  6. CA 证书校验
  • dDos 拒绝服务攻击
  1. 流量防火墙
  2. 验证码
  • CDN 攻击
  1. 对版本控制进行Hash验证
  2. 跳转验证（重定向验证）

ajax是什么?ajax的交互模型?

ajax 是异步 javascript
readyState属性状态有5个可取值： 0=未初始化，1=启动 2=发送，3=接收，4=完成

Ajax的特点

  1. 通过异步模式，提升了用户体验
  2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
  3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
  4. Ajax优点是通过异步通信实现局部刷新

ajax的缺点

  1. ajax不支持浏览器back按钮。
  2. 安全问题 AJAX暴露了与服务器交互的细节。
  3. 对搜索引擎的支持比较弱。
  4. 破坏了程序的异常机制。
  5. 不容易调试。

如何解决跨域问题?

有三种行为受到限制：1. Cookie、LocalStorage和IndexDB无法获取；2. DOM无法获得。3. AJAX请求不能发送。

  • 一级域名相同，只是二级域名不同，浏览器允许通过设置 document.domain 共享 cookie 和 DOM
  • 目前有三种方法，可以解决跨域窗口的通信问题：
  1. onhashchange 事件 + #data 片段标识符
  2. 监听子窗口 window.name 属性的变化
  3. window.postMessage(data, url), html5 新接口，监听 onmessage 事件

其他方法：代理服务器，JSONP，WebSocket(http origin头)，CORS(Access-Control-Allow-Origin)

什么叫优雅降级和渐进增强？

渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级(graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

  • 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
  • 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
  • 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

前端网页制作怎么克服不同分辨率的问题？

根据屏幕不同大小，缩小窗口出横向滚动条在所难免，但理想情况下，页面应该能适应不同客户端浏览器和分辨率。实际操作通常又有三种情况：版面自适应、视觉自适应、内容自适应。

严格模式特点

  • 添加了保留字 protectedstatic 和 interface
  • 在严格模式下不可以用with
  • 在严格模式下变量必须显示声明varletconst
  • 在严格模式下this默认是undefined
  • 在严格模式下为只读变量和不可扩展对象赋值会报错 而不是静默失败
  • 在严格模式下不可以在eval参数中定义变量和函数
  • 在严格模式下有名参数是arguments参数的静态副本而非引用
  • 在严格模式下用delete删除var声明的变量和不可配置属性时抛出异常而不是静默失败返回false
  • 在严格模式下arguments和eval是关键字不能被修改
  • 在严格模式下不可以用8进制
  • 在严格模式下函数的形参不可以同名
  • 在严格模式下不可以使用caller和arguments的属性会报错

在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。它们的本质是对象，其 key 为数字，而存在一个 key 为 ‘length’ 的属性表示其长度。典型的是函数的argument参数、NodeList对象。转换方式有一下几种：

  1. var arr = Array.prototype.slice.call(fakeArray);
  2. var arr = […fakeArray];
  3. var arr = Array.from(fakeArray);

浏览器本地存储

在较高版本的浏览器中，js 提供了 sessionStorage 和 globalStorage。在HTML5中提供了 localStorage 来取代 globalStorage。html5中的Web Storage包括了两种存储方式：sessionStorage 和 localStorage。

  • cookie 在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
  • cookie 存储空间很有限(50个 or 4kB)，sessionStorage和localStorage的存储空间更大(5M)；
  • sessionStorage和localStorage有更多丰富易用的接口；
  • sessionStorage和localStorage各自独立的存储空间；
  • sessionStorage 活到会话结束，而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

线程与进程的区别

首先我们需要理解：进程是系统资源分配的最小单位，而线程是程序代码执行的最小单位

一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。

请说出三种减少页面加载时间的方法。

  1. 压缩js html css和图片，使用 gzip 编码传输，减少传输时间
  2. 选择合适的图片格式，合理利用缓存，减少传输时间
  3. 合并 js css 及 图片(精灵图)，减少请求数量
  4. 避免不必要的 repaint 和 reflow, 合理使用 GPU 加速渲染
  5. 避免不必要的重定向，使用长连接，优化网络结构
  6. 使用 CDN 减短数据传输路径
  7. 优化服务器，快速响应与负载均衡

null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。当声明的变量还未被初始化时，变量的默认值为undefined。

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

  • 变量被声明了，但没有赋值时，就等于undefined。
  • 调用函数时，应该提供的参数没有提供，该参数等于undefined。
  • 对象没有赋值的属性，该属性的值为undefined。
  • 函数没有返回值时，默认返回undefined。

null表示”没有对象”，即该处不应该有值。典型用法是：

  • 作为函数的参数，表示该函数的参数不是对象。
  • 作为对象原型链的终点。

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

1.创建一个空对象，并将this绑定在该对象；
2.该对象继承构造函数的原型；
3.执行构造函数；
4.如果构造函数返回对象类型，则返回该对象，否则返回第一步新建的对象 this

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

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在，无意义的占用内存。

会导致内存泄露的事情：

  • 绑定事件的元素是不能在remove时被清理的，应该在remove之前取消事件绑定。不过更好的办法是用事件委托的方式绑定事件。
  • 意外的全局变量，会使得实际函数结束就应该释放的内存保留下来，造成资源浪费，包括以下两种情况：
  • 定时器中的变量定义，会在每次执行函数的时候重复定义变量，产生严重的内存泄漏。
  • 如果闭包的作用域链中保存着一个DOM对象或者ActiveX对象，那么就意味着该元素将无法被销毁:
  • 通过createElement，createTextNode等方法创建的元素会在写入DOM后被释放
  • 循环引用导致引用计数永远不为0，内存无法释放：

对 Node 的优点和缺点提出了自己的看法？

  • 优点
  1. 因为 Node 是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
  2. 因此构建在 Node 上的代理服务器相比其他技术实现的服务器表现要好得多。
  3. 与 Node 代理服务器交互的客户端代码是由 Javascript 语言编写的，是同一种语言，这是非常美妙的事情。
  • 缺点
  1. Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
  2. 而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
  3. 其实前两个已经好多了，现在呢，就是坑比较多。

你如何对网站的文件和资源进行优化?

  • 文件合并
  • 文件最小化/文件压缩
  • 使用CDN托管
  • 缓存的使用

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

简单来说，分为4个步骤：

  • 当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
  • 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
  • 一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
  • 此时，Web服务器提供资源服务，客户端开始下载资源。而后由浏览器完成页面渲染

HTTP 常见状态码

状态码状态字描述
100Continue继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200OK正常返回信息
201Created请求成功并且服务器创建了新的资源
202Accepted服务器已接受请求，但尚未处理
301Moved Permanently请求的网页已永久移动到新位置。
302Found临时性重定向。
303See Other临时性重定向，且总是使用 GET 请求新的 URI。
304Not Modified自从上次请求后，请求的网页未修改过。
400Bad Request服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401Unauthorized请求未授权。
403Forbidden禁止访问。
404Not Found找不到如何与 URI 相匹配的资源。
500Internal Server Error最常见的服务器端错误。
503Service Unavailable服务器端暂时无法处理请求（可能是过载或维护）。

请解释一下 JavaScript 的同源策略。

同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。

GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符(不同浏览器有差异，保证可用性，以最小的为主)
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

GET 方式需要使用 Request.QueryString 来取得变量的值，而 POST 方式通过 Request.Form 来获取变量的值，也就是说 Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。
—GETPOST
后退/刷新无害数据会重新提交
书签可藏为书签无法藏为书签
缓存可以缓存不可以缓存
MIME类型application/x-www-from-urlencodeapplication/x-www-from-urlencode或 multipart/form-data (二进制为多重编码
历史记录参数保留在历史记录中参数不会留在历史记录
数据长度URL最长2048个字符(2kB)无限
数据类型ASCII字符无限
安全性差较
可见性数据可见数据不可见

XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

语义化的 HTML 的好处?

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

常见的浏览器内核有哪些？

Browser内核JS 引擎
SafariWebkitNitro
ChromeBlinkV8
IETridentChakra
AndroidWebkit
iOSWebkit
EdgeWebkit
OperaPresto(<12.16), Webkit(>12.16)Carakan(>=10.50)
FirefoxGeckoOdinMonkey(>=22.0)

HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？

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

  1. 新特性
  • 绘画 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更好的内容元素，比如 article、footer、header、nav、section
  • 表单控件，calendar、date、time、email、url、search
  • 新的技术webworker, websockt, Geolocation
  1. 移除的元素
  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
  • 对可用性产生负面影响的元素：frame，frameset，noframes；
  1. 处理兼容问题

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。

  1. 区分 HTML 和 HTML5

中本质出发，HTML5 既然不是 SGML 的子集，其文档类型声明简单：<!DOCTYPE html>，而 HTML4.01及以下，需要引入 dtd 文件。

在你的日常开发中遇到过哪些常用布局是无法用纯 CSS 实现的？

  • 最大行数
  • 更好用的 Flex
  • 元素查询（Element Queries）
  • CSS 分页滚动
  • 非矩形布局
  • 流式 Grid 布局

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

  • cookie 在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
  • cookie 存储空间很有限
  • sessionStorage和localStorage的存储空间更大；
  • sessionStorage和localStorage有更多丰富易用的接口；
  • sessionStorage和localStorage各自独立的存储空间；

谈谈This对象的理解。

  • this 是 js 的一个关键字，随着函数使用场合不同，this 的值会发生变化。
  • this 默认指的是调用函数的那个对象，如果没有明确指出这个调用对象，就指向全局对象。
  • this 一般情况下：是全局对象 global。 作为方法调用，那么this就是指这个对象。
  • 函数的 this 可以使用 bind 改变，也可以通过 call, apply 改变调用时的 this 值。
  • 核心点：this 指向谁是函数调用时决定的，而不是函数定义时决定的。

谈一谈JavaScript作用域链

当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。

作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

如何理解JavaScript原型链

JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。

原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined。

对前端工程师这个职位你是怎么样理解的？

  1. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
  2. 参与项目，快速高质量完成实现效果图，精确到1px；
  3. 与团队成员，UI设计，产品经理的沟通；
  4. 做好的页面结构，页面重构和用户体验；
  5. 处理hack，兼容、写出优美的代码格式；
  6. 针对服务器的优化、拥抱最新前端技术。

平时如何管理你的项目？

先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

  1. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
  2. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
  3. 页面进行标注（例如 页面 模块 开始和结束）；
  4. CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
  5. JS 分文件夹存放 命名以该JS功能为准的英文翻译。
  6. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

JavaScript如何实现继承？

构造继承(call apply)
原型继承(共享)
实例继承(先生成一个实例)
拷贝继承(深拷贝)

清除浮动有哪些方式？比较好的方式是哪一种？

  • 父级div定义height。
  • 结尾处加空div标签clear:both。
  • 父级div定义伪类:after和zoom。
  • 父级div定义overflow:hidden。
  • 父级div定义overflow:auto。
  • 父级div也浮动，需要定义宽度。
  • 父级div定义display:table。
  • 结尾处加br标签clear:both。

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

box-sizing常用的属性有哪些？分别有什么作用？

(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

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

<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

如何视觉隐藏网页内容？

  1. display:none; 的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。
  2. visibility:hidden; 的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间
  3. overflow:hidden; 一个比较合理的方法
  4. height:0;width:0;
  5. 通过 position 把元素定位到可视区域以外

你觉得WebAssembly为什么比asm.js快？

WebAssembly 是为 Web 而设计的、可以生成浏览器可执行的二进制文件的编程语言。并且于2017 年 2 月 28 日，四个主要的浏览器一致同意宣布 WebAssembly 的 MVP 版本已经完成，即将推出一个浏览器可以搭载的稳定版本。WebAssembly 的一个主要目标就是变快。当然，“快”是相对的概念。相比于 JavaScript 和其他动态语言，WebAssembly 的快主要是因为它的静态类型特性和方便优化特性。WebAssembly 意在速度上能够达到和本地执行一样快，其实 asm.js 已经比较接近这一目标了，但是 WebAssembly 要进一步缩短和本地执行速度之间的差距。

HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

页面导入样式时，使用link和@import有什么区别？

  1. link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
  2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
  3. import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

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

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

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

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

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

iframe 有哪些缺点

  • iframe会阻塞主页面的 Onload 事件；
  • 搜索引擎的检索程序无法解读这种页面，不利于 SEO;
  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

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

IE和DOM事件流的区别

  1. 执行顺序不一样、
  2. 参数不一样
  3. 事件加不加on
  4. this指向问题

说说你对 SVG 理解?

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。 SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 除了 IE8 及更早的浏览器都支持该特性。SVG 具有以下特点：

  • 任意放缩

用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。

  • 文本独立

SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。

  • 较小文件

总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。

  • 超强显示效果

SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。

  • 超级颜色控制

SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。

  • 交互 X 和智能化。

SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量  图形格式 Flash 竞争的问题，另一个问题就是 SVG 的本地运行环境下的厂家支持程度。

说说你对 webGL 的理解

WebGL（Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL 结合在一起，通过增加 OpenGL 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。

WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：

  1. 它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;
  2. 第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

TDD 和 BDD 是什么？

TDD（测试驱动开发）即先写测试用例，再一一实现功能
BDD（行为驱动开发）先写功能，再对功能进行测试，更贴近人类思维方式

闭包是什么，可以用来做什么？闭包有什么好处？使用闭包需要注意什么？

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

可以用来保护局部变量、用作命名空间、定义模块。

构成闭包需要以下几个必要条件：

  • 函数(作用域)嵌套函数
  • 函数(作用域)内部可以引用外部的参数和变量
  • 参数和变量不会被垃圾回收机制回收。

闭包的好处

  • 希望一个变量长期驻扎在内存中
  • 避免全局变量的污染
  • 私有成员的存在

使用闭包需要注意以下几点

  • 闭包常驻内存，会增大内存使用量，大量使用影响程序性能。
  • 使用不当很容易造成内存泄露。因为一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存全局作用域。但闭包不会！

http 和 https 有什么区别？

HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全
https 在 URL 前加 https:// 前缀表明是用SSL加密的。Web 服务器启用 SSL 需要获得一个服务器证书并将该证书与要使用 SSL 的服务器绑定。
http 和 https 使用的是完全不同的连接方式,用的端口也不一样,前者是 80,后者是 443。http 的连接很简单，是无状态的,…

怎么判断一个对象是不是数组，尽可能多的说出你知道的方法？

  1. Array.isArray(obj);
  2. obj instanceof Array;
  3. obj.constructor === Array;

js 中有哪些常见的错误

js 有以下6种错误，都继承自 Error :

  • SyntaxError: SyntaxError是解析代码时发生的语法错误
  • ReferenceError: ReferenceError是引用一个不存在的变量时发生的错误。将一个值分配给无法分配的对象，比如对函数的运行结果或者this赋值。
  • RangeError: RangeError是当一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。
  • TypeError: TypeError是变量或参数不是预期类型时发生的错误。比如，使用new字符串、布尔值、数值等原始类型和调用对象不存在的方法就会抛出这种错误，因为new命令的参数应该是一个构造函数。
  • URIError: URI相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。
  • EvalError: eval()函数执行错误

那些地方会出现 CSS 阻塞，哪些地方会出现 js 阻塞？

  • JS阻塞

所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。这是由于浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。

  • CSS阻塞

CSS本来是可以并行下载的(IE6除外)，但当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和 important 哪个优先级高？

css 选择器主要分为：id 选择器(#)，class 选择器(.)，元素选择器(a)，子元素选择器(>)，兄弟选择器(~)，属性选择器([])，后代选择器( )，伪类选择器(:)，相邻选择器(+)，并列选择器(,)，通配符(*)

优先级计算： important(权无穷) > id选择器(权1000) > class选择器(权100) > 元素选择器(权10) important > 行内样式 > 内联样式 > 外部样式 > 浏览器样式

谈谈垃圾回收机制方式和内存管理

垃圾回收(Garbage Collection)，简称GC。简单来讲，GC就是把内存中不需要的数据释放了，这样这部分内存就可以存放其他东西了。在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。具体回收策略包括以下3种：

  • 标记回收

当从window节点遍历DOM树不能遍历到某个对象，那么这个对象就会被标记为没用的对象。由于回收机制是周期性执行的，这样，当下一个回收周期到来时，这个对象对应的内存就会被释放。

  • 引用计数

当系统中定义了一个对象后，对于这一块内存，javascript会记录有多少个引用指向个部分内存，如果这个数为零，则这部分内存会在下一个回收周期被释放。

  • 手动释放

就好比上一个例子中，利用delete关键字删除变量或属性，达到释放内存的目的。分一下几种情况：

//释放一个对象
obj = null;

//释放是个对象属性
delete obj.propertyName;
delete globalVariable;  //没有用var声明的变量是window的属性，用delete释放。

//释放数组
array.length = 0;

//释放数组元素
array.splice(2,2);  //删除并释放第三个元素起的2个元素
    原文作者：Faremax
    原文地址: https://segmentfault.com/a/1190000016330980
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞