【面试】前端面试之开发性能篇

文章目录

如何优化前端的性能？
什么叫优雅降级和渐进增强？
如何规避JavaScript多人开发函数重名的问题？
请说出三种减低页面加载时间的方法？
你所了解到的Web攻击技术？
前端开发中，如何优化图像？图像格式的区别？
浏览器是如何渲染页面的？
请简述下你遇到过的兼容性的问题？
什么是单点登入？前端如何去做单点登入？
移动端H5前端性能优化指南？
你是否处理过兼容问题？
请简述你遇到过的前端安全性问题？

如何优化前端的性能？

优化的策略是： ①减少请求的次数 ②减小资源的大小 ③提高响应和加载的速度 ④优化资源加载时机 ⑤优化加载方式

合并、压缩、css,js文件（webpack实现，减小资源的大小）

Nginx开启Gzip，进一步压缩资源（减小资源的大小）

图片资源运用cdn加速（提高加载速度）

符合条件的图标做base64处理（减小资源大小）

减少http请求（css雪碧图）

css放在顶部、js放在底部（js单线程，会阻塞页面）

设置缓存（强缓存和协商缓存，提高加载速度）

使用svg、jpeg2000,jpegxr 和webp的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显

使用图片的懒加载

合并请求

使用组件防止代码冗余

函数防抖 在事件被触发n秒后再执行回调，然后在这n秒内又被触发，则重新计时； 典型的案例就是输入搜索；输入结束后n秒才进行搜索请求，n秒你又输入的内容，就重新计时

函数节流 规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。 典型案例：鼠标不断点击触发，规定在n秒内多次点击只有一次生效

用户体验：增加了返回顶部按钮，添加防抖技术

什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 graceful degradation 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

区别： a.优雅降级是从复杂现状开始，并试图减少用户体验的供给
b.渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断地扩充，以适应未来环境的需要
c.降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

如何规避JavaScript多人开发函数重名的问题？

a.命名空间 b.封闭空间 c.js模块化mvc（数据层、表现层、控制层） d.seajs e.变量转换成对象的属性
f.对象化（面向对象编程）

具体可看这位老哥的介绍：https://www.cnblogs.com/luoge-Snippet/p/9271320.html

一般来说有经验的程序员会尽量少的使用全局变量，尽可能使用局部变量，这不仅会减少变量重名的几率，更会减少内存开销，因为局部变量一般都会在函数结束后自动销毁释放出内存，而全局变量会直到进程结束才会被销毁
掉。其次，当我们需要一个作用域来关住变量时一般会用一个匿名函数(也就是形成一个封闭的空间)来充当这个作用域。如：

1 (function(){
2     var gender = 'girl';
3 })();
4 console.log(gender);//结果是：gender is not defined

匿名函数充当作用域这种方法一般已经能够满足一部分程序员的需求了，但函数重名怎么解决？项目中必须要使用大量全局变量又该如何解决呢？

其实解决办法跟上面方法的思路一样，只是有一点技巧性，JS既然缺少作用域限制，那我们自己再给它人为加上一个作用域，并且保证每个作用域不重复，这样一来问题不就解决了吗。好了下来我们缺少的就是这么一个神奇的作用域替代品，令人开心的是，这个东西本身JS就有，那就是对象！

 1 // A同学负责的工作人员信息2 var A = {} //定义一个空对象3 A.name = 'tom';4 A.gender = 'male';5 A.age = 30;6 A.showName = function() {7     alert(this.name);8 }9 A.showAge = function() {
10     alert(this.age);
11 }
12
13 // B同学负责的老师信息
14 var B = {}
15 B.name = 'Jack';
16 B.gender = 'male';
17 B.age = 28;
18 B.showName = function() {
19     alert(this.name);
20 }
21 B.showAge = function() {
22     alert(this.age);
23 }25 // 正常使用，不会冲突
26 console.log(A.name);//结果：tom
27 console.log(B.name);//结果：Jack
28 A.showAge();//结果：30
29 B.showAge();//结果：28

请说出三种减低页面加载时间的方法？

1.压缩css、js文件
2.合并js、css文件，减少http请求
3.外部js、css文件放最底下
4.减少dom的操作，尽可能用变量减少对不必要的dom的操作

//以下是更详细的解答：

内容方面：

减少http请求

减少dom元素的数量

使得ajax可以缓存

针对css

把css放到代码也的上端

从页面中剥离js与css

精简js与css

避免css表达式

针对js

脚本放在hrml代码页的底部

从页面中剥离js和css

精简js与css

移除重复的脚本

面向图片

优化图片

不要再html上面使用缩放图片

使用恰当的图片格式

使用css Sprites技巧对图片进行优化

你所了解到的Web攻击技术？

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击 （3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

前端开发中，如何优化图像？图像格式的区别？

优化图像： 1）不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
2）使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
3）使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于JPEG。
而修饰图片通常更适合用无损压缩的PNG。
GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
4）按照HTTP协议设置合理的缓存。 5）使用字体图标webfont、CSS Sprites(雪碧图，精灵图)等。
6）用CSS或JavaScript实现预加载。
7）WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式的区别： 矢量图：图标字体，如 font-awesome；svg 位图：gif,jpg(jpeg),png
区别： 1）gif：是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
2）JPEG格式：是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo、各种小图标icons等。
3）png：PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
关于透明：PNG8支持索引透明和alpha透明；PNG24不支持透明；而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明。
优缺点： 1）能在保证最不失真的情况下尽可能压缩图像文件的大小。 2）对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

浏览器是如何渲染页面的？

渲染的流程如下： 1）解析HTML文件，创建DOM树；
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2）解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
3）将CSS与DOM合并，构建渲染树（Render Tree）； 4）布局和绘制，重绘（repaint）和重排（reflow）。

