Front-End Comprehensive

Front-End Interview Solutions

顶层设计

模块化

JavaScript模块化

为什么要模块化

• 有利于建立一个扩展性强的、相互依赖的代码库；
• 可维护性：根据定义，模块是独立的。一个设计良好的模块意在尽可能减少对代码库的依赖，所以它才能单独地扩展与完善；
• 命名空间：避免污染全局命名空间，无关代码共享全局变量是禁忌；
• 可重用性：模块可以复用。

模块化的价值

• 公共模块通常用于促进代码复用
• 业务模块通常用于提升可维护性

前端模块化如何实现

• 基于JavaScript语法规则，实现类式继承。
• 框架的强制解耦。
• AMD、CMD规范。

如何整合一个模块

• 匿名闭包；
• 全局导入：匿名自执行函数中传入一个全局变量作为参数；
• 对象接口：匿名自执行函数返回一个对象作为接口；
• 暴露模块：显式暴露接口；

本质是使用一个全局变量将其代码封装在一个函数中，从而利用闭包作用域为自身创建一个私有的命名空间。

模块规范

对比

Commonjs

优点：

• 依赖管理成熟可靠；
• 运行时支持，模块定义非常简单；
• 文件级别的模块作用域隔离；
• 可以处理循环依赖；
• 社区活跃，规范接受度高；

缺点：

• 不是标准组织；
• 同步的require，没有考虑浏览器的异步环境（运用browserify支持浏览器环境）；

AMD（Asynchronous Module Definition）

异步模块定义规范，制定了定义模块的规则，这样模块和模块的依赖可以被异步加载；

RequireJS

优点：

• 依赖管理成熟可靠；
• 专为异步IO打造，适合浏览器环境；
• 支持类似Commonjs的书写方式；
• 通过API可支持加载非js资源；
• 成熟的打包构建工具，并可结合插件；
• 社区活跃，规范接受度高；

缺点：

• 模块定义繁琐，需要额外嵌套；
• 只是库级别的支持，需要引入额外库；
• 无法处理循环依赖；
• 无法实现条件加载；

CMD(Common Module Definition)

通用模块定义规范

Sea.js

AMD与CMD的区别

• 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行；
• CMD 推崇依赖就近，AMD 推崇依赖前置；
• AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一；

Require.js的实现原理

1. 把传给define的函数用toString转成字符串
2. 对函数字符串正则匹配require(xxx)，发现依赖项
3. 加载依赖项，并对加载下来的依赖从步骤1执行递归
4. 所有依赖加载并执行完毕后，执行函数体。

描述一下前端开发的工作流程

• 策划提出需求，交互出交互稿，视觉出视觉稿
• 所有角色对需求进行评估，前端修改需求需要和反馈给交互、策划
• 前端和后端根据需求定义同步和异步接口
• 前端内部开发人员进行分工
• 和后端进行接口联调

如何优化网站资源存放

• 配置超长时间的本地缓存 —— 节省带宽，提高性能
• 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
• 静态资源CDN部署 —— 优化网络请求
• 更新资源发布路径实现非覆盖式发布 —— 平滑升级

减少页面加载时间的方法

一个页面从输入 URL 到页面加载完的过程中都发生了什么事情

参考博客1

参考博客2

1. 输入URL；
2. 浏览器通过DNS查询域名对应的IP地址；
3. 浏览器向服务器发送一个HTTP请求；
4. 返回请求表示重定向，定位至新的URL；
5. 服务器响应客户端请求；
6. 服务器返回HTML文本；
7. 浏览器引擎开始解析HTML文件；
8. 浏览器根据HTML中的内容，发起同步请求和异步请求。

前端架构

参考博客

MVC：

MVP：

将 Controller 改名为 Presenter，改变通信方向。

MVVM：

双向绑定（data-binding）：View 的变动，自动反映在 ViewModel，反之亦然

MVVM框架对比

参考博客1
参考博客2

Angular：

