前端笔试题

a 元素可以没有 href 属性，此时为超链接的一个占位符，但a标签没有设置href属性时是不能获取焦点的；
在HTML中target目标的四个参数的用法：
1、target="_self"表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。即：同(自己)窗口打开,别的数据还存在，相当于在一个页面里中又打开一个页面。
2、target="_parent"表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开,但以前当前窗口数据没有。
3、target="_top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
4、target="_blank"表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口。

href属性可选：绝对路径、相对路径、锚

4.History对象的属性或方法描述正确的是

1.length 返回浏览器历史列表中的URL数量

2.back()加载 history 列表中的前一个 URL

3.forward()加载 history 列表中的下一个 URL

4.go()加载history列表中的某个具体页面

5.在HTML5中，为input元素新增了以下一些type属性值：

color：用于指定颜色的控件。
date：用于输入日期的控件（年，月，日，不包括时间）。
month：用于输入年月的控件，不带时区。
week：用于输入一个由星期-年组成的日期，日期不包括时区
time：用于输入不含时区的时间控件。
datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local：用于输入日期时间控件，不包含时区。
email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
number: 用于应该包含数值的输入域。只能输入数字
range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
url：用于编辑URL的字段。

6.下面哪些特性不是HTML5新引入的特性

不是新增的：AJAX 、 ES6

HTML5引入的新特性有：audio、video、Canvs、localStorage、WebSocket、mainfest（应用缓存资源清单）

新增标签：

<header><nav><article><section><aside><footer>、<embed>(定义了一个容器，用来嵌入外部应用或互动程序)、<datalist>(需要和<input>标签配合使用，用来表示可选的列表，跟select标签功能一样，比如<input list="browsers">)、<progress>、<time>、<meter>、<figure>

7.遍历

1.遍历对象用for in（效率最低）

2.for...of遍历数组的value （比for...in的性能好）

let arr = [1, 2, 3];
for (let i of arr) {
	console.log(i)  
}
// 1
// 2
// 3

3.例子：

let array = [,1,,2,,3];
array = array.map((i) => ++i)     //结果为[,2,,3,,4]

forEach(),filter(),reduce(),every(),some()都会跳过数组的空位。

map()会跳过空位，但会保留这个值。

join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串

8.以下哪个标签用于表示 HTML5 中不同类型输出的结果？

答案————output:定义不同类型的输出，比如脚本的输出

placeholder：该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

autofocus：当页面加载时 input 元素应该自动获得焦点。

required：如果使用该属性，则字段是必填（或必选）的。

9.以下哪些选项可以将集合A转化为数组

1.Array.from(arr, mapfn,thisArg)方法，用于将两类可以把对象转换为真正的数组：类似数组的对象和可遍历的对象（部署了Iterator接口的，String，ES6新增的Map和Set）。可以传3个参数，其中第一个是数组，必传；第二个是一个函数（类似map函数），对数组元素进行操作后再返回数组，可选；第三个是对于this关键字的指向，可选。

2.slice() 方法可从已有的数组中返回选定的元素。
返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
说明
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
所以在这里就是对集合A应用slice，返回一个新的数组，不对数组做任何改变。

3.展开运算符，把A集合的元素展开后，用数组[]承载，返回新的数组。

4.map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
所以map方法返回了一个新的数组，并且数组中每个元素是A里面的元素。

哪些方式在同一个窗口下能够检测一个js对象是数组类型？

1.Array.isArray()

2.instanceof

3.Object.prototype.toString.call()

数组的最大值求法

var a = [1,2,3,6]

Math.max.apply(null,a)

为什么不能用Math.max(a)，因为该方法接收任意多个数值参数，不接受数组参数。

如果要看apply和call方法的区别，转到JS函数进阶_程琬清君的博客-CSDN博客可看

10.导入导出

导入

import xxx from '路径'；

导入文件过多 import * as 重新命名 from '路径'

导出

1.export（可以导出多个）

var age = "年龄"
function play() {
    alert("玩电脑")
}

export { age,play }

这种导出，必须要用解构赋值导入，import { age } from '路径'

// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};

