12道腾讯前端⾯试真题及答案整理
⾦九银⼗，⼜到了跳槽季啦，该刷题⾛起了。这⾥总结了⼀些被问到可能会懵逼的⾯试真题，有需要的可以看下～
1. 谈谈你对 dns-prefetch 的理解
DNS 是什么-- Domain Name System，域名系统，作为域名和IP地址相互映射的⼀个分布式数据库。
DNS Prefetching
浏览器根据⾃定义的规则，提前去解析后⾯可能⽤到的域名，来加速⽹站的访问速度。简单来讲就是提前解析域名，以免延迟。
使⽤⽅式
<link rel="dns-prefetch" href="//wq.test">
这个功能有个默认加载条件，所有的a标签的href都会⾃动去启⽤DNS Prefetching，也就是说，你⽹页的a标签href带的域名，是不需要在head⾥⾯加上link⼿动设置的。但a标签的默认启动在HTTPS不起作⽤。
这时要使⽤ meta⾥⾯http-equiv来强制启动功能。
<meta http-equiv="x-dns-prefetch-control" content="on">
总结⼀下
1. DNS Prefetching是提前加载域名解析的，省去了解析时间。a标签的href是可以在chrome。firefox包括⾼版本的IE，但是在
HTTPS下⾯不起作⽤，需要meta来强制开启功能
2. 这是DNS的提前解析，并不是css，js之类的⽂件缓存，⼤家不要混淆了两个不同的概念。
3. 如果直接做了js的重定向，或者在服务端做了重定向，没有在link⾥⾯⼿动设置，是不起作⽤的。
4. 这个对于什么样的⽹站更有作⽤呢，类似taobao这种⽹站，你的⽹页引⽤了⼤量很多其他域名的资源，如果你的⽹站，基本所有的资
源都在你本域名下，那么这个基本没有什么作⽤。因为DNS Chrome在访问你的⽹站就帮你缓存了。
拓展知识学习
web下的性能优化1(⽹络⽅向)
2. get/post请求传参长度有什么特点
我们经常说get请求参数的⼤⼩存在限制，⽽post请求的参数⼤⼩是⽆限制的。这是⼀个错误的说法，实际上HTTP 协议从未规定
GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下⾯⼏点:
1. HTTP 协议 未规定 GET 和POST的长度限制
2. GET的最⼤长度显⽰是因为 浏览器和 web服务器限制了 URI的长度
3. 不同的浏览器和WEB服务器，限制的最⼤长度不⼀样
4. 要⽀持IE，则最⼤长度为2083byte，若只⽀持Chrome，则最⼤长度 8182bytehosts文件怎么打开
3. 前端需要注意哪些 SEO
1. 合理的 title、description、keywords：搜索对着三项的权重逐个减⼩，title 值强调重点即可，重要
关键词出现不要超过 2 次，⽽且
要靠前，不同页⾯ title 要有所不同；description 把页⾯内容⾼度概括，长度合适，不可过分堆砌关键词，不同页⾯ description 有所不同；keywords 列举出重要关键词即可
2. 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解⽹页
3. 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容⼀定会被抓
取
4. 重要内容不要⽤ js 输出：爬⾍不会执⾏ js 获取内容
5. 少⽤ iframe(搜索引擎不会抓取 iframe 中的内容)
6. ⾮装饰性图⽚必须加 alt
7. 提⾼⽹站速度(⽹站速度是搜索引擎排序的⼀个重要指标)
4. 实现⼀个页⾯操作不会整页刷新的⽹站，并且能在浏览器前进、后退时正确响应。给出你的技术实
现⽅案？
第⼀步，通过使⽤ pushState + ajax 实现浏览器⽆刷新前进后退，当⼀次 ajax 调⽤成功后我们将⼀ 条 state 记录加⼊到 history 对象中。
第⼆步，⼀条 state 记录包含了 url、title 和 content 属性，在 popstate 事件中可以 获取到这个 state 对象，我们可 以使⽤ content 来传递数据。第三步，我们通过对 popstate 事件监听来响应浏览器 的前进后退操作。
使⽤ pushState 来实现有两个问题，⼀个是打开⾸页时没有记录，我们可以使⽤ replaceState 来将⾸页的记录替换，另⼀个问 题是当⼀个页⾯刷新的时候，仍然会向服务器端请求数据，因此如果请求的 url 需要后端的配 合将其重定向到⼀个页⾯。
5. 如何优化SPA应⽤的⾸屏加载速度慢的问题？程序运行的快捷键
将公⽤的JS库通过script标签外部引⼊，减⼩app.bundel的⼤⼩，让浏览器并⾏下载资源⽂件，提⾼下载速度；
在配置 路由时，页⾯和组件使⽤懒加载的⽅式引⼊，进⼀步缩⼩ app.bundel 的体积，在调⽤某个组件时再加载对应的js⽂件；
root中插⼊loading 或者 ⾻架屏 prerender-spa-plugin，提升⽤户体验；
如果在webview中的页⾯，可以进⾏页⾯预加载
独⽴打包异步组件公共 Bundle，以提⾼复⽤性&缓存命中率
静态⽂件本地缓存，有两种⽅式分别为HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头和Service Worker离线缓存
配合 PWA 使⽤
SSR
root中插⼊loading 或者 ⾻架屏 prerender-spa-plugin
电源控制模块
6. Reflect 对象创建⽬的？
1. 将 Object 对 象 的 ⼀ 些 明 显 属 于 语 ⾔ 内 部 的 ⽅ 法 （ ⽐ 如 Object.defineProperty，放到 Reflect 对象上。
2. 修改某些 Object ⽅法的返回结果，让其变得更合理。
3. 让 Object 操作都变成函数⾏为。
4. Reflect 对象的⽅法与 Proxy 对象的⽅法⼀⼀对应，只要是 Proxy 对象 的⽅法，就能在 Reflect 对象上到对应的⽅法。这就让
Proxy 对象可 以⽅便地调⽤对应的 Reflect ⽅法，完成默认⾏为，作为修改⾏为的基础。
也就是说，不管 Proxy 怎么修改默认⾏为，你总可以在 Reflect 上获取 默认⾏为。
7. 内部属性 [[Class]] 是什么？
所有 typeof 返回值为 "object" 的对象（如数组）都包含⼀个内部属性 [[Class]]（我 们可以把它看作⼀个内部的分类，⽽⾮传统的⾯向对象意义上的类）。这个属性⽆法直接访问， ⼀般通过 String(..) 来查看。例如：
String.call( [1,2,3] );  // "[object Array]"
String.call( /regex-literal/i ); //"[object RegExp]"
多数情况下，对象的内部[[class]]属性和创建该对象的内建原⽣构造函数相对应，不过也不总是这样。2.基本类型值的[[class]]属性
虽然Null()和Undefined()这样的原⽣构造函数并不存在，但是内部[[class]]属性仍然是“Null”和“Undefined”。
console.log(String.call(null)); //[object Null]
console.log(String.call(undefined)); //[object Undefined]
in关键字的作用sql其他基本类型值的情况有所不同：
console.log(String.call("abc")); //[object String]
console.log(String.call(42));  //[object Number]
console.log(String.call(true)); //[object Boolean]
基本类型值被各⾃的封装对象⾃动包装，所以他们的内部[[class]]属性分别为“String”，“Number”和“Boolean”。3.封装对象
由于基本类型值没有.length和.toString()这样的属性和⽅法，需要通过封装对象才能访问，此时Javascript引擎会⾃动为基本类型值包装
⼀个封装对象。
web前端基础面试题
//封装对象包装
var b =  abc ;
console.log(b.length);
console.UpperCase());
```js
⼀般不直接使⽤封装对象（即通过new操作创建基本类型值），优先考虑使⽤“abc”和“42”这样的基本类型值，⽽不是new String("abc") 和 new Number(42)。4.拆封
如果想要得到封装对象中的基本类型值，可以使⽤valueOf()函数。
```js
//封装对象的拆封
var s = new String( "abc" );javascript设计模式哪本好
var n = new Number( 42 );
var b = new Boolean( true );
console.log(s.valueOf());
console.log(n.valueOf());
console.log(b.valueOf());
8. 什么是堆？什么是栈？它们之间有什么区别和联系？
堆和栈的概念存在于数据结构中和操作系统内存中。在数据结构中，栈中数据的存取⽅式为 先进后出。⽽堆是⼀个优先队列，是按优先级
来进⾏排序的，优先级可以按照⼤⼩来规定。完全 ⼆叉树是堆的⼀种实现⽅式。在操作系统中，内存被分为栈区和堆区。栈区内存由编译
器⾃动分 配释放，存放函数的参数值，局部变量的值等。其操作⽅式类似于数据结构中的栈。堆区内存⼀ 般由程序员分配释放，若程序员
不释放，程序结束时可能由垃圾回收机制回收。
详细资料可以参考：《什么是堆？什么是栈？他们之间有什么区别和联系？》
9. isNaN 和 Number.isNaN 函数的区别？
函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返 回 true，因此⾮数字值传⼊也会返回 true
，会影响 NaN 的判断。
函数 Number.isNaN 会⾸先判断传⼊参数是否为数字，如果是数字再继续判断是否为 NaN ，这种⽅法对于 NaN 的判断更为准确。
10. 什么情况下会发⽣布尔值的隐式强制类型转换？
（1） if (..) 语句中的条件判断表达式。（2） for ( .. ; .. ; .. ) 语句中的条件判断表达式（第⼆个）。（3） while (..) 和 do..while(..) 循环中的条件判断表达式。（4） ? : 中的条件判断表达式。（5） 逻辑运算符 ||（逻辑或）和 &&（逻辑与）左边的操作数（作为条件判断表达式）。
11. undefined 与 undeclared 的区别？
已在作⽤域中声明但还没有赋值的变量，是 undefined 的。相反，还没有在作⽤域中声明 过的变量，是 undeclared 的。对于undeclared 变量的引⽤，浏览器会报引⽤错误，如 ReferenceError: b is not defined 。但是我们可以使⽤ typeof 的安全防范机制来避免 报错，因为对于 undeclared（或者 not defined ）变量，typeof 会返回 "undefined"。
12. 如何封装⼀个 javascript 的类型判断函数？
function getType(value) {
// 判断数据是 null 的情况
if (value === null) {
return value + "";
}
// 判断数据是引⽤类型的情况
if (typeof value === "object") {
let valueClass = String.call(value),
type = valueClass.split(" ")[1].split("");
type.pop();
return type.join("").toLowerCase();
} else {
// 判断数据是基本数据类型的情况和函数的情况
return typeof value
}
}
在看点这⾥

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。