前端开发知识点

HTML

Doctype作用？标准模式与兼容模式各有什么区别?

HTML5 为什么只需要写 <!DOCTYPE HTML>？

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

页面导入样式时，使用link和@import有什么区别？

介绍一下你对浏览器内核的理解？

常见的浏览器内核有哪些？

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？

<!--[if lt IE 9]>
	<script> src="http://html5shim.googlecode.com/svn
	/trunk/html5.js"</script>
 <![endif]-->

简述一下你对HTML语义化的理解？

HTML5的离线储存怎么使用，工作原理能不能解释一下？

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

iframe有那些缺点？

Label的作用是什么？是怎么用的？

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

HTML5的form如何关闭自动完成功能？

如何实现浏览器内多个标签页之间的通信? (阿里)

webSocket如何兼容低浏览器？(阿里)

页面可见性（Page Visibility API） 可以有哪些用途？

如何在页面上实现一个圆形的可点击区域？

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

网页验证码是干嘛的，是为了解决什么安全问题

title与h1的区别、b与strong的区别、i与em的区别？

CSS

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS选择符有哪些？哪些属性可以继承？

CSS优先级算法如何计算？

CSS3新增伪类有那些？

如何居中div？

div{
	width:200px;
	margin:0 auto;
 }

div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* 方便看效果 */
}

div {
	position: relative;		/* 相对定位或绝对定位均可 */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
	background-color: pink;	 	/* 方便看效果 */

 }

div {
	position: absolute;		/* 相对定位或绝对定位均可 */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: pink;	 	/* 方便看效果 */

}

.container {
	display: flex;
	align-items: center; 		/* 垂直居中 */
	justify-content: center;	/* 水平居中 */

}
.container div {
	width: 100px;
	height: 100px;
	background-color: pink;		/* 方便看效果 */
}

display有哪些值？说明他们的作用。

position的值relative和absolute定位原点是？

CSS3有哪些新特性？

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

用纯CSS创建一个三角形的原理是什么？

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

一个满屏 品 字布局 如何设计?

css多列等高如何实现？

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧

.bb{
      background-color:red;/*所有识别*/
      background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/
  }

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

为什么要初始化CSS样式

absolute的containing block(容器块)计算方式跟正常流有什么不同？

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

对BFC规范(块级格式化上下文：block formatting context)的理解？

css定义的权重


/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}

请解释一下为什么需要清除浮动？清除浮动的方式

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

&:after,&:before{
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

什么是外边距合并？

zoom:1的清除浮动原理?

移动端的布局用过媒体查询吗？

<style>
@media (min-width: 700px) and (orientation: landscape){
  .sidebar {
    display: none;
  }
}
</style>

使用 CSS 预处理器吗？喜欢那个？

CSS优化、提高性能的方法有哪些？

浏览器是怎样解析CSS选择器的？

margin和padding分别适合什么场景使用？

::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用

如何修改chrome记住密码后自动填充表单的黄色背景 ？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: rgb(250, 255, 189); /* #FAFFBD; */
  background-image: none;
  color: rgb(0, 0, 0);
}

设置元素浮动后，该元素的display值是多少？

怎么让Chrome支持小于12px 的文字？

让页面里的字体变清晰，变细用CSS怎么做？

font-style属性可以让它赋值为“oblique” oblique是什么意思？

position:fixed;在android下无效怎么处理？

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

display:inline-block 什么时候会显示间隙？(携程)

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

什么是CSS 预处理器 / 后处理器？

JavaScript

介绍js的基本数据类型

介绍js有哪些内置对象？

说几条写JavaScript的基本规范？

JavaScript原型，原型链 ? 有什么特点？

function Func(){}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function() {
  return this.name;
}
var person = new Func();//现在可以参考var person = Object.create(oldObject);
console.log(person.getInfo());//它拥有了Func的属性和方法
//"Sean"
console.log(Func.prototype);
// Func { name="Sean", getInfo=function()}

JavaScript有几种类型的值？，你能画一下他们的内存图吗？