2.export default（只能导出一个）

class Person{
    constructor(name){
        this.name = name;
    }
    say(){
        alert(this.name)
    }
}

export default Person //将Person匿名导出

导入import Person from '路径'

具体可以参考js模块的导入与导出_osaka_black的博客-CSDN博客

11.关于XML和JSON区别的描述正确的是

XML(Extensible Markup Language可扩展标记语言)，被设计用于结构化、传输和存储数据，核心在于数据的内容

1.JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互

2.JSON相对于XML来讲，数据的体积小，传递的速度更快

3.JSON的速度一般要快于XML

4.XML对数据的类型描述表达比JSON更丰富

5.存在一些数据库，直接支持XML或JSON数据的操作，如mongodb,postgresql

12.CSS 中可继承的属性有哪些

font-size、color

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

13.浏览器内核

浏览器	内核	前缀
chrome	Blink	-webkit-
IE	Trident	-ms-
firefox	Gecko	-moz-
Safari	Webkit	-webkit-
Opera	Blink	-o-

14.Generator对象

15.原型链/原型

最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一） - 简书

错误的说法：

1.每个对象都具有一个名为prototype的方法

2.每个对象都具有一个名为__proto__的属性，Object.create(null)创建的对象没有__proto__

正确：

1.对象不具有prototype属性，只有函数才有prototype属性

2.每个对象的__proto__属性指向自身构造函数的prototype

方法：

hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。

isPrototypeOf : 是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。

hasPrototypeProperty:从字面上就可以知道是检测原型对象上的属性。

16.正则表达式

1.exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。exec() 与match方法类似，这个方法只会执行一次，加上修饰符 g 也只会执行一次，当再次调用的时候会从上次查询到的位置继续往后查。

2.test()方法，用于检测字符串是否匹配某个模式，返回值为boolean

document.write传入的是一个数组，所以会默认调用toString的方法

exclude中存放的元素必须是正则表达式

17.DOM树节点格式

DOM常见的节点类型： Element（元素节点） Attr（属性节点） Text（文本节点） Comment（注释节点） Document（文档节点） DocumentType（文档类型节点） DocumentFragment（文档片段节点）

18.HTML的空元素

<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

19.Ajax和Flash的优缺点比较相关正确的有

1.Ajax的优势在意在于开放性，易用性及易于开发，可搜索性，费用

2.Ajax最主要的批评就是它可能破坏浏览器的后退功能，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中，不过这些都有相关方法解决

3.Flash的优势在于多媒体处理，可以更容易的调用浏览器以外的外部资源，兼容性，矢量图形，客户端资源调度

4.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间，二进制格式，格式私有，性能问题

20.web页面级优化

减少HTTP请求的次数、进行资源合拼和压缩、Inline images、将外部脚本置于低端、减少不必要的HTTP跳转

优化CSS图片加载：

CSSSprite、SVGSprite、Iconfont、Base64

CSS Sprite：又称为CSS精灵或者雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。能很好地减少网页的http请求，从而大大的提高页面的性能。

SVG Sprite：与CSS Sprite类似。另外一种实现思路 <symbol> + <use>。<symbol>用于定义可复用的形状，定义的现状不会展示出来，
而是通过use元素引用来显示。

Icon font：图标字体，也叫字体图标，就是字体做的图标。能自由变化大小，且不会模糊。比图片小，加载快。可以任意改变颜色。

Base64：可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。图片的下载始终都要向服务器发出请求，而通过base64编码后可以随着 HTML的下载同时下载到本地，减少 http 请求。

21.颜色设置

以红色为例子

设置为：red、#f00、rgb(255,0,0)、hsl(0,100%,50%)

其中hsl(Hue色调,Saturation饱和度,Lightness亮度)

22.数据类型转换成true or false

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	空字符串
Number	任何非零数字值（包括无穷大）	0和Null
Object	任何对象	null
Undefined		Undefined

布尔类型里只有这几参数个返回false，其它都为true
Boolean(undefined) // false
Boolean(null) // false 
Boolean(0) // false 
Boolean(NaN) // false 
Boolean('') // false

