js数组按中文拼音排序_前端面试题二（JS进阶篇）-CSDN博客

Ajax 是什么? 如何创建一个Ajax？

AJAX全称是Asychronous JavaScript And Xml(异步的 JavaScript 和 XML)

它的作用是用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧(iframe)方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持

其主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果

实现方式()：

Ajax的优缺点

优点：

通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，按需获取数据，减少不必要的数据往返，减少了带宽占用
Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

缺点：

ajax不支持浏览器back按钮
安全问题 AJAX暴露了与服务器交互的细节
对搜索引擎的支持比较弱
破坏了程序的异常机制。

一个页面从输入 URL 到页面加载显示完成，发生了什么？

当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
此时，Web 服务器提供资源服务，客户端开始下载资源。
后续HTML页面解析参照的 “html页面怎么解析的？它加载顺序是什么？”

JQuery一个对象为何可以同时绑定多个事件

低层实现方式是使用addEventListner或attachEvent兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件

对页面某个节点的拖曳

1. 给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

2. mousedown事件触发后，开始拖拽

3. mousemove时，需要通过和clientY获取拖拽位置，并实时更新位置

4. mouseup时，拖拽结束

5. 需要注意浏览器边界的情况

ew操作符具体干了什么

创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
属性和方法被加入到 this 引用的对象中。
新创建的对象由 this 所引用，并且最后隐式的返回 this

以下是模拟操作：

前端开发的优化问题

(1) 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

(2) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

(3) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

(4) 当需要设置的样式很多时设置className而不是直接操作style。

(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

(6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

(7) 图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。

(8) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

fetch和Ajax有什么不同

XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离(Separation of Concerns)的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好
fetch 是浏览器提供的一个新的 web API，它用来代替 Ajax(XMLHttpRequest)，其提供了更优雅的接口，更灵活强大的功能。
Fetch 优点主要有：语法简洁，更加语义化，基于标准 Promise 实现，支持 async/await

如何编写高性能的Javascript

使用 DocumentFragment 优化多次 append
通过模板元素 clone，替代 createElement
使用一次 innerHTML 赋值代替构建 dom 元素
使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素
使用 Array 做为 StringBuffer ，代替字符串拼接的操作
将循环控制量保存到局部变量
顺序无关的遍历时，用 while 替代 for
将条件分支，按可能性顺序从高到低排列
在同一条件子的多( >2 )条件分支时，使用 switch 优于 if
使用三目运算符替代条件分支
需要不断执行的时候，优先考虑使用 setInterval

定时器setInterval有一个有名函数fn，setInterval(fn,500)与setInterval(fn(),500)有什么区别？

第一个是重复执行每500毫秒执行一次，后面一个只执行一次。

简述一下浏览器内核

浏览器内核又可以分成两部分：渲染引擎和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等)，以及计算网页的显示方式，然后会输出至显示器或打印机。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

JavaScript的数据对象有哪些属性值？

writable：这个属性的值是否可以改

configurable：这个属性的配置是否可以删除，修改

enumerable：这个属性是否能在for…in循环中遍历出来或在中列举出来

value：属性值。

懒加载(瀑布流)的实现原理

意义：懒加载的主要目的是作为服务器前端优化，减少请求数或延迟请求数实现原理：先加载一部分数据，当触发某个条件时利用异步加载剩余的数据，新得到的数据，不会影响有数据的显示，同时最大程度上减少服务器的资源消耗

实现方式：

(1)延迟加载，使用setTimeOut或setInterval进行加载延迟

(2)符合某些条件，或触发了某些事件才开始异步下载

(3)可视区加载

js实现数组去重

双层循环，外层循环元素，内层循环时比较值，如果有相同的值则跳过，不相同则push进数组

利用对象的属性不能相同的特点进行去重

Set数据结构，它类似于数组，其成员的值都是唯一的

实现快速排序和冒泡排序

快速排序：选取位置在数组中间的一个数，然后比它小的放在left[]的一个新数组里面，比他大的放在right[]的一个新数组里面，以此类推，重复执行这个过程，利用递归的思想，直至执行到left[]和right[]里面都只有一个数

冒泡排序：两两比较，前面的比后面的大，则换位。第一轮次，挑出最大的；第二轮-1次，挑出第二大的。以此往复

谈谈节流和防抖，如何实现

节流：使频繁执行的函数，定时执行，高频率函数执行时，使执行率减少，每n秒才能执行一次，打个比方：每隔1秒钟，会执行5次滚动条滚动事件，我只让它每一秒执行一次(案例：网站中的返回顶部)

防抖：使频繁执行的函数，延时执行，高频率函数执行时，n秒内只执行一次，在事件内多次执行会延时，打个比方：用户在输入框中输入字符，当用户一直在输入时，我们做个延时，当用户输入完毕后会有一段时间停顿，若这个停顿时间大于我们的我们延时时间，我们就进行下一步操作，反之则不进行并且一直延时(案例：搜索引擎搜索输入框)

区别：对于高频率执行函数，节流是每隔规定时间都会执行一次，防抖是只在规定时间外的最后一次执行

实现过程：