2020前端知识点汇总(三)

1、隐藏元素的几种方法

display:none;
visibility:hidden;
opacity:0;
position:absolute;   left:-1000;

2、回答以下输出的类型

alert(typeof(“undefined”));//string
alert(NaN == undefined);//false
alert(NaN == NaN);//false
alert(typeof(null));//object
alert(typeof(NaN));//number
alert(typeof(undefined));//undefined

3、浏览器页面有哪三层构成，分别是什么，作用是什么?

• 浏览器页面构成：结构层、表示层、行为层
• 分别是：HTML、CSS、JavaScript
• 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

4、image和canvas在处理图片的时候有什么区别？

• image是通过对象的形式描述图片的。
• canvas通过专门的API将图片绘制在画布上。

5、响应式布局的时候，轮播图使用两张不同的图片去适配大屏幕和超小屏幕，还是一张图片进行压缩适配不同终端，说明原因？

• 最好使用两张不同大小的图片去适配大屏幕和超小屏幕，这样可以针对不同设备的屏幕大小，来加载响应的图片，减少超小屏幕设备的网络流量消耗，加快响应速度，同时防止图片在大屏幕下分辨率不够导致失真的问题。

6、简述同步和异步的区别

• 同步是阻塞模式，异步是非阻塞模式。
• 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
• 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

7、用jquery和原生js获取元素中的内容

 //JS
document.getElementById(“div1”).innerHTML;
document.querySelector(“#div1”).innerText;
 //JQ:
$(“#div1”).html()

8、Ajax的原理

• Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
• XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

9、如何通过stream实现一个文件的复制

var fs = require("fs");
var rs = fs.createReadStream(“1.jpg");
var ws = fs.createWriteStream("2.jpg");
rs.pipe(ws);

10、什么是语义化的HTML?

• 直观的认识标签，对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
• html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析，在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

11、用原生js封装一个添加监听事件的兼容写法

function addEvent(obj,event,fn){
     //现代：addEventLister 不用加on
     //ie：touchEvent 需要加on
     if (window.addEventListener){
         obj.addEventListener(event,fn);
     }else{
         obj.attachEvent("on"+event, fn);
     }
}

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

• 优雅降级:
  Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
• 渐进增强：
  从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

13、闭包是什么？优缺点？

• 闭包：能够读取其他函数内部变量的函数。（应用场景：要获取某函数内部的局部变量）
• 闭包的优点：
  1.能够读取函数内部的变量
  2.让这些变量一直存在于内存中，不会在调用结束后，被垃圾回收机制回收
• 闭包的缺点：
  正所谓物极必反，由于闭包会使函数中的变量保存在内存中，内存消耗很大，所以不能滥用闭包，解决办法是，退出函数之前，将不使用的局部变量删除。

14、描述URI和URL区别？

• URI标记了一个网络资源，仅此而已； URL标记了一个WWW互联网资源（用地址标记），并给出了他的访问地址。
• URL是URI的子集，所有的URL都是URI，但不是每个URI都是URL，还有可能是URN

15、import，require区别？

• require是在运行时加载，而import是在编译时加载
• 规范不同，require是CommonJS/AMD规范，import是ESMAScript6+规范

16、如何防止Cookie不安全？如何阻止XSS攻击？

• Cookie：将cookie的内容进行加密，加密后的内容在加入随机数
• xss：将能被转换为html的输入内容，再写代码时改为innerText ，而不使用inner HTML

17、给出一个对象遍历属性值

for(var k in obj){}

18、使用node构建一个服务器并对向”/post”发起的post请求进行处理，要求拿到post请求传输的数据（不包括文件上传）

var http = require("http");
var queryString = require("querystring");
var server = http.createServer(function (req,res) {
	if(urlObj.pathname == "/post"){
		var str = "";
	    req.on("data",function (chunk) {
			str+=chunk;
	    });
	    req.on("end",function () {
	        var query = queryString.parse(str);
	        console.log(query);
	    })
	    res.end("你请求的地址是"+urlObj.pathname);
	}
});
server.listen(8080);

19、px和em的区别？

• px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
• 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

20、解释jsonp的原理，以及为什么不是真正的ajax？

• 动态创建script标签，回调函数
• Ajax是页面无刷新请求数据操作

21、Javascript的事件流模型都有什么?

• “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
• “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
• “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

22、回答以下代码，alert的值分别是多少？

<script>
     var a = 100;  
     function test(){  
        alert(a);  
        a = 10;  //去掉了var 就变成定义了全局变量了
        alert(a);  
	}  
	test();
	alert(a);
</script>

答案： 100， 10， 10
23、javaScript的2种变量范围有什么不同？

• 全局变量：当前页面内有效
• 局部变量：函数方法内有效

24、看下面代码，给出输出结果。

for(var i = 1; i <= 3; i++){  
//建议使用let 可正常输出i的值
  setTimeout(function(){
      console.log(i);   
  },0);
};

答案：4 4 4。
原因：Javascript事件处理器在线程空闲之前不会运行

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

• defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js