【面试】2019最新web前端经典面试题试题及答案（持续更新）-html/css、js、vue、http、web安全、前端性能、浏览器、js算法
阅读目录
- html/ css ：https://blog.csdn.net/aSuncat/article/details/88789368
- javascript：https://blog.csdn.net/aSuncat/article/details/88789888
- es6：https://blog.csdn.net/aSuncat/article/details/88818661
- vue：https://blog.csdn.net/aSuncat/article/details/88978775
- react：https://blog.csdn.net/aSuncat/article/details/92596490
- jQuery
- webpack、gulp、grunt
- node
- http、https、tcp
- web安全
- 前端性能
- 浏览器
- 算法相关
- 设计模式
- 正则表达式
- hybrid
- 全栈
- 项目
- svn、git
jQuery
| jquery的jq.eq(0)和jq[0]有什么区别？ |
待完善
- jquery源码
| 原型实际应用-jquery？ |
多个实例都可以共用一个方法时，说明这些方法（eg:css(), html()）都是来自于一个构造函数的原型中
var $p = $('p');
$p.css('color', 'red'); // css是原型方法
console.log($p.html()); // html是原型方法 // 如果有多个p元素，$p.html()默认是最后一个元素的html
段落1
段落2
3、dom操作
（1）减少dom查询，对dom查询做缓存。
// 未缓存dom查询
var i;
for (i = 0; i < document.getElementsByTagName('p').length; i++) {\
// todo
}
// 缓存了dom查询
var pList = document.getElementByTagName('p');
var i;
for (i = 0; i < pList.length; i++) {
// todo
}
（2）减少dom操作，多个操作尽量合并在一起执行。
var frag = document.createDocumentFragment(); // 片段，循环插入dom，改成先插入到片段，再append到文档流
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4、事件
（1）尽早执行操作（如DOMContentLoaded）
（2）事件节流
var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function() {
if(timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
// 触发change事件
}， 100)
})
5、代码细节优化
（1）用hash-table来优化查找
（2）多个变量声明合并
（3）少用全局变量
（4）避免全局查询
（5）避免使用with(with会创建自己的作用域，会增加作用域链长度)
（6）用setTimeout来避免页面失去响应
三、移动端性能优化
1、css
（1）不滥用Float。Float在渲染时计算量比较大，尽量减少使用
（2）不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
（3）避免使用css3渐变阴影效果。
2、css动画
（1）尽量使用css3动画，开启硬件加速。
可以用transform: translateZ(0)来开启硬件加速。
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
3、合理使用requestAnimationFrame动画代替setTimeout
4、适当使用touch事件代替click事件。
- 非核心代码异步加载
| 异步加载的方式？ |
1、动态脚本加载
script标签，加入到body中
2、defer
加载js的时候，script标签加defer和async
3、async
| 异步加载的区别？ |
1、defer是在html解析完之后才会执行，如果是多个，按照加载的顺序依次进行。
2、async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。
- 预解析dns
| 预解析dns的方式？ |
1、
2、强制打开a标签的dns预解析
页面中所有a标签，默认打开了dns预解析，如果链接是https开头的，默认关闭dns预解析
浏览器
浏览器缓存、浏览器渲染机制、浏览器渲染过程、重排reflow、重绘repaint、浏览器兼容
- 浏览器缓存
| 浏览器缓存的分类？ |
1、强缓存
// Expires：
Expires:Thu, 21 Jan 2017 23:39:02 GMT // value值表示的是绝对时间，一般都是服务器时间，可能与客户端时间不一样
// Cache-Control：
Cache-Control: max-age=3600 // value值是以客户端时间为准
如果服务器这两个时间都下发了，以后者为准
2、协商缓存：与服务器协商是否要用，是否过期
（1）Last-Modified/ If-Modified-Since
Last-Modified: Web, 26 Jan 2017 00:35:11 GMT
（2）Etag/ If-None-Match
if-none-match的值就是服务器发过来的etag的值
| 与浏览器缓存相关的http头有哪些？ |
Expires、Cache-Control、Last-Modified、If-Modified-Since、Etag、If-None-Match
| 浏览器缓存的原理？ |
待完善
| 浏览器缓存的区别/ 请描述一下cookies，sessionStorage和localStorage的区别？ |
1、cookie
（1）本身用于客户端和服务端通信
（2）但是它有本地存储的功能，于是就被“借用”
（3）document.cookie = …获取和修改即可
（4）cookie用于存储的缺点
①存储量太小，只有4kb
②所有http请求都带着，会影响获取资源的效率
③api简单，需要封装才能用document.cookie
2、localStorage,sesseionStorage
（1）html5专门为存储而设计，最大容量5M
（2）api简单易用
（3）lcoalStorage.setItem(key, value);localStorage.getItem(key);
（4）ios safari隐藏模式下:localStorage.getItem会报错，建议统一使用try-catch封装
3、sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
| localstorage的超出，容错，替换方案？ |
1、localstorage超出：
localStorage存储空间是每个域5M，如果超出了这个空间，就会报错：QuotaExceededError
2、容错、替换方案
（1）超了申请其他的域，修改nigix配置， postmessge通信往其他域上存取。
A、B页面引用C页面，C最好是主域。
iframe.contentWindow.postMessage()
window.parent.postMessage()
（2）indexDB
（2）最简单粗暴的方法，把之前的缓存都给删了。（不推荐）
| 如果 localStorage 存满了，再往里存东西，或者要存的东西超过了剩余容量，会发生什么？ |
存不进去并报错（QuotaExceededError）
- 浏览器渲染机制
| 什么是DOCTYPE及作用？ |
1、定义：DTD（document type definition,文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
2、作用：DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。
| 常见的doctype有哪些？ |
1、HTML5：
2、HTML4.01 Strict：该DTD包含所有html元素和属性，但不包括展示性的和启用的元素，如font
3、HTML 4.01 Transitional ：该DTD包含所有html元素和属性，包括展示性的和启用的元素，如font
| h5的doctype怎么写？ |
- 浏览器渲染过程
| 加载资源的形式？ |
1、输入url（或跳转页面）加载html
http://coding.m.imooc.com
2、加载html中的静态资源