记录一些前端面试题01
-
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集合,是一个类数组,也是动态查询。每次访问该集合都会重新查询。
解决方案:转为数组
- HTML Collection(html搜集器)
- 慎用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仍然能够提交文件,查看历史版本记录,创建项目分支
集中式与分布式区别
集中式:是将项目集中存放在*服务器中,在工作的时候,大家只在自己电脑上操作,从同一个地方下载最新版本,然后开始工作,做完的工作再提交给*服务器保存。这种方式需要联网,现在云开发就是这样的处理方式。
分布式开发:只要提供一台电脑作为版本集中存的服务器放就够了,但这个服务器的作用仅仅是用来方便“交换”大家的修改,没有它也一样干活,只是交换修改不方便而已。而每一台电脑有各自独立的开发环境,不需要联网,本地直接运行,相对集中式安全系数高很多。