面试集锦

请谈一下你对网页标准和标准制定机构重要性的理解。

	网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，最终提高网站易用性。

知道的网页制作会用到的图片格式有哪些？

	png-8，png-24，jpeg，gif，svg。
	但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。（是否有关注新技术，新鲜事	物）

	科普一下 Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。
	在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？

	答案：dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化

	图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载
	如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
	如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
	如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户验。
	如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

为什么要初始化样式？

	用于浏览器默认 css 样式的存在并且不同浏览器对相同 HTML 标签的默认样式不同，若不初始化会造成不同浏览器之间的显示差异。

Doctype 的作用？严格模式与混杂模式的区别？

	<!DOCTYPE>,文档声明；用于告知浏览器该以何种模式来渲染文档
	严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行
	混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

html 常见兼容性问题？

	1.双边距 BUG float 引起的 使用 display
	2.3 像素问题 使用 float 引起的 使用 dislpay:inline -3px
	3.超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active
	4.IE z-index 问题 给父级添加 position:relative
	5.Png 透明 使用 js 代码 改
	6.Min-height 最小高度 ！Important 解决’
	7.select 在 ie6 下遮盖 使用 iframe 嵌套
	8.为什么没有办法定义 1px 左右的宽度容器（IE6 默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
	9.IE5-8 不支持 opacity，解决办法：
		.opacity {
			opacity: 0.4
			filter: alpha(opacity=60); /* for IE5-7 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
			/* for IE8*/
		}
	10. IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片

CSS 中 link 和@import 的区别是：

	Link 属于 html 标签，而@import 是 CSS 中提供的
	@import 有执行效率问题，它会打破浏览器并行加载资源，导致加载页面速度变慢。尽量不要使用@import

Sass、LESS 是什么？大家为什么要使用他们？

	他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
	例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
	为什么要使用它们？
	结构清晰，便于扩展。
	可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
	可以轻松实现多重继承。
	完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS代码也可以与 LESS 代码一同编译。

