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

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

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

使用Web语义化的好处java

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

HTTP

http是什么

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

http做用

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

HTTP method

get post delete put head OPTIONS TRACEweb

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仍然可以提交文件，查看历史版本记录，建立项目分支

集中式与分布式区别

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