异步、DOM、事件、页面加载和优化面试题及知识点简单总结

异步与单线程知识点：

什么是异步(对比同步)

同步：一行一行按顺序依次执行代码，当前代码任务耗时执行会阻塞后续代码的执行。这是一种典型的请求-响应模型，当请求调用一个函数或方法后，需等待其响应返回，然后执行后续代码。
异步：在等待当前任务的响应返回之前，可以继续执行后续代码，即当前执行任务不会阻塞后续执行。异步编程，不同于同步编程的请求-响应模式，其是一种事件驱动编程，请求调用函数或方法后，无需立即等待响应，可以继续执行其他任务，而之前任务响应返回后可以通过状态、通知和回调来通知调用者。

单线程

一个浏览器进程中只有一个JS的执行线程，同一时刻内只会有一段代码在执行

异步使用场景

定时任务： setTimeout setInterval
网络请求： ajax 动态<img>加载
事件绑定

//单线程就是一次只能做一件事 
//异步：不会阻塞
console.log(100)
setTimeout(function (){
  console.log(200)
},1000)
console.log(300)
//打印100 300 1秒后打印200


//同步：会阻塞
console.log(100)
alert(299)          //程序会卡在这里
console.log(300)


//ajax示例
console.log('start')
$.get('./data.json', function (data) {
  console.log(data)
})
console.log('end')
//先打印start 再打印end 最后get请求完成后打印data


//<img>加载示例
console.log('start')
var img = document.createElement('img')
img.onload = function () {
  console.log('loaded')
}
img.src = '/xx.jpg'
console.log('end')
//start ==> end ==> img.src = '/xx.jpg' ==>loaded


//事件绑定示例
console.log('start')
document.getElementById('btn1').addEventListener('click', function () {
  alert('clicked')
})
console.log('end')
//start ==> end ==> alert('clicked')

面试题

同步异步的区别
同步会阻塞代码执行，异步不会(如alert是同步 setTimeout是异步)
setTimeout题目

console.log(1)
setTimeout(function () {
  console.log(2)
}, 0)
console.log(3)
setTimeout(function () {
  console.log(4)
}, 1000)
console.log(5)

1 3 5 2 一秒后4 遇到setTimeout就放在后面

DOM BOM知识点

DOM节点操作

DOM节点本质上是可识别，可操作的js对象

获取DOM节点

var div = document.getElementById('div')//元素
var divList = document.getElementByTagName('div')//集合
console.log(divList.length)
console.log(divList[0])
var div = document.getElementByClassName('div')//元素
var pList = document.querySelectorAll('p')//集合

Property js对象属性

var pList = document.querySelectorAll('p)
var p = pList[0]
console.log(p.style.width) //获取样式
p.style.width = '100px'    //修改样式
console.log(p.classNmae)   //获取class
p.className = 'p1'         //修改class
//获取nodeName和nodeType
console.log(p.nodeName)
console.log(p.nodeType)

Attribute html标签

var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data')
p.setAttribute('data', 'data-json')
p.getAttribute('style')
p.setAttribute('style', 'font-size: 30px')

DOM结构操作

新增节点
获取父,子节点
删除节点

BOM操作

navigator

var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

screen
screen.width

screen.height

location
location.href

location.protocol //http https
location.host
location.pathname
location.search
location.hash

history
history.back()

history.forWard()

面试题

DOM操作常用api
获取DOM节点节点的property attribute

获取父，子节点
新增删除节点

DOM节点的attr和property区别
property是一个js对象的属性

attribute是html标签的属性

检测浏览器类型
navigator.userAgent

事件知识点

通用事件绑定

//标准方法
var btn = document.getElementById('btn1')
btn.addEventListener('click', function (event) {
  console.log('clicked')
})


//封装事件
function bindEvent(elem, type, fn) {
  elem.addEventListener(type, fn)
}

var a = document.getElementById('link')
bindEvent(a, 'click', function(e) {
  e.preventDefault()    //阻止默认行为
  alert('clicked')
})

事件冒泡

点击p1 alert激活若没有e.preventDefault，事件将继续向上冒泡直到找到body中的alert取消

<div id="div1">
  <p id="p1">激活</p>
  <p id="p2">取消</p>
  <p id="p3">取消</p>
  <p id="p4">取消</p>
</div>
<div id="div2">
  <p id="p5">取消</p>
  <p id="p6">取消</p>
</div>
<script type="text/javascript">
  function myBindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
  }
  var p1 = document.getElementById('p1')
  var body = document.body
  myBindEvent(p1, 'click', function (e) {
    e.stopPropagation() //阻止冒泡
    alert('激活')
  })
  myBindEvent(body, 'click', function (e) {
    alert('取消')
  })
</script>

事件代理

点击每个a标签弹出相应的内容

