浏览器渲染页面过程

HTML解析：浏览器首先解析收到的HTML文档，构建好DOM树。（DOM树是一种以层次结构表示网页元素的树形结构）
CSS解析：浏览器会解析样式表，构建CSS对象模型。（CSSOM树表示了CSS规则和样式的层次结构，与DOM树相对应）
构建渲染树：将DOM树和CSSOM树结合起来，生成渲染树。
布局计算：浏览器会遍历渲染树，计算每个元素在视口中的位置和大小，确定布局。这个阶段也就是回流。
绘制页面：浏览器使用计算出的布局信息，将渲染树的每个节点转换为屏幕上的实际像素。这个阶段也被称为重绘。
展示内容：重绘完成后展示到用户界面即可

网页性能优化

压缩和合并资源：减少HTTP请求，减小资源文件大小（压缩CSS、JS和图片资源，将多个小文件合并成一个大文件）
缓存静态资源：使用浏览器缓存和CDN技术，可以让已经下载过的静态资源在下次请求时直接使用本地缓存或者离用户最近的服务器
- CDN技术指通过在全球分布式的服务器群组成的网络，将互联网上的内容快速分发给用户的一种技术，比如网页、图片、视频。
- 通常CDN服务提供商会将用户请求的内容缓存到离用户最近的服务器上。
减少DOM操作：DOM操作会消耗很大的性能，减少DOM节点数量
JS性能优化：合理使用缓存、异步加载、避免递归调用等方法来提高JS代码的执行效率
图片优化：合理使用图片格式，使用懒加载方式来优化图片加载
及时释放内存：在JS代码中，应该注意及时释放无用的变量、对象和事件，避免内存泄漏
合理使用CSS和布局：尽量避免使用复杂的CSS选择器和属性，并优化布局，避免频繁的重排和重绘

跨域问题

JSONP：动态创建 <script> 标签，src指向没有跨域限制，将访问的数据包装在一个回调函数中，只支持get请求

<button id="btn">jsonp</button>
<script>
    function test(data) {
        cb = JSON.stringify(data)
        console.log(cb)
    }
    btn.onclick = () => {
        let obj = document.createElement('script')
        obj.src = './obj.txt'
        document.body.appendChild(obj)
        // 删除新创建的script节点
        obj.onload = function () {
            obj.remove()
        }
    }
</script>

CORS（跨域资源共享）：后端完成。在响应头中添加一些特殊的字段，告诉浏览器允许跨域访问。比如 Access-Control-Allow-Origin: *

// 如果后端已经设置允许任何跨域请求，前端需要怎么做
// 找一个网站的开放接口，比如说卖座网的城市接口：
btn.onclick = () => {
    fetch('https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=5873338', {
        headers: {
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16835243784524425923788801","bc":"110100"}',
            'X-Host': 'mall.film-ticket.cinema.list'
        }
    }).then(res => res.json()).then(res => {
        console.log(res) // data来喽
    })
}
// 请求头中的 X-Client-Info 与 X-Host 必不可少的帮助服务器正确处理请求的信息，在接口的请求标头中就有

代理服务器：服务器端设置一个代理服务器，将前端请求发送到代理服务器，再由代理服务器向目标服务器发送请求，并将响应传给前端

HTTP针对性总结：浏览器渲染页面过程、网页性能优化、跨域问题

浏览器渲染页面过程

网页性能优化

跨域问题