Boolean([]) //true

23. CSS 设置链接样式顺序

a:link、a:visited、a:focus、a:hover、a:active；推荐的顺序是：LVFHA
a:link、a:visited之间的相对关系不影响，所以 VLFHA 顺序也是可以的

24.表单select域

window.onload = function(){
    //首先获得下拉框的节点对象；
    var obj = document.getElementById("obj");
    //1.如何获得当前选中的值？：
    var value = obj.value;
    //2.如何获得该下拉框所有的option的节点对象
    var options = obj.options;
    //注意：得到的options是一个对象数组
    //3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样：
    var value1 =options[0].value;
    //4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样：
    var text1 = options[0].text;
    //5.如何获得当前选中的option的索引？
    var index = obj.selectedIndex;
    //6.如何获得当前选中的option的文本内容？
    //从第2个问题，我们已经获得所有的option的对象数组options了
    //又从第5个问题，我们获取到了当前选中的option的索引值
    //所以我们只要同options[index]下标的方法得到当前选中的option了
    var selectedText =options[index].text;
}

<form name="a">
<select name="a" size="1" id=”obj”>
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
</form>
当前默认选中的是第一个，
console.log( obj.options[obj.selectedIndex].text ) 输出的是1,
console.log( obj.options[obj.selectedIndex].value ) 输出的是a

25.jQuery方法

1.getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件jQuery.getScript(url,success(response,status));

2.$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

3.load() 方法从服务器加载数据，并把返回的数据放入被选元素中。$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

4.ajax() 方法通过 HTTP 请求加载远程数据。$.ajax(opts);opts为json格式，常见参数url、type、data等。

26.块内声明函数的用法

不要在块内声明一个函数（严格模式会报语法错误）。如果确实需要在块中定义函数，可以使用函数表达式来声明函数

27.哪些事件不支持冒泡

妈（mouseenter）妈（mouseleave）不（blur）（unload）让（resize）浪（load）费（focus）

28.iframe

iframe用于在页面内显示页面，使用<iframe>会创建包含另一个文档的内联框架（即行内框架）

<iframe src="URL"></iframe>

深入理解 iframe - Leophen - 博客园

29.数组方法

会改变数组的方法：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
forEach()

不会改变数组的方法：

filter()
concat()
slice()
map()

30.表达式

2.toString()将会优先将小数点解析为数字小数点
2..toString()因为连续的两个小数点不符合number的格式规则，第二个小数点才会被解析为调用方法

31.代码题

1.a(10)时，下面的代码的值为

function a(a){
    a^=(1<<4)-1;
    return a;
}
//结果为5

解析：<< 表示左移，先化为2进制，1为01，然后左移4位，成010000，再化为10进制，10000(二进制) = 16(十进制)。接着a = a ^15 而a = 10，符号^表示异或，也就是比较对应的二进制位是否相同，相同为0，不同为1。 10的二进制 => 1010 15的二进制 => 1111 通过异或运算可以得到 0101 再转换成十进制即是5

2.输出结果

	var a,b;
	(function(){
	    alert(a);   //这是第一个输出的,先在局部没找到a变量，然后去全局找，找到了但没定义，输出undefined
	    alert(b);    //这是第二个输出的，其他同上
	    var a=b=3;    //定义一个局部变量a=3,然后给全局变量b赋值 b=3;
	    alert(a);     //这是第三个输出，局部变量a=3
	    alert(b);     //这是第四个输出，全局变量b=3
	})();            //这个函数体已经执行完毕，里面的内存已经被垃圾回收器回收，局部变量a销毁
	alert(a);        //这是第五个输出，全局变量a=undefined
	alert(b);        //这是第六个输出，全局变量b=3
	故正确答案是undefined,undefined,3,3,undefined,3;选A

3.输出结果

var f = function g() {
    return 23;
 };
typeof g();   // Error

/* 如果是typeof f，结果是function
如果是typeof f()，结果是number
如果是typeof g,结果是undefined.
如果是typeof g(),结果是ReferenceError，g is not defined */

