前端面试解析（20210329）
作者：互联网
1.简单说一下 Webpack 的原理？
webpack是JavaScript应用程序的静态模块打包器，webpack处理应用程序时，将递归构建一个依赖图，依赖图映射了项目中需要的每一个模块，并打包生成一个或多个bundle
webpack的配置（webpack.config.js）四个核心概念
entry
entry属性将告诉webpack从哪个模块开始构建依赖图,并计算出所有这个模块直接或间接依赖的模块.
entry为String或Array时,entry输出的Chunk的名称将默认是main
entry为Object时,webpack将输出多个Chunk,Chunk的名称将会是key
output
const path = require('path');
module.exports = {
entry: './src/index.js',
// ./dist/main.js
output: {
// 文件名字可以直接设置
filename: 'my-first-webpack.bundle.js',
// 也可以用过变量设置
// id - Chunk的唯一标识,从0开始
// name - Chunk的名称
// hash - Chunk的唯一标识(即id)的hash值
// chunkhash - Chunk内容的hash值
filename: '[id].[name].[hash].[chunkhash].js',
// 配置输出文件的存放目录
// __dirname是运行命令行时所在路径
path: path.resolve(__dirname, 'dist'),
}
};
loader
条件匹配: 通过 test / include / excluede 三个配置来匹配文件,支持string和array
应用规则: 匹配命中文件之后,使用use中的配置来应用loader,同时可以按"从后往前"的顺序应用多个loader
重置顺序: 一组loader的执行顺序迷人是从右向左执行,通过 enforce 选项可以让其中一个loader的执行顺序放到最后或最前
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [ // 在rules中可以设置多个规则
{
test: /\.txt$/, // 设置用来匹配什么文件需要被转换
// 只命中src目录里的js文件，加快 Webpack 搜索速度
include: path.resolve(__dirname, 'src'),
// 排除 node_modules 目录下的文件
exclude: path.resolve(__dirname, 'node_modules'),
// 处理顺序为从后到前，即先交给 sass-loader 处理，再把结果交给 css-loader 最后再给 style-loader。
use: ['style-loader', 'css-loader', 'sass-loader'],
// use中同样可以设置Object
use: [
{
loader:'babel-loader',
options:{
cacheDirectory:true,
},
// enforce:'post' 的含义是把该 Loader 的执行顺序放到最后
// enforce 的值还可以是 pre，代表把 Loader 的执行顺序放到最前面
enforce:'post'
},
]
}
]
}
};
plugins
loaders用来转换某些类型的模块(文件),plugin 则用来执行,打包优化,资源管理和插入环境变量,等各种任务
plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 webpack 带来了很大的灵活性。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
webpack配置文件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
复制代码
2.项目用到了 WebSocket，说下 WebSocket 吧？长轮询和短轮询？
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
3.LocalStorage 和 SessionStorage 的区别？
a.localStorage和sessionStorage一样都是用来存储客户端临时信息的对象
b.他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
c.localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
d.sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
e.不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
4.左右两列定宽，中间自适应的方法？（有多种方式）
// html
<div class='second'>
<div></div>
<div></div>
<div></div>
</div>
// css
.second {
display: flex;
height: 100px;
}
.second div:first-child, .second div:last-child {
width: 50px;
background: red;
}
.second div:nth-child(2) {
flex: 1;
background: pink;
}
// html
<div class='third'>
<div class='first-div'></div>
<div class='second-div'></div>
<div class='third-div'></div>
</div>
// css
.third {
font-size: 0; // 这里去除使用inline-block出现的空白间隙
}
.first-div, .second-div, .third-div {
display: inline-block;
height: 100px;
}
.first-div, .third-div {
background: pink;
width: 50px;
}
.second-div {
background: red;
width: calc(100% - 100px);
}
5.浏览器事件***的原理？
6.介绍一下闭包？应用场景？
函数外部无法访问函数内部的局部变量，但函数内部的函数可以访问本函数内的局部变量，故通过闭包实现函数外部访问函数内部局部变量。但容易造成内存泄漏，应当谨慎使用。
a.采用函数引用方式的setTimeout调用
b.小范围代替全局变量
c.访问私有变量的特权方法？
特权方法：有权访问私有变量和私有函数的公有方法
私有变量包括：
1）、局部变量
2）、函数的参数
3）、函数内部定义的其他函数（闭包）
7.说一下 JavaScript 的继承方法？
a.原型链
基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法。
构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。
原型链实现继承例子：
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true
b.借用构造函数
基本思想：在子类型构造函数的内部调用超类构造函数，通过使用call()和apply()方法可以在新创建的对象上执行构造函数。
c.
8.用过哪些排序算法？快速排序和选择排序的时间复杂度？
9.前端攻击 XSS，CSRF ？避免方法？（前端安全方面的知识）
XSS(Cross-Site Scripting，跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。
防御 XSS 攻击最简单直接的方法就是过滤用户的输入
如果不需要用户输入 HTML，可以直接对用户的输入进行 HTML 转义
当用户需要输入 HTML 代码时：更好的方法可能是，将用户的输入使用 HTML 解析库进行解析，获取其中的数据。然后根据用户原有的标签属性，重新构建 HTML 元素树。构建的过程中，所有的标签、属性都只从白名单中拿取
CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
CSRF 可以简单理解为：攻击者盗用了你的身份，以你的名义发送恶意请求，容易造成个人隐私泄露以及财产安全。
如何防范CSRF攻击?
过滤用户输入的内容不能阻挡 CSRF 攻击，我们需要做的事过滤请求的来源，因为有些请求是合法，有些是非法的，所以 CSRF 防御主要是过滤那些非法伪造的请求来源。
关键操作只接受 POST 请求
添加验证码(体验不好)
判断请求的来源：检测Referer(并不安全，Referer可以被更改)
使用Token(主流)
10.前端性能优化的方法？
从浏览器发起请求到页面能正常浏览都有哪些阶段（process）？
预处理——>DNS解析——>建立连接——>发起请求——>等待响应——>接受数据——>处理元素——>布局渲染
性能优化的具体方法（way）
尽量减少HTTP请求个数——须权衡
合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的，当然，也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话，合并文件就是一项比较麻烦的工作了，但把这个作为站点发布过程的一部分确实可以提高响应时间
CSS Sprites是减少图片请求数量的首选方式
合并图片（如css sprites，内置图片使用数据）、合并CSS、JS，这一点很重要，但是要考虑合并后的文件体积。
使用CDN（内容分发网络）
为文件头指定Expires或Cache-Control，使内容具有缓存性
使用gzip压缩内容
前端工程师可以想办法明显地缩短通过网络传输HTTP请求和响应的时间。毫无疑问，终端用户的带宽速度，网络服务商，对等交换点的距离等等，都是开发团队所无法控制的。但还有别的能够影响响应时间的因素，压缩可以通过减少HTTP响应的大小来缩短响应时间
从HTTP/1.1开始，web客户端就有了支持压缩的Accept-Encoding HTTP请求头。1 Accept-Encoding: gzip, deflate
把CSS放到顶部
避免使用CSS表达式
11.说一下 HTTP 缓存机制？
12.css盒子，事件、写vue组件，项目
13.CSS 清除浮动的方法？
在标签结尾处加空div标签 clear:both
父级div定义 伪类:after 和 zoom
父级div定义 overflow:hidden
给父级元素单独定义高度（height）
https://blog.csdn.net/qq_41846861/article/details/88602106
标签：构造函数,浏览器,20210329,loader,面试,webpack,div,解析,请求 来源： https://blog.csdn.net/qq_27381669/article/details/115312974