为什么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>

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

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

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

requestIdleCallback
web worker: 缺点是不能操作dom
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 分别代表页面中所有的图片、表单、链接。

防抖和节流

防抖(Debounce)：事件触发后延迟执行，若期间再次触发则重新计时。—— 搜索框输入、窗口 resize、按钮防止重复点击

节流(Throttle)：事件触发后在规定时间内只执行一次。无视触发频率，按照指定的间隔时间执行。—— 滚动事件、鼠标移动追踪、Canvas 绘制。

场景	推荐方案	原因
用户输入场景（搜索、表单）	防抖	只需要在输入停止后处理一次，无需响应中间过程
持续触发场景（滚动、拖拽）	节流	需要按固定频率响应，确保操作流畅性
按钮防重复提交	防抖（立即执行）	点击后立即反馈，同时防止短时间内多次提交
高频事件性能优化	节流	限制事件处理频率，避免浏览器卡顿（如 window.resize 用节流可能比防抖更流畅）