前端开发中的基础思考题-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84619467/article/details/139829093

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

ajax的缺点

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

如何解决跨域问题?

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

一级域名相同，只是二级域名不同，浏览器允许通过设置 document.domain 共享 cookie 和 DOM
目前有三种方法，可以解决跨域窗口的通信问题：

onhashchange 事件 + #data 片段标识符
监听子窗口 window.name 属性的变化
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对象。转换方式有一下几种：

var arr = Array.prototype.slice.call(fakeArray);
var arr = […fakeArray];
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用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

线程与进程的区别

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

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

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

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

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

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 的优点和缺点提出了自己的看法？

优点

因为 Node 是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在 Node 上的代理服务器相比其他技术实现的服务器表现要好得多。
与 Node 代理服务器交互的客户端代码是由 Javascript 语言编写的，是同一种语言，这是非常美妙的事情。

缺点

Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
其实前两个已经好多了，现在呢，就是坑比较多。

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

文件合并
文件最小化/文件压缩
使用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 常见状态码

| 状态码 | 状态字 | 描述 |

| — | — | — |

| 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 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

| | 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的置标语言

最主要的不同：

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

语义化的 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 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

新特性

绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

处理兼容问题

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

区分 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。

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

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

平时如何管理你的项目？

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

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如页面模块开始和结束）；
CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
JS 分文件夹存放命名以该JS功能为准的英文翻译。
图片采用整合的 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不存在或格式不正确会导致文档以兼容模式呈现。

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

如何视觉隐藏网页内容？

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

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

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

HTML5 为什么只需要写？

HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

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

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

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
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事件流的区别

执行顺序不一样、
参数不一样
事件加不加on
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 交互式三维动画的两个问题：