前端面试题-刷完这篇就够了
这是一篇十分经典的面试 问题汇总
https://blog.csdn.net/weixin_33795743/article/details/88021748
1.使用MySQL实现一个分页功能sql？
select * from student order by id desc/asc limit 0,3
select * from student order by id desc/asc limit 3,3 (从三开始长度为s3
2.window.location对象中有哪些属性？分别有啥作用呢？
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 （80 或 443）
- location.protocol 返回所使用的 web 协议（http: 或 https:）
- location.search 返回URL中的？以及之后的参数部分的内容
3.什么是DOCTYPE有啥作用？
浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
声明文档类型和DTD规范的，主要用途是文件合法性的验证，如果文件不合法，那么浏览器在解析时便会出一些差错。
4.浏览器渲染过程？
构建DOM树+CSSOM规则树=render tree渲染树,交给浏览器去绘制出来
5.重排和重绘？
增减dom节点，移动dom的位置， 或者搞个动画时。当窗口发生变化时。如果发生重排的话一定会发生重绘。重绘一般是指颜色的变化，文字的大小的变化。
6.布局layout,渲染方式？
7.一般情况下面试分为四面（大公司），基础面试，知识宽度和深度的面试，项目经验面试，hr面试，性格/智力/表达测试（在线）
8.tcp和udp有哪些？
TCP（Transmission Control Protocol，传输控制协议）是面向连接的协议，也就是说，在收发数据前，必须和对方建立可靠的连接。 一个TCP连接必须要经过三次“对话”才能建立起来
UDP是一个非连接的协议，传输数据之前源端和终端不建立连接， 当它想传送时就简单地去抓取来自应用程序的数据，并尽可能快地把它扔到网络上。 在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度、 计算机的能力和传输带宽的限制； 在接收端，UDP把每个消息段放在队列中，应用程序每次从队列中读一个消息段。
2、 由于传输数据不建立连接，因此也就不需要维护连接状态，包括收发状态等， 因此一台服务机可同时向多个客户机传输相同的消息。
3、UDP信息包的标题很短，只有8个字节，相对于TCP的20个字节信息包的额外开销很小。
4、吞吐量不受拥挤控制算法的调节，只受应用软件生成数据的速率、传输带宽、 源端和终端主机性能的限制。
5、UDP使用尽最大努力交付，即不保证可靠交付， 因此主机不需要维持复杂的链接状态表（这里面有许多参数）。
6、UDP是面向报文的。发送方的UDP对应用程序交下来的报文， 在添加首部后就向下交付给IP层。既不拆分，也不合并，而是保留这些报文的边界， 因此，应用程序需要选择合适的报文大小。
我们经常使用“ping”命令来测试两台主机之间TCP/IP通信是否正常， 其实“ping”命令的原理就是向对方主机发送UDP数据包，然后对方主机确认收到数据包， 如果数据包是否到达的消息及时反馈回来，那么网络就是通的。
9.js的运行机制是怎样的？什么是事件循环？event loop,任务队列？
js是单线程的，通过建立事件队列的方式来执行代码。
先执行同步任务，再执行异步任务。常见的异步任务有setTimeOut,setInterval,DOM事件，ES6中的promise（状态机）
10.性能优化？有哪些实践？怎么测试呢？
11.错误和性能监控？线上的错误和性能的信息收集？
- 前端错误的分类
运行错误，资源加载错误
- 前端错误的捕获方法
try catch
window.onerror
Object.onerror
performance.getEntries()
window.addEventLisner("error",function(e){
console.log(e)
},false) //这里的false表示在捕获阶段监听错误事件，true为在冒泡阶段监听12.跨域的js运行错误时，错误提示应该怎么处理？
- 在script标签中增加crossorigin属性
- 设置js资源的响应头Access-control-allow-origin :*或者响应的域名
13.上报错误信息的方法有哪些？
- ajax
- 使用image对象上报错误信息
（new Image（））.src="http://baidu.com/test?param=test'"14. 两道让人深思的问题？腾讯视频面试题，在面试的过程中，会的题目一定要好好答对，不会的可以直接放弃，或者尽可能来实现解决方案；不要写自己说不明白或者乱写，印象会非常不好。
//修改console.log的方法输出方式
let flag = 1
console.log = (function(consolelog){
return function(str)
{
consolelog.call(console, `${flag++}:${str}`);
}
})(console.log);
console.log(11)
console.log(12)
// 函数柯里话，只传递给函数一部分参数来调用它
let curry = function(first) {
let sum = Math.pow(first, 2)
let multi = function (parma) {
sum += Math.pow(parma, 2)
multi.value = sum
return multi;
}
multi.value = sum
return multi;
}
console.log(curry(1)(2)(3).value)15.三次握手和四次挥手？
三次握手：客户端对服务端说我要和你建立连接，服务端回复可以建立连接，客户端正式向服务端发起建立请求
四次挥手：客户端说我要断开连接了，服务端说可以断开连接，此时客户端不能给服务端发消息，但是可以接收服务端发来的消息，服务端正式断开和客户端的连接。
16.promise的应用？原理？自己实现？
17.async,await的应用？有啥作用？generator的作用？和promise的联系？
18.内存泄漏的原因？怎样避免？
19.js自定义事件的应用？三个主要的api的应用？
三要素：
document.createEvent()
event.initEvent()
element.dispatchEvent()
demo:
(en:自定义事件名称，fn:事件处理函数，addEvent:为DOM元素添加自定义事件，triggerEvent:触发自定义事件)
window.onload = function(){
var demo = document.getElementById("demo");
demo.addEvent("test",function(){console.log("handler1")});
demo.addEvent("test",function(){console.log("handler2")});
demo.onclick = function(){
this.triggerEvent("test");
}
}
Element.prototype.addEvent = function(en,fn){
this.pools = this.pools || {};
if(en in this.pools){
this.pools[en].push(fn);
}else{
this.pools[en] = [];
this.pools[en].push(fn);
}
}
Element.prototype.triggerEvent = function(en){
if(en in this.pools){
var fns = this.pools[en];
for(var i=0,il=fns.length;i20.[1,2,3].map(parseInt)的结果是？ reduce，filter方法的应用？
- 1 NaN NaN 主要考察的是parseInt的参数问题，（value，进制） 这里的进制必须是2-36之间才对
- reduce使用其后的函数来处理前边数组中的数据