在 JS 里，声明函数只有 2 种方法：
第 1 种： function foo(){...} （函数声明）
第 2 种： var foo = function(){...} （等号后面必须是匿名函数，这句实质是函数表达式）

除此之外，类似于 var foo = function bar(){...} 这样的东西统一按 2 方法处理，即在函数外部无法通过 bar 访问到函数，因为这已经变成了一个表达式。

但为什么不是 "undefined"？
这里如果求 typeof g ，会返回 undefined，但求的是 g()，所以会去先去调用函数 g，这里就会直接抛出异常，所以是 Error。

4.输出结果：

void();    //SyntaxError

void  0; //undefined
void (0);//undefined
void (); //SyntaxError 语法错误

5.输出结果

console.log(1);
let a = setTimeout(() => {console.log(2)}, 0);
console.log(3);
Promise.resolve(4).then(b => {
console.log(b);
clearTimeout(a);
});
console.log(5);

// 结果输出：1,3,5,4

在执行异步任务：其中异步任务分为宏任务和微任务，微任务优先级高于宏任务。promise.then执行的微任务，输出4，然后clearTimeout(a)清除了定时器，于是不再打印2。

6.输出结果

var msg='hello';
for (var i=0; i<10; i++)
{
var msg='hello'+i*2+i;
}
alert(msg);
// hello189

这里只是for循环不是函数，因此for内部定义的msg与for外部定义的msg为在同一块作用域，为同一个变量

7.输出结果

for(let i=0;i<12;i++){} console.log(i);
const a = 12;a=13;
console.log(a);
const g = {b:3};
console.log(g.b);
g.b=12;console.log(g.b);
let [head,...tail] = [1,2,3,4];
conole.log(tail);

let 与var不同，存在块级作用域，在for循环中声明，循环之外销毁所以 i not defined。

const 声明一个常量无法更改，所以TypeError

8.语句运行后哪些打印的结果是false（）

alert（2<1<3）  //true
//2<1会显示false，而false在js中会被转换为0，那么后面那句就变成了0<3,显然显示是true

alert（null == 0）//false
null>0显示false,null==0显示false,null>=0显示true。

32.JavaScript 中的数字在计算机内存中占多少个Byte？

答案：8Byte

33.白屏时间first paint和可交互时间dom ready的关系是

答案：先触发first paint ，后触发dom ready

白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间。

用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作。

总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

34.Browser对象

history screen location Navigator

JavaScript是单线程的，浏览器实现了异步的操作，整个js程序是事件驱动的，每个事件都会绑定相应的回调函数

35.阻止IE和各大浏览器默认行为

阻止默认事件：

e.preventDefault()
e.returnValue = false (IE)

阻止冒泡：

e.stopPropagation()
e.cancelBubble = true (IE)

36.哪些函数是JavaScript的全局函数

37.给网页添加JavaScript的方式有

1.使用script标签，将javascript代码写到<script></script>之间

2.添加外部javascript文件

3.使用行内javascript

38.判断对象myObj是否存在的写法

1、！obj
2、！window.obj
3、typeof myObj == "undefined（判断对象是否有定义，已定义未赋值，返回true）
4、myObj == undefined（已定义未赋值。返回true）
5、myObj === undefined （已定义未赋值，返回true）
6、!this.hasOwnProperty('myObj'))（判断是否为顶层对象的一个属性）
7、myobj == null（注意null与undefined的区别，ull指的是已经赋值为null的空对象，即这个对象实际上是有值的，而undefined指的是不存在或没有赋值的对象。）

只有null===null时，结果为true

39.下列哪些发生了类型转换

1.parseInt(12.34, 10)

可解析一个字符串，并返回一个整数;

number类型的12.34发生隐式转换为string

2. 0? 1 : 2

三元运算符，会判断?前的表达式为true或者false。所以number类型的0发生了隐式转换为boolean

3.1+ '1'

+运算发生了字符串的隐式转化。原本number类型的1，和string类型的'1'进行了+运算，连接了字符串。返回'11'

40.NOSCRIPT标签是做什么用的？

NOSCRIPT标签用来定义在脚本未被执行时的替代内容.也可以用在检测浏览器是否支持脚本，若不支持脚本则可以显示NOSCRIPT标签里的innerText