如何将字符串转化为数字，例如’12.3b’?

如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?

function commafy(num){
	return num && num
		.toString()
		.replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
			return $2 + ',';
		});
}

如何实现数组的随机排序？

var arr = [1,2,3,4,5,6,7,8,9,10];
function randSort1(arr){
	for(var i = 0,len = arr.length;i < len; i++ ){
		var rand = parseInt(Math.random()*len);
		var temp = arr[rand];
		arr[rand] = arr[i];
		arr[i] = temp;
	}
	return arr;
}
console.log(randSort1(arr));


var arr = [1,2,3,4,5,6,7,8,9,10];
function randSort2(arr){
	var mixedArray = [];
	while(arr.length > 0){
		var randomIndex = parseInt(Math.random()*arr.length);
		mixedArray.push(arr[randomIndex]);
		arr.splice(randomIndex, 1);
	}
	return mixedArray;
}
console.log(randSort2(arr));


var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
	return Math.random() - 0.5;
})
console.log(arr);

Javascript如何实现继承？

function Parent(){
	this.name = 'wang';
}

function Child(){
	this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型

var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性

javascript创建对象的几种方式？

function Person(){}
//定义一个function，如果使用new"实例化",该function可以看作是一个Class
person.name="Mark";
var person=new Person();
person.age="25";
person.work=function(){
alert(person.name+" hello...");
}
person.work();

function Pet(name,age,hobby){
   this.name=name;//this作用域：当前对象
   this.age=age;
   this.hobby=hobby;
   this.eat=function(){
      alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
   }
}
var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
maidou.eat();//调用eat方法

var wcDog =new Object();
 wcDog.name="旺财";
 wcDog.age=3;
 wcDog.work=function(){
   alert("我是"+wcDog.name+",汪汪汪......");
 }
 wcDog.work();

function Dog(){

 }
 Dog.prototype.name="旺财";
 Dog.prototype.eat=function(){
 alert(this.name+"是个吃货");
 }
 var wangcai =new Dog();
 wangcai.eat();

function Car(name,price){
  this.name=name;
  this.price=price;
}
 Car.prototype.sell=function(){
   alert("我是"+this.name+"，我现在卖"+this.price+"万元");
  }
var camry =new Car("凯美瑞",27);
camry.sell();

Javascript作用链域?

谈谈This对象的理解。

eval是做什么的？

什么是window对象? 什么是document对象?

null，undefined 的区别？

写一个通用的事件侦听器函数。

// event(事件)工具集，来源：github.com/markyun
markyun.Event = {
	// 页面加载完成后
	readyEvent : function(fn) {
		if (fn==null) {
			fn=document;
		}
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = fn;
		} else {
			window.onload = function() {
				oldonload();
				fn();
			};
		}
	},
	// 视能力分别使用dom0||dom2||IE方式 来绑定事件
	// 参数： 操作的元素,事件名称 ,事件处理程序
	addEvent : function(element, type, handler) {
		if (element.addEventListener) {
			//事件类型、需要执行的函数、是否捕捉
			element.addEventListener(type, handler, false);
		} else if (element.attachEvent) {
			element.attachEvent('on' + type, function() {
				handler.call(element);
			});
		} else {
			element['on' + type] = handler;
		}
	},
	// 移除事件
	removeEvent : function(element, type, handler) {
		if (element.removeEventListener) {
			element.removeEventListener(type, handler, false);
		} else if (element.datachEvent) {
			element.detachEvent('on' + type, handler);
		} else {
			element['on' + type] = null;
		}
	},
	// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
	stopPropagation : function(ev) {
		if (ev.stopPropagation) {
			ev.stopPropagation();
		} else {
			ev.cancelBubble = true;
		}
	},
	// 取消事件的默认行为
	preventDefault : function(event) {
		if (event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
	},
	// 获取事件目标
	getTarget : function(event) {
		return event.target || event.srcElement;
	},
	// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
	getEvent : function(e) {
		var ev = e || window.event;
		if (!ev) {
			var c = this.getEvent.caller;
			while (c) {
				ev = c.arguments[0];
				if (ev && Event == ev.constructor) {
					break;
				}
				c = c.caller;
			}
		}
		return ev;
	}
};

[“1”, “2”, “3”].map(parseInt) 答案是多少？

function parseInt(str, radix) {
    return str+'-'+radix;
};
var a=["1", "2", "3"];
a.map(parseInt);  // ["1-0", "2-1", "3-2"] 不能大于radix

事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

什么是闭包（closure），为什么要用它？

//li节点的onclick事件都能正确的弹出当前被点击的li索引
 <ul id="testUL">
    <li> index = 0</li>
    <li> index = 1</li>
    <li> index = 2</li>
    <li> index = 3</li>
</ul>
<script type="text/javascript">
  	var nodes = document.getElementsByTagName("li");
	for(i = 0;i<nodes.length;i+= 1){
	    nodes[i].onclick = (function(i){
	              return function() {
	                 console.log(i);
	              } //不用闭包的话，值每次都是4
	            })(i);
	}
</script>

function say667() {
	// Local variable that ends up within closure
	var num = 666;
	var sayAlert = function() {
		alert(num);
	}
	num++;
	return sayAlert;
}

 var sayAlert = say667();
 sayAlert()//执行结果应该弹出的667

javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？

如何判断一个对象是否属于某个类？

if(a instanceof Person){
       alert('yes');
   }

new操作符具体干了什么呢?

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

JSON 的了解？

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);