详细一点地说：

1.在浏览器输入url
2.浏览器先查看浏览器缓存–系统缓存–路由器缓存，如果缓存中存在页面的内容，就会直接在屏幕当中显示
3.在发送http请求前，浏览器会开启一个线程来解析域名（DNS解析）,获取相应的IP地址
4.浏览器向服务器发起TCP连接，与服务器通过TCP三次握手建立连接
5.握手成功后，浏览器再向服务器发起http/https请求，请求数据包
6.服务器处理收到的请求，将数据返回给浏览器
7.浏览器收到http响应
8.解析html，构建dom树
9.解析css，生成css规则树
10.合并dom树和css规则树，生成render树
11.布局render树
12.绘制render树，即绘制页面像素信息
13.GPU将各层合成，结果呈现在浏览器的窗口当中

（简单记忆：dns – tcp --http请求–服务器响应–渲染）

请简述下你遇到过的兼容性的问题？

css方面
1.ie6无法定义1px左右高度的容器，是因为默认行高造成的，解决方法：overflow:hidden zoom:0.08 line-height:1px;
2.
待完善

什么是单点登入？前端如何去做单点登入？

单点登入：在多个应用系统当中，只需要登录一次，就可以访问其他相互信任的应用系统了。
方式：
以Cookie作为凭证媒介
①最简单的单点登录实现方式，是使用cookie作为媒介，存放用户凭证。
用户登录父应用之后，应用返回一个加密的cookie，当用户访问子应用的时候，携带上这个cookie，授权应用解密cookie并进行校验，校验通过则登录当前用户。
②用共享cookie的方式，使其同域名，可以把token存在cookie里，把cookie的路径设置成顶级域名下，这样在当前浏览器打开的所有子域都能读取cookie中的token。拿到的cookie里的token，进入另一个系统时写个判断，例如利用vue的路由管理，判断用户信息与后台的是否一致，是的话允许进入，否则直接跳转到登录页
通过JSONP实现
对于跨域问题，可以使用JSONP实现。
用户在父应用中登录后，跟Session匹配的Cookie会存到客户端中，当用户需要登录子应用的时候，授权应用访问父应用提供的JSONP接口，并在请求中带上父应用域名下的Cookie，父应用接收到请求，验证用户的登录状态，返回加密的信息，子应用通过解析返回来的加密信息来验证用户，如果通过验证则登录用户。
通过页面重定向的方式
最后一种介绍的方式，是通过父应用和子应用来回重定向中进行通信，实现信息的安全传递。
父应用提供一个GET方式的登录接口，用户通过子应用重定向连接的方式访问这个接口，如果用户还没有登录，则返回一个的登录页面，用户输入账号密码进行登录。如果用户已经登录了，则生成加密的Token，并且重定向到子应用提供的验证Token的接口，通过解密和校验之后，子应用登录当前用户。
使用独立登录系统
一般说来，大型应用会把授权的逻辑与用户信息的相关逻辑独立成一个应用，称为用户中心。
用户中心不处理业务逻辑，只是处理用户信息的管理以及授权给第三方应用。第三方应用需要登录的时候，则把用户的登录请求转发给用户中心进行处理，用户处理完毕返回凭证，第三方应用验证凭证，通过后就登录用户。

移动端H5前端性能优化指南？

加载优化

1.减少http请求次数
A.CSS Sprites:合并小图片，使用雪碧图（减少Http请求）
B.合并 CSS 和 JS 文件

2.使用缓存
A.缓存一切可缓存的资源
B.使用时间戳更新Cache缓存

3.压缩代码
A.压缩（例如，多余的空格、换行符和缩进、注释）
B.启用GZip（提高首屏加载速度）

4.首屏优化
A.懒加载
B.按需加载、滚动加载

脚本优化

1.减少重绘和回流
2.缓存dom选择与计算
3.尽量使用事件代理，避免批量绑定事件
4.尽量使用Id选择器

css优化

1.css写头部，js放尾部，防止阻塞
2.避免图片和iframe的空src
3.移除空的css规则
4.不滥用float

渲染优化

1.减少dom节点
2.html使用viewport
3.适当使用canvas动画

你是否处理过兼容问题？

1️⃣IOS移动端click事件300ms的延迟响应
解决方案： fastclick

2️⃣IOS new Date(‘2021-02-14 00:00:00’).getTime()报错NAN
解决方案： const date = ‘2020-02-14 00:00:00’ new Date(date.replace(/-/g,’/’));

3️⃣

请简述你遇到过的前端安全性问题？

1️⃣XSS攻击（Cross Site Scripting）
核心：恶意的脚本注入
描述：攻击者通过目标网站注入恶意脚本，使之在用户的浏览器上运行，利用这些恶意的脚本，攻击**者可获取用户的敏感数据（如cookie、sessionid）等，进而危害数据安全。
方案： ①输入校验
②cookie配置，token配置在cookie当中更为安全，不能存在localstorage中，js可读
③X-XSS-Protection可在检测到反射的跨站点脚本（XSS）攻击时阻止页面加载

2️⃣CSRF攻击
核心： 利用用户身份伪造请求
描述： 利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，冒充用户对被攻击的网站发送执行某项操作的请求
**方案：**①登录token过期机制
②关键请求使用验证码或csrf token机制
③检测http referer是否同域名

3️⃣文件上传漏洞
核心： 文件类型限制
描述： 文件后缀及文件内容没有严格限制
方案： ：
①文件上传使用白名单（前后端都进行检验）

4️⃣缺失静态资源完整性校验
核心： CDN资源劫持
描述： 存储在CDN中的静态资源，攻击者劫持了CDN，或者对CDN中的资源进行了污染

常见前端安全漏洞及防范方法