每日思考（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，是跨域资源共享的官方解决方案

• 步骤如下：

  1. 创建script元素 请求对应路径
  2. 将回调函数挂载全局
  3. 将script元素挂载到页面上
  4. script请求到的代码会执行挂载在全局的回调函数 并传递响应值
  5. 当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 多路复用可以解决域名发散的问题；