1.new一个函数发生了什么
- 创建了一个新对象实例
let obj=new Object();
- 构造函数被执行
- 将空对象的__proto__成员指向了原函数对象prototype成员对象
obj.proto=Person.prototype
-将构造函数的this指向新对象
Person.call(obj)
- 返回一个对象
2.css中,display:none和visibility:hidden的区别?
- display:none相当于完全消失,不占用空间,不在文档流中;visibility:hidden相当于隐身,还占据着位置,在文档流中。
- visibility有继承性,给父元素设置该属性子元素也会继承同样的属性。
css中link和@import的区别是?css3有那些新特性?
- link标签除了可以加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import只能加载CSS。
- 加载顺序的差别:当一个页面被夹在的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式(就是闪烁),网速慢的时候还挺明显。
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题,完全兼容。
- 使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的(不支持)。
3.Vue3有那些新特性?
- 1.使用Proxy代替defineproperty实现响应式
- 2.重写虚拟DOM的实现和Tree-Shaking
- 3.Vue3可以更好的支持TypeScript
- 事件开缓存
- Composition API
- Teleport(传送门
- 一个 Vue 模板可以有多个根节点(Fragments)
- Custom Renderer API ( createRenderer )
- Tree Shaking
- Suspense
- 生命周期函数
- Better TypeScript Support
4.iframe的优点
- 1、 iframe能够原封不动地把嵌入的网页展现出来。
- 2、 如果有多个网页调用iframe,只需要修改iframe的内容,就可以实现对调用iframe的每一个页面内容的更改,方便快捷。
- 3、 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用性。
- 4、 如果遇到加载缓慢的第三方内容如图标和广告等,可以用iframe来解决。
5.请说出三种减少页面加载时间的方法?
- 1、减少http请求(合并文件、合并图片)
- 2、优化图片文件,减小其尺寸
- 3、图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)
- 4、 压缩Javascript、CSS代码
- 5、 服务器启用gzip压缩功能
- 6、 使用CDN
- 7、图片懒加载
6.前端页面有那三层构成,分别是什么?作用是什么?
- 一、网页的
结构层(structural layer)
由HTML或XHTML之类的标记语言负责创建。
标记语言也就是指网页的标签,标签只对网页内容的语义和含义做出描述,不包含任何关于如何显示内容的信息。 - 二、网页的
表示层(resentation layer)
由CSS负责创建。
作用是对内容如何显示做一定的控制。 - 三、网页的
行为层(behavior layer)
由JavaScript语言和DOM创建。
作用是控制用户做出一个事件该如何显示。例如:用户悬浮在某个元素上,弹出一个显示元素标题内容的提示框。
7.TCP和UDP的区别
- 1. TCP是⾯向 连接 的,⽽UDP是⾯向⽆连接的。
- 2. TCP仅⽀持 单播传输 ,UDP 提供了单播,多播,⼴播的功能。
- 3. TCP的三次握⼿保证了连接的 可靠性 ; UDP是⽆连接的、不可靠的⼀种数据传输协议,⾸先不可
靠性体现在⽆连接上,通信都不需要建⽴连接,对接收到的数据也不发送确认信号,发送端不知道
数据是否会正确接收。 - 4. UDP的 头部开销 ⽐TCP的更⼩,数据 传输速率更⾼ , 实时性更好 。
8.你遇到过那些兼容性问题?
9.你觉得前端工程师的价值体现在哪里?
10.javascript创建对象有几种方式?
- 一、通过{}创建对象
- 二、通过new Object()创建对象
- 三、使用字面量创建对象
- 四、使用工厂模式创建对象
- 五、通过构造函数创建对象
- 六、通过原型模式创建对象
- 七、通过原型+构造函数的方式创建对象
11.GET和POST的区别,何时使用POST
- GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
- POST:一般用于修改服务器上的资源,对所发送的信息没有限制。
那么在以下情况中,请使用 post请求:
1、无法使用缓存文件(更新服务器上的文件或数据库)
2、向服务器发送大量数据(post没有数据量限制)
3、发送包含未知字符的用户输入时,post比 get更稳定也更可靠
12.HTML新特性
- 1:语义化标签
- 2:增强型表单
- 3. 媒体元素
- 4. canvas绘图
- 5. svg绘图
- 6. 地理定位
- 7. 拖放API
- 8. Web Worker
- 9. Web Storage
- 10. Websocket
13.cookie和session有啥什么联系和区别
- 1、cookie数据存放在客户的浏览器上,session数据放在服务器上。
- 2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。 - 3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
考虑到减轻服务器性能方面,应当使用COOKIE。 - 4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
- 5、所以个人建议:
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留,可以放在COOKIE中
14.js怎样获取key
- for in循环获取key值
- Object.keys() , 遍历自身可以枚举属性
- Ojbect.values() /Ojject.entries(),返回自身可枚举属性的键值对数组
- hasOwnProperty ,遍历可枚举属性
- getOwnPropertyNames() 返回可枚举属性和不可枚举属性,不包括prototype属性,不包括symbol类型的key
- getOwnPropertySymbols() 返回symbol类型的key属性,不关心是否可枚举
15.简述 this 的指向?
- 普通函数调用,此时 this 指向 window,默认写法可以省略window
- 对象方法调用, 此时 this 指向调用次方法的对象
- 构造函数调用,此时 this 指向new出来的实例对象
- 通过事件绑定的方法, 此时 this 指向 绑定事件的对象
- 定时器函数, 此时的 this 指向 window
16.如何改变 this 的指向?
- call()方法
<script>
// 第一个参数:this指向
// 如果要传参,后面依次是参数
function fn(x, y) {
console.log(this);
}
var obj = {
name: "张三"
}
fn(1, 2); // 改变指向前
fn.call(obj, 1, 2); // 改变指向后,this指向obj
</script>
- ** apply()**
apply() 与call()非常相似,第一个参数都是this指向,不同的地方在于提供参数的方式,apply()使用数组传参数
<script>
// 第一个参数:this指向
// 如果要传参,后面依次是参数
function fn(x, y) {
console.log(this); // 改变this指向之前this指向Window 改变后指向obj对象
}
var obj = {
name: "张三"
}
fn(1, 2); // 改变指向前
fn.call(obj, [1, 2]); // 改变指向后
- bind()
bind() 方法不会调用函数。但是能改变函数内部this 指向,因此当我们只是想改变 this 指向,并且不想调用这个函数的时候,可以使用 bind
<script>
// 第一个参数:this指向
// 如果要传参,后面依次是参数
function fn(x, y) {
console.log(this); // 改变this指向之前this指向Window 改变后指向obj对象
}
var obj = {
name: "张三"
}
fn(1, 2); // 改变指向前
fn.bind(obj, 1, 2)(); // 自调用之后,this指向obj
</script>
- 用一个变量保存this
<script>
let button = document.getElementById('an')
button.addEventListener('click', function () {
let _this = this
setTimeout(function () {
console.log('保存到定时器外的this指向', _this); // _this指向button 按钮
console.log('定时器中的this指向', this); // this 指向window
}, 1000)
})
</script>
17.有了解过浏览器的协商缓存和强缓存吗?
- 强缓存:不用请求服务器,直接使用本地缓存,利用http响应头中的Exprires或Cache-Cantrol实现。(Expires或者Cache-Control两个字段表示资源的缓存时间。)
- 协商缓存:浏览器发现本地有资源的副本,但是不太明确要不要使用,于是去问问服务器。(协商缓存是利用的是两对Header:)
18.什么是 XSS 攻击,如何避免?
- XSS 攻击,即跨站脚本攻击(Cross Site Scripting),它是 web 程序中常见的漏洞。攻击者往 web 页面里插入恶意的 HTML 代码(Javascript、css、html 标签等),当用户浏览该页面时,嵌入其中的 HTML 代码会被执行,从而达到恶意攻击用户的目的。如盗取用户 cookie 执行一系列操作,破坏页面结构、重定向到其他网站等。
如何避免: - web 页面中可由用户输入的地方,如果对输入的数据转义、过滤处理
- 后台输出页面的时候,也需要对输出内容进行转义、过滤处理(因为攻击者可能通过其他方式把恶意脚本写入数据库)
- 前端对 html 标签属性、css 属性赋值的地方进行校验
18.列举一些关于VUE性能优化和提升用户体验点?
- 第一就是uglifyjs-webpack-plugin,它是用来干嘛的呢?它是用来对代码进行压缩的,并可以配置在生产模式下取消项目中的console.log打印
安装指令:
yarn add -D terser-webpack-plugin 或 npm install terser-webpack-plugin -save -dev
在项目中引入和使用:
const Webpack = require('webpack')
// 引入该插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 引入压缩插件
const TerserPlugin = require('terser-webpack-plugin')
// 匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|ttf)(\?.*)?$/i
module.exports = {
transpileDependencies: ['vuetify'],
assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)这些文件都可以写里面
productionSourceMap: false,
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: '[path][name].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 0,
minRatio: 0.8,
}),
new Webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
},
},
}),
],
},
},
}
- 第二个就是 compression-webpack-plugin,对资源进行压缩
安装命令:
yarn add -D compression-webpack-plugin 或 npm install compression-webpack-plugin -save -dev
在项目中引入和使用:
const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩, 按需引用
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,//大于10k的进行压缩
minRatio: 0.8,
})
);
- 第三个就是html-webpack-plugin对面的html进行处理,对seo比较友好一点点
安装命令:
yarn add --dev html-webpack-plugin 或 npm i --save-dev html-webpack-plugin
在项目中引用:
const { resolve } = require('path')//nodejs 方法
const HtmlWebpackPlugin = require('html-webpack-plugin')
export.moduls= {
entry: {
one: ['./src/index1.js', './src/index2.js'],
two:'./src/indexTwo.js'
},
mode: 'development',
output: {
filename: '[name].js',
path: resole(_dirname, 'build')
},
module: {
rules: []
},
plugins: [
//默认:创建空的html 自动引入打包的资源(js css)
// template 自定义设置入口html filename 自定义文件名
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true, //html打包去除空格
removeComments: true // 移除注释
},
chunks:['one'], //指定引用的js
})
]
}
- 第四个就是purgecss-webpack-plugin移除多余没有使用的css样式代码
安装命令:
yarn add -D purgecss-webpack-plugin 或 npm install purgecss-webpack-plugin -save -dev
在项目中引用:
//用于生产环境去除多余的css
const PurgecssPlugin = require("purgecss-webpack-plugin")
//去掉不用的css 多余的css
plugins.push(
new PurgecssPlugin({
paths: glob.sync([path.join(__dirname, "./**/*.vue")]),
extractors: [
{
extractor: class Extractor {
static extract(content) {
const validSection = content.replace(
/<style([\s\S]*?)<\/style>+/gim,
""
);
return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];
}
},
extensions: ["html", "vue"]
}
],
whitelist: ["html", "body"],
whitelistPatterns: [/el-.*/],
whitelistPatternsChildren: [/^token/, /^pre/, /^code/]
})
);
- 第五个就是mini-css-extract-plugin它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。它支持CSS和SourceMaps的按需加载。
安装命令:
yarn add -D mini-css-extract-plugin 或 npm install --save-dev mini-css-extract-plugin
项目中应用:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins.push(
new MiniCssExtractPlugin({
linkType: "text/css",
})
)
//这里我也使用了默认配置