41.innerHTML

test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
test.innerText:

从起始位置到终止位置的内容, 但它去除Html标签 ,上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

除了包含innerHTML的全部内容外, 还包含对象标签本身。

上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

42.几个变量没有被回收

var i = 1;
var i = 2;
var add = function() {
    var i = 0;
    return function()
{
        i++;
        console.log(i);
    }
}();
add();

// 3个变量没有被回收

代码回收规则如下：

1.全局变量不会被回收。

2.局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁。（闭包中的局部变量不会被回收）

3.只要被另外一个作用域所引用就不会被回收

43.xml处理，以下说法正确的是（）

Xml一般用于传输和存储数据，是对html的补充，两者的目的不同；在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同；在IE浏览器里处理xml，首先需要创建ActiveXObject对象

44.JavaScript中document.getElementById()返回值的类型为

document.getElementById的返回值是Function

document.getElementById(" ")的返回值是Object

45.isNaN

// 1. isNaN()函数用来判断一个数是否是NaN;
            // 只有一个值是NaN或者能被转换为NaN的时候才返回true 
            console.log(isNaN('e'));//true,因为e可以被转换为NaN 
            console.log(isNaN('11'));//false,因为字符串可以被转换为数字,不能被转为NaN 
            console.log(isNaN(null));//false,因为null可以被转换为0,不能被转为NaN 
            console.log(isNaN(NaN));// true,NaN返回true
            
            // 2. parseInt(string,raix)函数有两个参数
            // 2.1 注意:string字符串只会被解析从第一个字符开始直到不是数字的字符部分
            console.log(parseInt('223'));//223
            // 2.2 当字符串中间存在非数字,那么就只解析前面是数字的部分字符
            console.log(parseInt('22e3'));//22
            // 2.3 如果字符串中第一个字符就不是数字,那么返回NaN 
            console.log(parseInt('e21'));//NaN
            
            // 对于parseInt()函数还有一个易考点,就是利用数组的下标,还记得parseInt()函数的第二个参数吗？
            // 2.4 parseInt()函数的第二个参数指的就是进制,这个参数小于2或者大于36的时候,都会返回NaN 
            console.log(parseInt(1,1));//NaN ,因为第二个参数是1表示1进制<2,所以错误
            console.log(parseInt(1,2));//1,因为表示二进制 =2,在范围内
            // 2.5 我们一般都是省略这个参数的,这个时候就是默认为10进制
            console.log(parseInt(99));//99
            // 2.6 我们第二个参数使用0的时候也是使用十进制
            console.log(parseInt(99,0));//99
            // 2.7 如果第一个参数前缀使用0x/0X则表示使用16进制
            console.log(parseInt(0x99));//153=16*9+9
            console.log(parseInt(0x99,10));//如果第一个参数使用了0x表示十六进制,那么第二个参数设置了值也无效
            
            // 2.8 看一个实例,对于数组
            var arr=[1,2,3,2,5];
            console.log(arr.map(parseInt));//[1, NaN, NaN, 2, NaN]
            // arr.map方法就是对于数组arr里面的每一项都去使用方法里面的函数,最后返回新数组
            // 因为map方***有索引,所以实际上就是 
            parseInt(1,0);//1,因为0表示十进制
            parseInt(2,1);//1进制<2，所以错啦!
            parseInt(3,2);// 2进制,但是3不在0——2范围内(3应该改为11),所以不符合2进制要求
            parseInt(2,3);//符合,因为三进制是0-3,而2在范围内
            parseInt(5,4);//4进制不包括5,所以NaN

1/0得到的是Infinity。isNaN(1/0)返回的是false。但是isNaN(0/0)返回的就是true

46.常见的请求头和相应头都有什么呢

