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

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

window.onload和DomContentLoaded有什么区别

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

图片懒加载的实现原理

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

跨域

可以跨域的3个标签：

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

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

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')

编写页面如下：

<!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>

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

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')

客户端：

<!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>

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

前端杂谈

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

window.onload和DomContentLoaded有什么区别

图片懒加载的实现原理

跨域