有那些行内元素、有哪些块级元素？

	1.内联元素(inline element
		a – 锚点
		abbr – 缩写
		acronym – 首字
		b – 粗体(不推荐)
		big – 大字体
		br – 换行
		em – 强调
		font – 字体设定(不推荐) i – 斜体
		img – 图片
		input – 输入框
		label – 表格标签
		s – 中划线(不推荐)
		select – 项目选择
		small – 小字体文本
		span – 常用内联容器，定义文本内区块
		strike – 中划线
		strong – 粗体强调
		sub – 下标
		sup – 上标
		textarea – 多行文本输入框
		tt – 电传文本u – 下划线
		var – 定义变量
	2、块级元素
		address – 地址
		blockquote – 块引用
		center – 举中对齐块
		dir – 目录列表
		div – 常用块级容易，也是 css layout 的主要标签
		dl – 定义列表
		fieldset – form 控制组
		form – 交互表单
		h1 – 大标题
		h2 – 副标题
		h3 – 3 级标题
		h4 – 4 级标题
		h5 – 5 级标题
		h6 – 6 级标题
		hr – 水平分隔线
		isindex – input prompt
		menu – 菜单列表
		noframes – frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容）
		noscript – ）可选脚本内容（对于不支持 script 的浏览器显示此内容
		ol – 排序表单
		p – 段落
		pre – 格式化文本
		table – 表格
		ul – 非排序列表

你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品 字布局 如何设计?

	* 首先划分成头部、body、脚部；。。。。。
	* 实现效果图是最基本的工作，精确到 2px；
	与设计师，产品经理的沟通和项目的参与
	做好的页面结构，页面重构和用户体验
	 处理 hack，兼容、写出优美的代码格式
	 针对服务器的优化、拥抱 HTML5。

如何在 HTML5 页面中嵌入音频?

	HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
	<audio controls>
		<source src="jamshed.mp3" type="audio/mpeg">
			Your browser does'nt support audio embedding feature.
	</audio>

如何在 HTML5 页面中嵌入视频？

	和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：
	<video width="450" height="340" controls>
		<source src="jamshed.mp4" type="video/mp4">
			Your browser does'nt support video embedding feature.
	</video>

cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 区别

	sessionStorage 和 localStorage 的存储空间更大；
	sessionStorage 和 localStorage 有更多丰富易用的接口；
	sessionStorage 和 localStorage 各自独立的存储空间；

JS

1.例举 3 种强制类型转换和 2 种隐式类型转换?

	强制（parseInt(),parseFloat(),Number()）
	隐式（== ,!!）

2.split() 、join() 的区别

	前者是切割成数组的形式，后者是将数组转换成字符串

3.数组方法 pop() push() unshift() shift()

	push()尾部添加 pop()尾部删除
	unshift()头部添加 shift()头部删除
	map() : 遍历数组中的元素, 返回一个新数组(包含回调函数返回的数据)
	filter():遍历数组中的元素, 返回一个新数组(包含回调函数返回 true 的元素

4.事件绑定和普通事件有什么区别

	普通添加事件的方法：
	var btn = document.getElementById("hello");
	btn.onclick = function(){
		alert(1);
	}
	btn.onclick = function(){
		alert(2);
	}
	执行上面的代码只会 alert 2
	事件绑定方式添加事件：
	var btn = document.getElementById("hello");
	btn.addEventListener("click",function(){
		alert(1);
	},false);
	btn.addEventListener("click",function(){
		alert(2);
	},false);
	执行上面的代码会先 alert 1 再 alert 2
	普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）
	方式添加事件可以添加多个。
	addEventListener 不兼容低版本 IE
	普通事件无法取消
	addEventLisntener 还支持事件冒泡+事件捕获

5.IE 和 DOM 事件流的区别

	1.执行顺序不一样、
	2.参数不一样
	3.事件加不加 on
	4.this 指向问题

IE 和标准下有哪些兼容性的写法

	var ev = ev || window.event
	document.documentElement.clientWidth || document.body.clientWidth
	var target = ev.srcElement||ev.target

6.call 和 apply 的区别

	功能一样, 都是将当前函数作为指定对象的方法执行, 即函数中的 this 是指定对象
	call(thisObj，arg1,arg2...) //将所有参数一个一个传递进去
	apply(thisObj，[argArray]) //将所有参数放在数组中传入

7.Worker 继承 Person 的方法

	//使用构造函数+原型的组合模式
	function Person( age, name ){
		this.age = age;
		this.name = name;
	}
	Person.prototype.show = function(){
		alert('父级方法');
	}
	function Worker(age,name,job){
		Person.apply( this, arguments);
		this.job = job;
	}
	Worker.prototype = new Person();
	var Person = new Person(14,'张三 ');
	var Worker = new Worker (25,'李四','程序员');

8.如何阻止事件冒泡和事件默认行为

	//阻止事件冒泡
	if(typeof ev.stopPropagation=='function') { //标准的
		ev.stopPropagation();
	} else { //非标准 IE
		window.event.cancelBubble = true;
	}
	//阻止事件默认行为
	return false

9.JavaScript 是一门什么样的语言，它有哪些特点？

	javaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。JavaScript 兼容于 ECMA 标准，因此也称为 ECMAScript。
	基本特点
	1. 是一种解释性脚本语言（代码不进行预编译）。
	2. 主要用来向 HTML（标准通用标记语言下的一个应用）页面添加交互行为。
	3. 可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。
	跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如 Windows、Linux、Mac、Android、iOS 等）。

10.如何判断某变量是否为数组数据类型？

	if(typeof Array.isArray==="undefined")
		{Array.isArray = function(arg){
			return Object.prototype.toString.call(arg)==="[object Array]"
		};
	}

11.希望获取到页面中所有的 checkbox 怎么做？

	var domList = document.getElementsByTagName(‘input’)
	var checkBoxList = [];
	var len = domList.length; //缓存到局部变量
	for (var i=0;i<len;i++) {
		if (domList[i].type == ‘checkbox’) {
			checkBoxList.push(domList[i]);
		}
	 }

12.当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？

	直接在 DOM 里绑定事件：<div onclick=”test()”></div>
	在 JS 里通过 onclick 绑定：xxx.onclick = test通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
	那么问题来了，Javascript 的事件流模型都有什么？
	“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
	“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
	“DOM 事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

13.输出今天的日期，以 YYYY-MM-DD 的方式

	var d = new Date();
	// 获取年，getFullYear()返回 4 位的数字
	var year = d.getFullYear();
	// 获取月，月份比较特殊，0 是 1 月，11 是 12 月
	var month = d.getMonth() + 1;
	// 变成两位
	month = month < 10 ? '0' + month : month;
	// 获取日
	var day = d.getDate();
	day = day < 10 ? '0' + day : day;
	alert(year + '-' + month + '-' + day);

14.将字符串”{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲</td><td>{name}”中的{$id}替换成 10，name}替换成 Tony （使用正则表达式）

	"<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g,'10').replace(/{\$name}/g, 'Tony');

15.用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。

	function randomNub(aArray, len, min, max) {
		if (len >= (max - min)) {
			return '超过' + min + '-' + max + '之间的个数范围' +(max - min - 1) + '个的总数';
		}if (aArray.length >= len) {
			aArray.sort(function(a, b) {
				return a - b
			});
			return aArray;
		}
		var nowNub = parseInt(Math.random() * (max - min - 1)) +(min + 1);
		for (var j = 0; j < aArray.length; j++) {
			if (nowNub == aArray[j]) {
				randomNub(aArray, len, min, max);
				return;
			} 
		}
		aArray.push(nowNub);
		randomNub(aArray, len, min, max);
		return aArray;
		}
		var arr=[];
		randomNub(arr,10,10,100);
		console.log(arr)

16.把两个数组合并，并删除第二个元素。

	var array1 = ['a','b','c'];
	var bArray = ['d','e','f'];
	var cArray = array1.concat(bArray);
	cArray.splice(1,1);

17.怎样添加、移除、移动、复制、创建和查找节点（原生 JS，实在基础，没细写每一步）

	1）创建新节点
		createDocumentFragment() //创建一个 DOM 片段
		createElement() //创建一个具体的元素
		createTextNode() //创建一个文本节点
	2）添加、移除、替换、插入
		appendChild() //添加
		removeChild() //移除
		replaceChild() //替换
		insertBefore() //插入
	3）查找
		getElementsByTagName() //通过标签名称
		getElementsByName() //通过元素的 Name 属性的值
		getElementById() //通过元素 Id，唯一性

18.有这样一个 URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定)，将其按 key-value 形式返回到一个 json 结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

	function serilizeUrl(url) {
		var urlObject = {};
		if (/\?/.test(url)) {
			var urlString = url.substring(url.indexOf("?") + 1);
			var urlArray = urlString.split("&");
			for (var i = 0, len = urlArray.length; i < len; i++) {
				var urlItem = urlArray[i];
				var item = urlItem.split("=");
				urlObject[item[0]] = item[1];
			}
			return urlObject;
		}
		return null;
	}

19.正则表达式构造函数 var reg=new RegExp(“xxx”)与正则表达字面量 var reg=//有什么不同？匹配邮箱的正则表达式？

	当使用 RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。
	邮箱的正则匹配：
		var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

20.写一个 function，清除字符串前后的空格。（兼容所有浏览器）

	if (!String.prototype.trim) {
		String.prototype.trim = function() {
			return this.replace(/^\s+/, "").replace(/\s+$/,"");
		}
	}
	//测试
	var str = " \t\n test string ".trim();
	alert(str == "test string"); // alerts "true"