前端自测题目查缺补漏3

1.页面渲染过程中遇见js文件怎么办

js文件的加载会阻塞cssom、dom的构建

也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性

defer：

defer等待dom加载完毕再执行js脚本。

async：

• async 脚本会在后台加载，并在加载就绪时运行。DOM 和其他脚本不会等待它们，它们也不会等待其它的东西。async 脚本就是一个会在加载完成时执行的完全独立的脚本。 

 

2.iframe 会阻塞主页面的 load 事件

3.页面文档完全加载并解析完毕之后会触发 DOMContentLoaded 事件

• css加载不会阻塞DOM树的解析
• css加载会阻塞DOM树的渲染
• css加载会阻塞后面js语句的执行

一、iframe会阻塞主页面的onload事件；

二、搜索引擎检索程序无法解读这种页面，不利于SEO；

三、会影响页面的并行加载。

并行加载：同一时间对同一域名下的加载数量是有限制的：

MDN解析：当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，而不需要等待样式表，图像和子框架页面加载（事件可以用来检测HTML页面是否完全加载完毕(fully-loaded)）。

4.<iframe>

HTML 内联框架元素 (<iframe>) 表示嵌套，它能够将另一个 HTML 页面嵌入到当前页面中。

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

 

 5.浏览器渲染的顺序：

• 构建dom 树

  浏览器将HTML解析成树形的数据结构，简称DOM

• 构建css 树（cssom）

• 构建渲染树

• 节点布局（回流）

• 页面渲染

 浏览器在构造DOM树的同时也在构造着另一棵树Render Tree,与DOM树相对应暂且叫它Render树。 从中我们可以发现renderer包含了一个dom对象以及为其计算好的样式规则，提供了布局以及显示方法

6.首先浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。

 下面是渲染引擎在取得内容之后的基本流程：

1.构建dom树和cssom树，并且创建节点

2.把dom树和cssom合成一个render渲染树，并且解析外面的样式和css文件，添加到render中

3.布局render

4.遍历render绘制到页面中

关键的点在于上述的4个过程并不是以严格顺序执行的。渲染引擎会以最快的速度展示内容，所以第二阶段不会等到第一阶段结束才开始，而是在第一阶段有输出的时候就开始执行。其它阶段也是如此。由于浏览器会尝试尽快展示内容，所以内容有时会在样式还没有加载的时候展示出来。

 这就是经常发生的FOCU(flash of unstyled content)或白屏问题。
 

 7.跨域问题解决办法

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

一、 通过jsonp跨域

1.原生实现 

JSONP（JSON with Padding）是JSON的一种”使用模式“，可用于解决主流浏览器的跨域数据访问的问题。

JSONP 不使用 XMLHttpRequest 对象。

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

2.）jquery ajax：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

jsonp缺点：只能实现get一种请求。

二、 跨域资源共享（CORS）

1.）原生ajax

cors使用xml对象

// 前端设置是否带cookie
xhr.withCredentials = true;

// 前端设置是否带cookie
xhr.withCredentials = true;
示例代码：

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

8.cookie

cookie中设置了httponly后js脚本将无法获取cookie信息，这样可以防范xss攻击，所以当前域的 cookie 都可以通过 js 在当前域下获取是错误的，当前域没说是端口号也一样，根据浏览器的同源策略，这是错误的

9.

requestAnimationFrame(foo) 确保使浏览器在下一次重绘之前调用 foo 方法

10.原型链（复习好多次了就是。。。哎不说了 

当谈到继承时，JavaScript 只有一种结构：对象。

每个实例对象（object）都有一个私有属性（称之为 __proto__）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

11.getElementsByTagName()：方法的用途是寻找有着给定标签名的所有的元素。

getElementsByTagName()[0]

12.触发创建单独图层

①3D或透视变换(perspective transform) CSS属性

②opacity做css动画或使用一个动画webkit变换的元素

③z-index在复合层上面渲染的元素

④拥有3D上下文或加速2D上下文的<canvas>节点

⑤使用加速视频解码的<video>节点

13.数组方法

不改变原数组：

1、 concat()

• 连接两个或多个数组
• 不改变原数组
• 返回被连接数组的一个副本

---

2、join()

• 把数组中所有元素放入一个字符串
• 不改变原数组
• 返回字符串

---

3、 slice()

• 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。
• 从已有的数组中返回选定的元素
• 不改变原数组
• 返回一个新数组

---

4、 toString()

• 把数组转为字符串
• 不改变原数组
• 返回数组的字符串形式

改变原数组：

5、 pop()

• 删除数组最后一个元素，如果数组为空，则不改变数组，返回undefined
• 改变原数组

• 返回被删除的元素

  ---

6、 push()

• 向数组末尾添加一个或多个元素
• 改变原数组
• 返回新数组的长度

---

7、 reverse()

• 颠倒数组中元素的顺序
• 改变原数组
• 返回该数组

---

8、 shift()

• 把数组的第一个元素删除，若空数组，不进行任何操作，返回undefined
• 改变原数组
• 返回第一个元素的值

---

9、 sort()

• 对数组元素进行排序(ascii)
• 改变原数组
• 返回该数组

---

10、 splice()

• 从数组中添加/删除项目
• 改变原数组
• 返回被删除的元素，若没有删除元素，返回空数组

---

11、 unshift()

• 向数组的开头添加一个或多个元素
• 改变原数组
• 返回新数组的长度 

splice(start, deleteCount, item1, item2, itemN)

start

• 指定修改的开始位置（从 0 计数）。
• 如果超出了数组的长度，则从数组末尾开始添加内容；
• 如果是负值，则表示从数组末位开始的第几位（从 -1 计数，这意味着 -n 是倒数第 n 个元素并且等价于 array.length-n）；
• 如果负数的绝对值大于数组的长度，则表示开始位置为第 0 位。

deleteCount 可选

• 整数，表示要移除的数组元素的个数。

• 如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。

• 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

item1, item2, ... 可选

• 要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

14.HTTP2 协议

• 所有http请求都建立在一个TCP请求上，实现多路复用
• 可以给请求添加优先级
• 服务器主动推送 server push
• HTTP2的头部会减小，从而减少流量传输