前端笔记

前端开发中的基础思考题

2017-10-02  本文已影响32人  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攻击技术，如何防止被攻击？

攻击：

防御：

  1. 输入验证，过滤标签、事件、脚本、SQL
  2. http头： X-XSS-Protection
  3. cookie保护：set-cookie 头加入 http-only
  1. 输入验证，过滤标签、事件、脚本、SQL
  2. 数据库权限最小化
  3. 使用接口而非 SQL 语句
  4. 限制文件上传类型
  1. 验证码
  2. 验证 http 头 referer 项
  3. 在 http 中加入 taken
  1. 隐藏敏感信息
  2. 加密
  3. session 定期失效
  4. 权限验证、中间件校验
  5. 数字签名
  6. CA 证书校验
  1. 流量防火墙
  2. 验证码
  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请求不能发送。

  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): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

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

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

严格模式特点

在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。

线程与进程的区别

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

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

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

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

  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表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

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

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

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

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

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

会导致内存泄露的事情：

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

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

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

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

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

HTTP 常见状态码

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

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

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

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

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

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

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

--- GET POST
后退/刷新 无害 数据会重新提交
书签 可藏为书签 无法藏为书签
缓存 可以缓存 不可以缓存
MIME类型 application/x-www-from-urlencode application/x-www-from-urlencode或 multipart/form-data (二进制为多重编码
历史记录 参数保留在历史记录中 参数不会留在历史记录
数据长度 URL最长2048个字符(2kB) 无限
数据类型 ASCII字符 无限
安全性 差 较
可见性 数据可见 数据不可见

XHTML和HTML有什么区别

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

最主要的不同：

语义化的 HTML 的好处?

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

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

Browser 内核 JS 引擎
Safari Webkit Nitro
Chrome Blink V8
IE Trident Chakra
Android Webkit
iOS Webkit
Edge Webkit
Opera Presto(<12.16), Webkit(>12.16) Carakan(>=10.50)
Firefox Gecko OdinMonkey(>=22.0)

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

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

  1. 新特性
  1. 移除的元素
  1. 处理兼容问题
    IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。
  2. 区分 HTML 和 HTML5
    中本质出发，HTML5 既然不是 SGML 的子集，其文档类型声明简单：<!DOCTYPE html>，而 HTML4.01及以下，需要引入 dtd 文件。

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

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

谈谈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)
原型继承(共享)
实例继承(先生成一个实例)
拷贝继承(深拷贝)

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

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

IE和DOM事件流的区别

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

说说你对 SVG 理解?

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

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

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

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

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

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

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

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

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

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

//释放数组元素
array.splice(2,2);  //删除并释放第三个元素起的2个元素
上一篇下一篇

猜你喜欢

热点阅读