前言:
记录个人的前端知识点
HTML:
A:Doctype作用?标准模式与兼容模式各有什么区别?
Q:
作用:!DOCTYPE处于html 标签之前。告知浏览器用什么文档标准解析这个文档。(注:DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。)
区别:标准模式:浏览器以最高标准运行。兼容模式:页面以向后兼容显示,防止站点无法工作。
A:html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?
Q:
新特性:
1)多样的表单控件:包括calendar、date、time、email、url、search等
2)语意化更好的内容元素:article、footer、header、nav、section标签
3)更支持图像、媒体:增加canvas、video 、audio 元素
4)缓存机制:增加localStorage 、sessionStorage
5)新技术:Web Workers多线程解决方案、WebSocket接口双向通信、Geolocation地理定位接口等
处理兼容问题:通过document.createElement方法创建标签并添加标签默认的样式
A:cookies,sessionStorage 和 localStorage 的区别
Q:
1)时效性:sessionStorage 只存在当前浏览窗口,关掉即清除缓存,cookies和 localStorage一直存在本地
2)作用域:sessionStorage 只共享于当前浏览窗口,cookies和 localStorage共享于所有同源窗口
3)交互性:cookie可以浏览器和服务器间来回传递,而sessionStorage和localStorage仅在本地保存
4)存储大小:cookie数据不能超过4k,并且始终在同源的http请求中携带,所以cookie只适合保存很小的数据,如会话标识;sessionStorage 和localStorage接近5M
CSS
A:CSS的元素分类
Q:
1)块级元素:div,p,h1,ul,li;
2)行内元素 : span>,a,input,img;
A:CSS隐藏元素的几种方法
Q:
1)Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
2)Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
3)Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
A:CSS清除浮动的几种方法
Q:
1)使用带clear属性的空元素
2)使用CSS的overflow属性
3)使用CSS的:after伪元素
A:CSS居中
Q:
1)内联元素
[1]水平居中
<1>行内元素:text-align:center;
<2>Flex布局:display:flex; justify-content:center;
[2]垂直居中
<1>行内元素
{1}单行文本:height = line-height;
{2}多行文本: display:table-cell; vertical-align:middle;
<2>Flex布局:display:flex; align-items:center;
2)块级元素
[1]水平居中
<1>定宽块级元素:左右 margin 值设为 auto
<2>不定宽块级元素:display:flex; justify-content:center;
[2]垂直居中:
<1>父元素设置:display:flex; align-items:center; (或者利用display:table-cell属性使内容垂直居中)
<2>对需要居中的元素设置:position:abosolute;top:50%;left:50%;transform:tanslate(-50%,-50%);(tanslate -50%是往回调居中元素本身一半的宽度和高度)
A:
position的值, relative和absolute分别是相对于谁进行定位的?
Q:
absolute:相对于position不是static的父元素进行绝对定位
fixed:相对于浏览器窗口或 frame 进行绝对定位
relative:相对于其原来的位置进行偏移
A:页面导入样式,link和@import区别
Q:
1)载入:link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
2)LINK是XHTML标签,没有兼容问题,并且除了加载CSS,还有定义rel连接属性等作用
A:CSS的盒子模型
Q:盒模型: 内容(content) + 填充(padding) + 边框(border) + 边界(margin).
A:CSS3 box-sizing 属性
Q:
1)content-box: width和height属性只针对content
2)border-box: width和height属性针对content + padding + border
3)inherit:继续父元素的box-sizing属性
A:CSS3新特性
Q:
1)非动画:border-radius、box-shadow、text-shadow等
2)动画:transform:rotate、scale、translate、skew;//旋转,缩放,定位,倾斜
Javascript
A:javascript的typeof返回哪些数据类型
Q:六种数据类型:Object function string number boolean underfind;
附: 五种基本类(引用类型):object array date regexp function
三种特殊类(引用类型):string number boolean
两个内置对象:global math
A:例举3种强制类型转换和2种隐式类型转换?
Q:
强制:parseInt toString Boolean
隐式:isNan、==
A:数组方法pop() push() unshift() shift()
Q:
push() 尾部增加 pop() 尾部删除 ,类似于栈(叠箱子) 后进先出
unshift() 头部增加 shift() 头部删除 ,类似于队列 先进先出
A:get 和post方式的区别
Q:
本质:Get是向服务器发索取数据的一种请求,而Post是向服务器提交数据的一种请求
区别:
1)传参机制:get是把参数添加到action指向的url后面,post是将参数放置在HTML HEADER的包体内
2)安全性:由于传参机制的区别,post的安全性会高于get
3)服务器端获取值的方法:get方式提交的数据,服务器端使用request.QueryString获取变量的值;post方式提交的数据,服务器端使用request.Form获取数据
总结:查询统计的时候,使用get方式;数据的添加,修改或删除操作时,使用post方式
A:call和apply
Q:
作用:改变某个函数的某个方法执行的作用域(或者说是改变其THIS的指向)
区别:参数不同
A:ajax请求时,如何解释json数据
Q:使用eval parse,鉴于安全性考虑 使用parse更靠谱(eval对数据的格式要求不高)
A:
事件委托
Q:利用事件冒泡的原理,通过绑定父元素的事件,使其子元素也绑定同样的事件
A:闭包
Q:简单讲即函数里面的函数,里面的函数拥有作用域链,所以能访问外部的函数。
特点:闭包能避免全局变量污染,也由于其变量循环引用的机制,会使得其变量不会被回收
A:添加 删除 替换 插入到某个节点的方法
Q:
添加节点:obj.appendChild
删除节点:obj.removeChild
替换节点:obj.replaceChild
替换节点:obj.replaceChild
插入节点:obj.insertBefore
A:javascript的同源策略
Q:一段脚本只能读取来自于同一来源的窗口和文档,同一来源指的是主机名、协议和端口号的组合
A:编写一个b继承a的方法
Q:
父类:
父类:
// 定义一个动物类
function Animal (name) {
this.name = name || 'Animal';
this.sleep = function(){
console.log(this.name + '正在睡觉!');
}
}
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃:' + food);
};
子类:(组合继承)
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
A:
阻止事件冒泡
Q:
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true //兼容IE
}
return false
Q:
function preventDefa(e){
if(window.event){
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
else{
//阻止默认浏览器动作(W3C)
e.preventDefault();
}
}
A:下面程序执行后弹出什么样的结果?
function fn() {
this.a = 0;
this.b = function() {
alert(this.a)
}
}
fn.prototype = {
b: function() {
this.a = 20;
alert(this.a);
},
c: function() {
this.a = 30;
alert(this.a);
}
}
var myfn = new fn();
myfn.b();
myfn.c();
Q: 0 和 30(原因:执行函数时会先在实例里面找,再到原型里面找)
A:谈谈This对象的理解
Q:this指的是调用函数的那个对象。
函数声明时this指向:全局对象Global。
函数声明时this指向:全局对象Global。
被调用时this指向:调用的对象。
A:下面程序的结果
function fun(n,o) {
console.log(o)
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1); c.fun(2); c.fun(3);
Q:
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1
//b: undefined,0,1,2
//c: undefined,0,1,1
考点:
1)区分fun函数和fun属性
2)闭包的变量不会被回收
A:下面程序的输出结果
var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
Q:Goodbye Jack考点:声明提升,声明操作在编译阶段进行,声明操作会被提升到执行环境的顶部,值是undefined(表示未初始化)
A:自动化构建工具(gulp)和打包工具(webpack)
Q:
gulp是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作
1.构建工具
2.自动化
3.提高效率用
webpack是文件打包工具,可以把项目的各种js文、css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案
webpack是文件打包工具,可以把项目的各种js文、css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案
1.打包工具
2.模块化识别
3.编译模块代码方案用
A:JS模块化
Q:
概念:一个模块就是实现特定功能的文件,类似JAVA的包,用来隔离、组织复杂的JavaScript代码,通过封装部分JS文件组成一个模块,需要的时候直接导入
解决问题:避免全局变量的污染,组织代码
其他:
A:
如何解决跨域问题
Q:
1)JSONP:json+padding(内填充),顾名思义,就是把JSON填充到一个盒子里
原理:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。
实现:
<script>
function createJs(sUrl){
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = sUrl;
document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');
box({
'name': 'test'
});
function box(json){
alert(json.name);
}
</script>
2)window.name
原理:window对象有一个name属性,该属性有一个特征:即窗口载入的所有的页面都是共享一个window.name的,每一个页面对window.name都有读写的权限,所有可以以windows.name为中枢跨域传输数据
3)CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttprequest请求,从而克服了AJAX只能同源使用的限制。
A:XML和JSON的区别?
Q:JSON相对于XML,体积小,速度快,易解析,但描述性没XML好
A:创建ajax过程
Q:
1)创建XMLHttpRequest对象
2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及是否异步处理信息.【XMLHttpRequest.open(method,url,async)方法】
3)设置响应HTTP请求状态变化的函数.【XMLHttpRequest.onreadystatechange方法】
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
4)发送HTTP请求.【XMLHttpRequest.send()方法】
5)获取异步调用返回的数据【XMLHttpRequest.responseText 或 XMLHttpRequest.responseXML 】
A:sql注入原理
Q:通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令
A:XSS
Q:
Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。
比如:攻击者在论坛中放一个看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;
或者攻击者在论坛中加一个恶意表单,当用户提交表单的时候,就会把信息传送到攻击者的服务器中。
A:前端工程的价值
Q:
1)交互:提高用户的体验
2)兼容:使网页能在多种浏览器,多种设备上面展示
3)速度:优化网页加载速度,提高用户浏览速度
A:性能优化问题
Q:
1)代码层面:避免使用css表达式,避免使用高级选择器,通配选择器,少用全局变量。
2)缓存利用:使用异步加载,并且JS文件放在底部,cookies添加Expire
A:快速排序
Q:
相当于二分法:
1)在数据集之中,找一个中间点
2)建立两个数组,分别存储小于中间点的和大于中间点的
3)利用递归进行下次比较
A:new操作符具体干了什么呢?
Q:
1)创建一个空对象,该对象继承构造函数的原型
2)对象继承构造函数的属性和方法
3)this指向该对象
A:编写一个方法 求一个字符串的字节长度
Q:
function GetBytes(str){
var len = str.length;
var bytes = len;
for(var i=0; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
A:attribute和property的区别
Q:attribute是标签的属性,property是对象的属性