为什么js要放在body最下面二css要放在head中？

浏览器拿到css就知道该怎么渲染HTML了，如果把css放在body下面则会先按照默认样式进行渲染，当css加载完成的时候会按照css的样式再渲染一遍，即发生了reflow。由于js会阻塞代码执行，所以js一般放在body最下面，还有一个原因：js放在最下面的时候就可以取得页面中所有的元素了。

window.onload和DomContentLoaded有什么区别

前者是页面的资源加载完成（包括图片、视频），后者是DOM渲染完即可，此时图片、视频可能还没加载完。

图片懒加载的实现原理

先用一张默认的图片代替（这张默认的图片因为使用太频繁，浏览器可能缓存了）然后再更改img的src属性。
image.png

跨域

可以跨域的3个标签：

  • img:可以用于打点统计，统计网站可能是其他域，使用img标签有一个好处：没有浏览器兼容性问题
  • link：可以使用CDN
  • script:可以使用CDN,可以JSONP

本地3000端口开启了一个服务：

1
2
3
4
5
6
7
8
const http = require('http')

http.createServer((req, res) => {
    res.end(JSON.stringify({
        now: new Date().toString()
    }))
}).listen(3000)
console.log('api server started at 3000')

编写页面如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域</title>
</head>

<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        axios.get('http://127.0.0.1:3000')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    </script>
</body>

</html>

image.png

使用JSONP实现跨域，服务端和客户端都进行一个很小的改造：

1
2
3
4
5
6
7
const http = require('http')

http.createServer((req, res) => {
    const data = `callback(${JSON.stringify({ now: new Date().toString() })})`
    res.end(data)
}).listen(3000)
console.log('api server started at 3000')

客户端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域</title>
</head>

<body>
    <script>
        function callback(data) {
            console.log('get data', data)
        }
    </script>
    <script src="http://127.0.0.1:3000"></script>
</body>

</html>

image.png

以上是原理部分，就是服务器返回的数据包了一层函数，客户端有个同样名字的函数去接收。实际的开发中有很多现成的库。

页面有 100w 个任务需要执行，怎么保证页面不卡顿

主要是使用分治的思想，下面是其实现方案：

  1. requestIdleCallback
  2. web worker: 缺点是不能操作dom
  3. setTimeout: 自己去控制时间，每隔一小段执行一下

HTML Collection 和 Node List 区别

它们都是 ArrayLike，HTMLCollection 是实时的，NodeList 不是实时的。

1
2
const htmlCollection = document.getElementsByClassName('item');
const nodeList = document.querySelectorAll('.item');

document.getElementsByTagName('*') 可以获得所有元素。document 上还有一些特殊的集合。document.images document.forms document.links 分别代表页面中所有的图片、表单、链接。