JSON对象转换为JSON字符串：
var last=obj.toJSONString();
var last=JSON.stringify(obj);

js延迟加载的方式有哪些？

Ajax 是什么? 如何创建一个Ajax？

Ajax 解决浏览器缓存问题？

同步和异步的区别?

如何解决跨域问题?

模块化开发怎么做？

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此处略去 100 行
    var b = require('./b') // 依赖可以就近书写
    b.doSomething()
    // ...
})

// AMD 默认推荐
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
    a.doSomething()
    // 此处略去 100 行
    b.doSomething()
    // ...
})

异步加载JS的方式有哪些？

documen.write和 innerHTML的区别

DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

.call() 和 .apply() 的区别？


function add(a,b)
{
    alert(a+b);
}

function sub(a,b)
{
    alert(a-b);
}

add.call(sub,3,1);

jquery.extend 与 jquery.fn.extend的区别？

Jquery与jQuery UI 有啥区别？

jquery 中如何将数组转化为json字符串，然后再转化回来？

$.fn.stringifyArray = function(array) {
    return JSON.stringify(array)
}

$.fn.parseArray = function(array) {
    return JSON.parse(array)
}

然后调用：
$("").stringifyArray(array)

针对 jQuery 的优化方法？

如何判断当前脚本运行在浏览器还是node环境中？（阿里）

jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

那些操作会造成内存泄漏？

JQuery一个对象可以同时绑定多个事件，这是如何实现的？

$("div").on({
	click: function(){},
	mouseover: function(){}
});

知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

检测浏览器版本版本有哪些方式？

//"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36
		  (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"

What is a Polyfill?

做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？

使用JS实现获取文件扩展名？

function getFileExtension(filename) {
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}

ECMAScript6 相关

Object.is() 与原来的比较操作符“ ===”、“ ==”的区别？

其他问题

页面重构怎么操作？

列举IE与其他浏览器不一样的特性？

什么叫优雅降级和渐进增强？

是否了解公钥加密和私钥加密

WEB应用从服务器主动推送Data到客户端有那些方式？

对Node的优点和缺点提出了自己的看法？

你有用过哪些前端性能优化的方法？

http状态码有那些？分别代表是什么意思？

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、 到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等

你用的得心应手用的熟练地编辑器&开发环境是什么样子？

对前端工程师这个职位是怎么样理解的？它的前景会怎么样？

平时如何管理你的项目？

说说最近最流行的一些东西吧？常去哪些网站？

移动端（Android IOS）怎么做好用户体验?