每日思考（2020/03/03）

题目概览

渐进式渲染是什么
margin和padding使用的场景有哪些？
JSONP的原理是什么？解决什么问题？
对域名收敛和域名发散的理解

题目解答

渐进式渲染是什么

渐进式渲染是用来提高网页性能，以尽快呈现页面的技术
图片懒加载——页面上的图片不会一次性的全部加载，当用户滚动页面到图片位置时，JS将加载并显示图像。
确定显示内容的优先级——为了尽快将页面呈现给用户，页面只将一小部分CSS，脚本，内容加载，然后在延时加载或者监听事件来加载。
异步加载HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。

margin和padding使用的场景有哪些？

Margin:包括margin-top，margin-right，margin-bottom，margin-left，控制块级元素之间的距离，他们是透明不可见的，可以分别给其四个方向赋值，也可以简写，其中属性值可以是具体数字，也可以是百分比，当用百分比时，百分比参考父元素的宽度
Padding:包括padding-top，padding-right，padding-bottom，padding-left，控制块级元素内部内容content和border之间的距离
使用margin值的情况：需要在border外侧添加空白时；空白处不需要背景色时；上下相连得两个盒子之间的空白需要相互抵消时，如15px+20px得margin，将得到20px的空白。（margin折叠）；需要使用负值对页面布局时（margin值可以取负值，padding不行）
使用padding时的情况：需要在border内侧添加空白时；空白处需要背景（色）时；上下相连的两个盒子之间的空白，希望等于两者之和时。如15px＋10px将得到25px的空白
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不干扰；padding用于元素与内容之间的间隔，让内容与元素之间有一段距离。在怪异盒模型中，一个块的总宽度受margin影响但不受padding影响

JSONP的原理是什么？解决什么问题？

原理：JS 动态插入 script 并将 src 指向后端 API，后台返回 json 并使用协定的 callback 函数把 json 包起来。浏览器以 JS 内容解析执行返回的内容，回调函数得以被调用并传入了返回的 json 对象
解决问题：解决的是第一版 XHR 无法发送跨域请求的问题，虽然曾经一度被大厂使用，但是 hack 痕迹满满，并且不支持 post 请求。XHR 2.0 以及 Fetch API 如今兼容性都不错，他们支持 CORS HTTP headers，是跨域资源共享的官方解决方案

步骤如下：

创建script元素请求对应路径
将回调函数挂载全局
将script元素挂载到页面上
script请求到的代码会执行挂载在全局的回调函数并传递响应值
当script加载完毕移除该元素

function JSONP(url, params, callback) {
    const script = document.createElement("script");
    script.src = url + parseObjToParams({...params, callback: "jsonpCallback"});
    document.body.appendChild(script);
    window.jsonpCallback = callback;
    script.onload = () => {
        document.body.removeChild(script)
    }
}

JSONP("http://localhost:3019/asd", {name: "vijay"}, (data) => {
    console.log(data);
});

//server
app.use("/asd", (req, res, next) => {
    res.jsonp({ user: 'tobi' })
});

对域名收敛和域名发散的理解

域名发散：就是为了突破浏览器对于同一域名并发请求数的限制，chrome浏览器同一时刻只能发送6个http请求，而且一个http1.1还有对头堵塞链，使用域名发散为同一个服务申请多个域名，从而可以一定程度上提高并发量。对于淘宝这种多图网站有很大提升。
域名收敛：就是将静态资源放在一个域名下不进行发散，这主要是为了适应移动端的发展需求；通常DNS是一个开销较大的操作，而移动端由于网络带宽和实时性、资源等的限制，这些开销对移动端的用户体验是致命的，因此需要进行域名收敛；而且后面的http2 多路复用可以解决域名发散的问题；