前端知识点二

一世迷离
81 阅读4分钟

11、宏任务和微任务

macroTask

setTimeout、setInterval 、setImmediate、I/O、UI Rendering

microTask

Process.nextTick（Node独有）、Promise、Object.observe(废弃)、MutationObserver

执行顺序

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
})

setTimeout(() => {
  console.log(6);
})

console.log(7);

带你彻底弄懂eventLoop 一次弄懂eventLoop

12、闭包

  1. 模拟私有变量，在函数外部间接访问函数内部的变量
  2. 私有变量一直保存在内存中，不被销毁
  3. 内部变量不会污染全局命名空间
  4. 闭包在处理速度和内存消耗方面对脚本性能具有负面影响
let count = (function(){
  let sum = 10
  function change(x){
    return sum += x
  }
  return change
})();
console.log(count(10)) //20

13、js 事件冒泡和事件捕获

事件传递有两种方式：冒泡与捕获。 事件传递顺序：捕获阶段=>目标阶段=>冒泡阶段 匿名函数事件绑定无法删除

//事件绑定
dom.addEventListener('click', fn, false)  // 默认为 false（冒泡） true（捕获）
dom.removeEventListener('click', fn, false)
dom.attachEvent('onclick', fn)        //IE
dom.detachEvent('onclick', fn)      //IE

//阻止冒泡和捕获
event.cancelBubble=true;
event.stopPropagation()

//阻止默认事件传播
event.preventDefault()
window.event.returnValue = false;

14、addEventListener 和 attachEvent 区别

  1. attachEvent 为IE下的事件绑定函数,不支持捕获
  2. attachEvent 指向 window, 有内存泄漏问题，全局作用域中运行 addEventListener 指向obj，依附于元素的作用域中运行
  3. 都可以绑定多个事件处理函数，同一个事件处理函数可以绑定多次

15、事件委托

利用冒泡的原理，把事件加到父级上，触发执行效果。 1、提高性能，不需要为每个子元素添加事件处理函数 2、新添加的元素也可以通过之前的事件进行触发 3、事件基于冒泡，对于不冒泡的事件不触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<ul>
				<li class="li1" data-url="1111">11</li>
				<li class="li2" data-url="2222">22</li>
				<li class="li3" data-url="3333">33</li>
				<li class="li4" data-url="4444">44</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript"> 
		document.getElementsByTagName('ul')[0].addEventListener('click', function(e){
			console.log(e) 
			if(e.stopPropagation){
				e.stopPropagation()
			}else{
				e.cancelBubble = true
			}
			console.log(e.toElement.dataset.url)  ///1111 2222
		}, false)
	</script> 
</html>

16、（本地缓存）请描述一下 cookies，sessionStorage 和 localStorage 的区别？

Web Storage有两种形式：

LocalStorage（本地存储）和sessionStorage（会话存储）。

这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。

  1. 与cookie不同的是：Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此相比cookie来说能够存储更多的数据，大概5M左右。
  2. LocalStorage和sessionStorage功能上是一样的，但是存储持久时间不一样。LocalStorage：浏览器关闭了数据仍然可以保存下来，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页）；sessionStorage：数据存储在窗口对象中，窗口关闭后对应的窗口对象消失，存储的数据也会丢失。 注意：sessionStorage 都可以用localStorage 来代替，但需要记住的是，在窗口或者标签页关闭时，使用sessionStorage 存储的数据会丢失。
  3. 使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法
  4. localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。

17、简述一下你对HTML语义化的理解。

  1. HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；

  2. 即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的；

  3. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；

  4. 使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

18、Html语义化标签

<ul> <li> <title> <mark> <h1> <small> <strong>

新增 <header> <nav> <aside> <footer> <section> <article> <main>

19、你能描述一下渐进增强和优雅降级之间的不同吗?

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

（一开始保证最基本的功能，再改进和追加功能）

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

（一开始就构建完整的功能，再针对低版本浏览器进行兼容。）

20、前端需要注意哪些 SEO

  1. 使用title、description、keywords属性及合理的描述

  2. 语义化标签让搜索引擎更好的理解文章结构

  3. img标签添加alt属性

  4. 不使用iframe标签

  5. 服务器渲染，页面内容尽量不要使用js输出

  6. 页面内容尽可能靠前，搜索引擎抓取有长度限制，保证抓取到内容

avatar
文章
阅读
粉丝