1)请求(客户端->服务端[request])
    GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)
    Accept: */*(客户端能接收的资源类型)
    Accept-Language: en-us(客户端接收的语言类型)
    Connection: Keep-Alive(维护客户端和服务端的连接关系)
    Host: localhost:8080(连接的目标主机和端口号)
    Referer: http://localhost/links.asp(告诉服务器我来自于哪里)
    User-Agent: Mozilla/4.0(客户端版本号的名字)
    Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型)
    If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间)
    Cookie(客户端暂存服务端的信息)

Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)

2)响应(服务端->客户端[response])
    HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)
    Location: http://www.baidu.com(服务端需要客户端访问的页面路径)
    Server:apache tomcat(服务端的Web服务端名)
    Content-Encoding: gzip(服务端能够发送压缩编码类型)
    Content-Length: 80(服务端发送的压缩数据的长度)
    Content-Language: zh-cn(服务端发送的语言类型)
    Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)
    Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)
    Refresh: 1;url=http://www.it315.org(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)
    Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)
    Transfer-Encoding: chunked(分块传递数据到客户端）
    Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)
    Expires: -1//3种(服务端禁止客户端缓存页面数据)
    Cache-Control: no-***(服务端禁止客户端缓存页面数据)
    Pragma: no-***(服务端禁止客户端缓存页面数据)
    Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)

Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)

在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息，解决跨域的一种方法。

47. JavaScript 模块化的描述

AMD推崇依赖前置，CMD推崇依赖就近;主流的模块化包括CommonJS,AMD,CMD等;模块化有利于管理模块间的依赖，更依赖模块的维护。

AMD和CMD都是浏览器端的js模块化规范，分别由require.js和sea.js实现。 CommonJS是服务器端的js模块化规范，由NodeJS实现。

48.Number

以下都会转换成0

Number()
Number(0)
Number('')
Number('0')
Number(false)
Number(null)
Number([])
Number([0])

49.哪些方法会返回一个数组

Object.keys()

返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致。如果对象的键-值都不可枚举，那么将返回由键组成的数组。

String.prototype.split()

split() 方法使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。

50.BFC（块级格式化上下文）

它是一个独立渲染区域（一个隔离的容器），容器里的子元素不会影响到外面的元素。

BFC作用：

1.清除浮动

2.自适应两栏布局

3.避免margin重叠

哪些情况会产生BFC：

1.根元素（<html>）

2.float属性不为none

3.position为absolute或fixed

4.display为inline-block,table-cell,table-caption,flex,inline-flex

5.overflow不为visible

清除浮动

1.直接给父元素设置高度，在子元素改变的情况下，此方法使用起来比较繁杂。

2.给父元素直接设置 overflow:hidden;样式

3. 父元素结束标签之前加空div，样式为 clear：both；

4.伪元素选择器,父元素加上clearfix

浮动元素

1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上

2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上

3、若不浮动的是块级元素，那么浮动的元素将显示在其上方

4、若不浮动的是行内元素或者行内块元素，那么浮动的元素不会覆盖它，而是将其挤往左方

51.display:none和visiblity:hidden的说法，正确的是？

1.display:none与visibility:hidden 都可以用来隐藏某个元素

2.display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，但占位空间任然保留。

52.clientWidth/offsetWidth/scrollTop/scrollHeight

offsetHeight:返回自身包含padding、边框、内容区的高度
offsetWidth:返回自身包含padding、边框、内容区的宽度
offsetLeft:返回元素相对带有定位父元素左边框的偏移
offsetTop:返回元素相对带有定位父元素上方的偏移
clientTop:返回元素边框的大小
clientLeft:返回元素左边框的大小
clientWidth:返回自身包括padding、内容区的宽度,不含边框，返回数值不带单位
clientHeight:返回自身包括padding、内容区的高度,不含边框，返回数值不带单位
scollHeight:返回自身实际高度，不含边框，返回数组不带单位
scrollWidth:返回自身实际的宽度，不含边框，返回数值不带单位
scrollLeft:返回被卷去的左侧距离，返回数值不带单位
scrollTop返回被卷去的上侧距离

53.Audio/Video的方法和事件有？

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道。
canPlayType()	检测浏览器是否能播放指定的音频/视频类型。
load()	重新加载音频/视频元素。
play()	开始播放音频/视频。
pause()	暂停当前播放的音频/视频。

事件：

54.屏幕的尺寸标准

超小屏幕（手机）	小屏幕（平板）	中等屏幕（桌面）	大屏幕（桌面）
<768px	>=768	>=992	>=1200
.col-xs-	.col-sm-	.col-md-	.col-lg-

55.disabled和readonly

共同之处，比如都设为true，则form属性将不能被编辑

如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。
而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

设置readonly = true，页面上无法修改内容，但是可以通过JavaScript修改,内容会被提交
设置disabled = true,无法修改内容，也不会被提交

56.inline/block/inline-block

内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。
块级元素时可以控制宽和高、margin等，并且会换行。

1. inline ：使用此属性后，元素会被显示为内联元素，元素则不会换行
inline是行内元素，同行可以显示，像span、font、em、b这些默认都是行内元素，不会换行，无法设置宽度、高度、margin、border

2. block ：使用此属性后，元素会被现实为块级元素，元素会进行换行。
block，块元素，div、p、ul、li等这些默认都是块元素，会换行，除非设置float

3. inline-block ：是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。(IE6不支持)
inline-block，可以同行显示的block，想input、img这些默认就是inline-block，出了可以同行显示，其他基本block一样

57.Canvas和SVG

Canvas：

canvas绘制出来的图形是标量图,不能被引擎抓取

1.依赖分别率

2.弱的文本渲染能力

3.能够以.png和.jpg格式保存结果图像

4.最适合图像密集型的游戏，其中的许多对象会被频繁重绘

5.不支持事件处理器

SVG：

svg绘制出来的图形是矢量图，可以被引擎抓取

1.不依赖分辨率

2.支持事件处理器

3.最适合带有大型渲染区域的应用程序（比如谷歌地图）

4.复杂度高会减慢渲染速度

5.不适合游戏应用

58.utf-8/GBK/iso-8859-2编码

UTF-8（8-bit Unicode Transformation Format，万国码）。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。UTF-8、UTF-16、UTF-32都是将数字转换到程序数据的编码方案。

GBK是汉字编码，是双字节码，可表示繁体字和简体字。

ISO8859-2 字符集，也称为 Latin-2，收集了东欧字符。

Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案。目前的Unicode字符分为17组编排，0x0000 至 0x10FFFF，每组称为平面（Plane），而每平面拥有65536个码位，共1114112个。然而目前只用了少数平面。

59.enctype

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码

application/x-www-form-urlencoded 在发送前编码所有字符（默认）

mutipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

text/plain 空格转换为“+”加号，但不对特殊字符编码

60.提高dom元素操作效率

1.处理列表元素的点击事件时，使用事件代理（事件代理是根据事件冒泡原理，使用事件代理可以减少注册事件,节省内存）

2.插入大量DOM元素时，使用innerHTML替代逐个构建元素（innerHTML比creaetElement效率要高）

3.DocumentFragment替代多次appendChild操作（将元素放入代码片段中一次插入比你创建一个插入一个效率高）

61.XML

1.每个合格的XML都有唯一的根元素

2.XML的格式上是要求严格的，每个元素的开闭必须完整，不允许交叉开闭

3.XML通常用于WebService中用来做数据交换的标准

4.XML中元素是大小写敏感的

5.XML中的数据可以通过XPATH检索查询

62.hidden

1.hidden属性可以让浏览器不渲染某个元素，该元素处于不可见状态，但元素中的内容还是浏览器创建的，也就是说页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。

2.spellcheck设置为true可以对用户输入进行拼写和语法检查

3.某个元素使用tabindex属性后，该元素可以通过tab键来获取焦点

程琬清君

关注

16
点赞
踩
48

收藏

觉得还不错? 一键收藏
0
评论
前端笔试题

1.选择器的优先级（从上往下依次降低）是：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。作为style属性写在元素内的样式 id选择器类选择器标签选择器通配符选择器浏览器自定义的样式2.下述有关 border:none 以及 border:0 的区别，描述错误的是？1.当定义了border:none,即隐藏了边框的显示，实际就是边框宽度为0.2.当定义边框时，仅设置边框宽度也可以达到显示的效果解释：1.当定义border:none时，.
复制链接

扫一扫