<div id="div1">
  <a href="#">a1</a>
  <a href="#">a2</a>
  <a href="#">a3</a>
  <a href="#">a4</a>
  <!-- 会随时新增更多a标签 -->
</div>
<script type="text/javascript">
  function myBindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
  }
  var div1 = document.getElementById('div1')
  myBindEvent(div1, 'click', function (e) {
    var target = e.target //获取要绑定事件的元素
    if (target.nodeName === 'A') {
      alert(target.innerHTML)
    }
  })
</script>

面试

编写一个通用的事件监听函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>通用事件监听函数</title>
</head>

<body>
  <div id="div1">
    <a href="http://baidu.com" id="link1">baidu</a>
    <a href="http://baidu.com" id="link2">baidu</a>
    <a href="http://baidu.com" id="link3">baidu</a>
    <a href="http://baidu.com" id="link4">baidu</a>
    <p id="p1">激活</p>
    <p id="p2">取消</p>
  </div>
  <div id="div2">
    <p id="p3">取消</p>
    <p id="p4">取消</p>
  </div>
  <script>
    function bindEvent(elem, type, selector, fn) {
      if (fn == null) {
        fn = selector
        selector = null
      }
      elem.addEventListener(type, function (e) {
        var target
        if (selector) {
          //是代理的时候
          target = e.target
          if (target.matches(selector)) {
            fn.call(target, e)
          }
        } else {
          fn(e) //不是代理的时候
        }
      })
    }


    //使用代理
    var div1 = document.getElementById('div1')
    bindEvent(div1, 'click', 'a', function (e) {
      e.preventDefault()
      console.log(this.href)
    })

    //不使用代理
    var p1 = document.getElementById('p1')
    bindEvent(p1, 'click', function (e) {
      console.log(p1.innerHTML)
    })
  </script>
</body>

</html>

事件冒泡过程
DOM树形结构事件冒泡阻止冒泡
对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
事件代理

ajax知识点

XMLHttpRequest
readyState状态码

未初始化还没有调用send()方法

1 载入已经调用send()方法正在发送请求
2 载入完成 send()方法执行完成已经接收到全部响应内容
3 交互正在解析响应内容
4 完成响应内容解析完成可以在客户端调用

status状态码

请求成功

3xx 需要重定向浏览器直接跳转
4xx 客户端请求错误
5xx 服务器端错误

跨域
浏览器的同源策略不允许ajax访问其他域的接口

协议(http)、域名(baidu.com)、端口(80)有一个不同就算跨域
可以跨域的三个标签 img script link
jsonp:利用src属性引入其他域下的js，需要后端返回数据是一个函数调用，处理后的数据作为函数的参数传入,实现跨域访问接口。
服务器端设置http header:
//注意：不同后端语言的写法可能不一样
//第二个参数填写允许跨域的域名称，不建议直接写"*"
response.setHeader('Access-Control-Allow-Origin','http://a.com,http://b.com');
response.setHeader('Access-Control-Allow-Headers','X-Request-With');
response.setHeader('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');
//接受跨域的cookie
response.setHeader('Access-Control-Allow-Credentials','true');

页面加载知识点

加载资源形式：
输入url 加载html，加载html中的静态资源 script link img
加载资源过程
浏览器根据dns服务器得到域名的ip地址

向这个地址发送http请求
服务器收到，处理，返回请求
浏览器得到返回内容

浏览器渲染页面过程
根据 HTML 结构生成 DOM Tree

根据css生成css节点
将dom和css节点整合成渲染树
根据渲染树开始渲染和展示
遇到script标签时会阻塞渲染

性能优化知识点

webpack打包、使用cdn、服务端渲染ssr、图片懒加载、事件节流、事件代理

面试题

手写ajax

var xhr = XMLHttpRequest()
xhr.open("GET","/api", false)
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    if (xhr.readyState == 200) {
      console.log(xhr.responseText)
    }
  }
}
xhr.send(null)

跨域方法

服务器端设置http header

请描述一下cookie，sessionStorage，和localStorage的区别
容量区别，cookie为4k，localStorage和sessionStorage为5M

cookie每次请求都会被携带在ajax中，local Storage和session Storage不会被携带只作为存储使用

window.onload 和 DOMContentLoaded区别
前者在页面全部资源加载完才会执行包括图片视频等

后者在dom渲染玩即可执行此时图片视频还未加载完

异步、DOM、事件、页面加载和优化面试题及知识点简单总结

异步与单线程知识点：

什么是异步(对比同步)

单线程

异步使用场景

面试题

DOM BOM知识点

DOM节点操作

DOM结构操作

BOM操作

面试题

事件知识点

通用事件绑定

事件冒泡

事件代理

面试

ajax知识点

页面加载知识点

性能优化知识点

面试题

imgwho

引用和评论

html5语义标签以及使用nodejs request库抓取网站数据

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合