• 双向绑定；
• 脏检查循环（digest cycle）；

React：

• 基于 virtual DOM 渲染，在内存中描述 DOM 树的状态，数据绑定到 virtual DOM 中；
• 趋势是将所有东西都放在 JavaScript 中，包括 HTML 和 CSS；

Vue：

• 支持双向绑定，默认单向绑定，数据绑定到真实的 DOM 节点；
• 利用 ES5 的 Object.defineProperty，定义对象的访问器属性，实现数据更新同步到视图；

模板渲染

前端模板渲染：jst，异步

• 后端只关心数据，减少后台计算量
• 前台易于测试
• 前后端耦合度低

后端模板渲染：freemarker，同步

• 减少HTTP请求
• 不暴露一些敏感数据给前端
• 易于SEO
• 功能更强大

网络通信

HTTP状态码

• 1XX，请求正在处理
• 2XX，成功
• 3XX，重定向
• 4XX，客户端错误
• 5XX，服务器错误

两种HTTP请求

参考资料

GET-从指定的资源请求数据：

• 查询字符串在 URL 中发送
• GET 请求可被缓存
• GET 请求保留在浏览器历史记录中
• GET 请求可被收藏为书签
• GET 请求不应在处理敏感数据时使用
• GET 请求有长度限制（URL 的最大长度是 2048 个字符）
• GET 请求只应当用于取回数据

POST-向指定的资源提交要被处理的数据：

• 查询字符串在 HTTP 主体中发送
• POST 请求不会被缓存
• POST 请求不会保留在浏览器历史记录中
• POST 不能被收藏为书签
• POST 请求对数据长度没有要求

DNS解析方式

递归解析。

迭代解析。

如何设置浏览器缓存

参考自《Web缓存》

页面的缓存状态由HTTP头部决定，参数有四种，如下：

• Cache-Control：max-age, s-maxage, min-fresh, no-cache, no-store, private, public。通用首部字段。

• Expires：缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。实体首部字段。

• Last-modified：服务器端文件的最后修改时间，需要和cache-control共同使用，是检查服务器端资源是否更新的一种方式。实体首部字段。

• ETag：根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生。响应首部字段。

Web缓存：数据库缓存、代理服务器缓存、CDN缓存、浏览器缓存。

TCP、HTTP、WebSocket、Socket.IO

TCP：传输层通信协议；

HTTP：应用层通信协议，应用广泛；

WebSocket：在TCP基础上实现的通信协议，与HTTP同属应用层，提供了一种全双工的通信方式，适用于对实时性要求高的场合，实现了服务端向客户端推送的功能；

Socket.IO：一个面向实时Web应用的JavaScript库，可在服务端和客户端运行。支持WebSocket协议，也可回退到Adobe Flash Sockets，JSONP拉取，Ajax长轮询。

WebSocket如何兼容低浏览器

• Adobe Flash Socket 、
• ActiveX HTMLFile (IE) 、
• 基于 multipart 编码发送 XHR 、
• 基于长轮询的 XHR

前端解决方案

单页Web应用如何SEO

搜索引擎无法识别JavaScript，通过Server生成一静态页面供搜索引擎抓取。

谈谈以前端角度出发做好SEO需要考虑什么

• 了解搜索引擎如何抓取网页和如何索引网页
  需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

• Meta标签优化
  主要包括主题（Title），网站描述（Description），和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

• 如何选取关键词并在网页中放置关键词
  搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

• 了解主要的搜索引擎
  虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

• 主要的互联网目录
  Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

• 按点击付费的搜索引擎
  搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

• 搜索引擎登录
  网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

• 链接交换和链接广泛度（Link Popularity）
  网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（冲浪）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

• 合理的标签使用
  语义化。

Ajax多任务同时调度解决方案

冷门知识点

浏览器对同一个域名的并发请求数量

一般是 6 个，可同时向一个域名发起 6 个请求。

浏览器一次最多能从一个给定域下载多少资源

页面的可用性和可访问性