前端一些记不太住的知识点加深印象

来源：互联网发布：美国劳工部就业数据编辑：程序博客网时间：2024/06/01 07:41

1.简述document.write和innerHTML的区别。

答：document.write只能重绘整个页面，innerHTML可以重绘页面的某一部分。

2.HTML的Doctype作用?严格模式和混杂模式如何区分？它们有何意义？

答案：<!DOCTYPE>声明位于文档的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

严格模式的排版和JS运作模式是以该浏览器支持的最高标准执行。在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

3.CSS引入的方式有哪些? link和@import的区别是?
内联内嵌外链导入
区别：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可

4.你如何对网站的文件和资源进行优化?期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

5.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)

6.javascript的typeof返回哪些数据类型

Object number function boolean underfind

typeof()知道是不是对象，而instanceof可以知道是不是哪一种对象

7.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== ===）

8.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

9.谈Ajax的Get和Post的区别
Get方式:
用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。
Post方式:
当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。
总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之。

10.理解call和apply。

二者的作用完全一样，只是接受参数的方式不太一样。

call和apply是为了动态改变this而出现的，当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

就可以通过 func1.call(this, arg1, arg2); 或者 func1.apply(this, [arg1, arg2]); 来调用。其中 this 是你想指定的上下文，他可以任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

11.json格式非常受欢迎，而解析json的方式通常用JSON.parse()但是eval()方法也可以解析，这两者之间有什么区别呢？

JSON.parse()之可以解析json格式的数据，并且会对要解析的字符串进行格式检查，如果格式不正确则不进行解析，而eval()则可以解析任何字符串，eval是不安全的。

12.什么是事件委托？

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处：1.提高性能;2.新添加的元素还会有之前的事件

13.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有 $().ready(function)

1.执行时间
        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
        $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同
         window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
         $(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法
         window.onload没有简化写法
         $(document).ready(function(){})可以简写成$(function(){});

14.”==”和“===”的不同
前者会自动转换类型
后者不会

15.JS基本类型和引用类型。

基本类型：Undefined、Null、Boolean、Number、String

复杂类型：Object

引用类型：Object、Array、Function、Date、RegExp

16.typeof可以检测基本类型包括 undefined, string, number, boolean，但是对于检测对象就不靠谱了。不只是Array,javascript中的对象,包括 Date, String, Boolean, Number, Object, Function, Array, RegExp, Error 使用typof只会返回 "object"。

17.JS中为什么没有函数重载？

java中：通过方法签名来唯一确定一个方法。所谓方法签名包括：方法名、参数类型和参数顺序、参数个数这几个要素。所以，如果两个方法名称相同，但是只要其他要素(例如参数类型、参数个数)不同，编译器就会认为是不同方法。从而可以存在同名的不同方法，导致了重载现象。

JavaScript：函数(或对象方法)完全靠函数名称唯一确定，JS不将参数列表作为区分函数的依据。更关键的是，在JS中，函数是作为一种特殊对象类型存在的，函数的名字只是一个普通的变量，本质与var a = 1中的变量a没什么区别。所以如果你先后定义了两个同名函数，实际上相当于先后将两个函数对象绑定到了同一个变量上，所以后者必然覆盖前者，不会共存，也自然不存在重载了。

当然，JS完全可以设计成支持重载，但是为什么不支持呢？我觉得，可能跟JS一开始的目标就是要设计成一种简单的、动态类型的语言有关。增加了重载，就没那么简单了，而且参数还不能动态传递了。

18split() join() 的区别
前者是将字符串切割成数组的形式，参数用来分割的依据，会被删除；后者是将数组转换成字符串，参数会加在每个数组项中间形成一个字符串。

19.阻止事件冒泡和默认事件。

事件冒泡：IE--cancelBubble；非IE--stopPropagation

默认事件：IE--returnValue ；非IE--preventDefault

1..停止事件冒泡

JavaScript代码

//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
return false;

2.阻止浏览器的默认行为

JavaScript代码

//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.preventDefault )
//阻止默认浏览器动作(W3C)
e.preventDefault();
else
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
return false;

20、编写一个数组去重函数。

第一种常规方法：

1.构建一个新的数组存放结果

2.for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比

3.若结果数组中没有该元素，则存到结果数组中

第二种稍微巧妙的方法：

1.先将原数组进行排序

2.检查原数组中的第i个元素与结果数组中的最后一个元素是否相同，因为已经排序，所以重复元素会在相邻位置

3.如果不相同，则将该元素存入结果数组中

第三种推荐的方法：

1.创建一个新的数组存放结果

2.创建一个空对象

3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。

说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。

function oSort(arr){
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++){
if(!result[arr[i]]){
newArr.push(arr[i]);
result[arr[i]]=1;
}
}
return newArr;
}

21.position的值， relative和absolute分别是相对于谁进行定位的？

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

22.渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

23.说说你对语义化的理解？

1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

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

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放(Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

25.让一个元素垂直水平居中的方法。

第一种方法:

div.box{

weight:200px;

height:400px;

position:absolute;

left:50%;

top:50%;

margin-left:-100px;

margin-top:-200px;

}

*兼容性好;缺点:必须知道元素的宽高

-------------

第二种方法：

div.box{

weight:200px;

height:400px;

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器

---------------

第三种方法

div.box{

weight:200px;

height:400px;

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

}

26.什么是闭包？有什么用途？

内层函数调用外层函数的变量。

如果在一个函数里创建另外一个函数并且内部的函数使用到了外面的函数的变量那么就构成一个闭包, 这个外面的函数的变量的值会为闭包的函数一直保存直到闭包函数被内存回收掉为止

用途：1、匿名自执行函数：我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象；

2、结果缓存：闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。

阅读全文

0 0