记录一些前端面试题（带答案）

Posted on 2017-02-06 19:49 Mr豆花阅读(27) 评论(0) 编辑收藏

img的title和alt有什么区别
title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
alt是img的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
doctype是什么,举例常见doctype及特点
我们通常称doctype为doctype声明，doctype是document type(文档类型)的简写，用来说明我们的HTML或者XHTML是什么版本，它告诉浏览器应该用兼容模式还是使用标准模式来渲染文档。
在HTML4.01中声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容
常见dotype：
HTML4.01 strict
HTML 5:
HTML全局属性
class
id
style
title
contextmenu
draggable
tabIndex
hidden
什么Web是语义化？有什么好处
Web语义化包含两部分：HTML标签的语义化与CSS命名语义化
HTML标签语义化指使用具有一定语义的标签来恰当的表示文档结构
CSS命名语义化表示为HTML标签添加有意义的class与id

使用Web语义化的好处

样式去掉后页面结构清晰
利于盲人阅读
利于搜索引擎理解页面，有利于收录
利于后期维护

HTTP

http是什么

是超文本传输协议，是互联网上应用最为广泛的一种网络协议。

http作用

浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。

HTTP method

get post delete put head OPTIONS TRACE

get：GET是最常用的方法，通常用于请求服务器发送某个资源。
post：向指定的资源提交要被处理的数据。实际上，通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。
delete：DELETE请求服务器删除请求URL指定的资源

get与post的区别

get

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

post
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

性能优化

页面级优化

减少hHTTP请求
将页面设计简单
合理利用HTTP缓存
静态资源进行合并与压缩
CSS Sprites
Lasy Load
将外部脚本置于底部
按需加载javascript
将CSS放在HEAD中
防止浏览器还没有下载CSS就开始渲染页面了，导致页面出现五CSS到有CSS的跳转。
避免重复资源的请求

代码级优化

编写高质量代码，注意代码质量
减少DOM操作
- HTML Collection（html搜集器）
  document.images,document.froms,document.getElementsByTagName()返回的都是html collection集合，是一个类数组，也是动态查询。每次访问该集合都会重新查询。
  解决方案：转为数组
慎用with语句
with会延长作用于链
避免使用eval和Function，脚本引擎每次都需要将里面的源代码转为可执行代码，非常耗时，比简单的函数调用慢100倍。
减少作用域链查找
- 把全局变量改为局部变量
字符串拼接
+比数据的join方法效率低
CSS选择符
CSS选择符是从右向左开始解析的。

Web综合

什么是W3C标准
W3C而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：

前端需要注意哪些SEO

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

grunt glup webpack区别

Gulp/Grunt是一个构建工具，可以配合各种插件做js压缩，css压缩，less编译替代手工实现自动化工作
webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案

seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。
browserify / webpack : 是一个预编译模块的方案，相比于上面，这个方案更加智能。这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。

common AMD CDM ES6

　commonjs是用在服务器端的，同步的，NodeJS是这种规范的实现
根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。
Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式

AMD是异步加载模块，是用在浏览器端的，异步的，requirejs采用的是AMD
AMD规范适用define方法定义模块。

//通过数组引入依赖 ，回调函数通过形参传入依赖 
define(['someModule1', ‘someModule2’], function (someModule1, someModule2) { 
    function foo () { 
        // someing 
        someModule1.test(); 
    } 
    return {foo: foo} 
}); 
// AMD规范允许输出模块兼容CommonJS规范，这时define方法如下： 
define(function (require, exports, module) { 
    var reqModule = require("./someModule"); 
    requModule.test();  
    exports.asplode = function () { 
        //someing 
    } 
});

CMD是通用模块定义，是用在浏览器端的，异步的，seajs采用的CMD

CMD和AMD的区别:CMD相当于按需加载，定义一个模块的时候不需要立即制定依赖模块，在需要的时候require就可以了，比较方便；而AMD则相反，定义模块的时候需要制定依赖模块，并以形参的方式引入factory中。

requireJS与seaJS

联系

RequireJS 和 Sea.js 都是模块加载器，倡导模块化开发理念，核心价值是让 JavaScript 的模块化开发变得简单自然。

区别

定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。
遵循的规范不同。RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
推广理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。Sea.js 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。
对开发调试的支持有差异。Sea.js 非常关注代码的开发调试，有 nocache、debug 等用于调试的插件。RequireJS 无这方面的明显支持。
插件机制不同。RequireJS 采取的是在源码中预留接口的形式，插件类型比较单一。Sea.js 采取的是通用事件机制，插件类型更丰富。

MV*

MVC

MVC的意思是软件可以分为三部分

视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存

View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

互动模式有两种

一种是通过 View 接受指令，传递给 Controller。
另一种是直接通过controller接受指令。

MVP

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

各部分之间的通信，都是双向的。
View 与 Model 不发生联系，都通过 Presenter 传递。
View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel

git svn

Git是分布式的，SVN是集中式的
SVN 是集中式的，会出现耦合。但从另外一个方面来说，这也要求开发人员代码的规范：不要一个函数干很多事情，不要一个文件写很多个类。
git仍然能够提交文件，查看历史版本记录，创建项目分支

集中式与分布式区别

集中式：是将项目集中存放在中央服务器中，在工作的时候，大家只在自己电脑上操作，从同一个地方下载最新版本，然后开始工作，做完的工作再提交给中央服务器保存。这种方式需要联网，现在云开发就是这样的处理方式。
分布式开发：只要提供一台电脑作为版本集中存的服务器放就够了，但这个服务器的作用仅仅是用来方便“交换”大家的修改，没有它也一样干活，只是交换修改不方便而已。而每一台电脑有各自独立的开发环境，不需要联网，本地直接运行，相对集中式安全系数高很多。