面试题﹣前端基础&&优化

1，在浏览器地址栏输入一个网址，从敲下回车键，到页面完全加载完毕，中间都发生了什么？

1，如果地址栏中输入的是一个域名，浏览器会先使用自己的DNS缓存进行域名解析，转为IP地址，如果缓存中不存在，则会请求使用上层DNS（操作系统的DNS），操作系统会先查询本地HOST文件，如果HOST文件中不存在则会使用网络设置的DNS进行域名解析。最终得到域名对应的IP地址。

2，获得IP地址后，浏览器按照IP地址进行连接(tcp连接)，连接成功之后按照http协议的格式（请求行，请求头，请求头）发送http请求，服务器会返回响应报文（响应行，响应头，响应体），浏览器收到响应报文后，会根据响应头中的Content-Type字段来决定如何进行下一步处理，对于普通的网页Content-Type值是text/html，浏览器就会在页面中打开本次请求响应体中的数据。

3，在打开页面时，浏览器首先对html文本进行解析，创建DOM树，然后将每个节点渲染到页面上，其中如果出现了附带资源的标签（例如img,script等），浏览器会再次按照这些资源的src发送请求，当请求完成之后将请求内容插入到页面中，其中script标签资源是同步加载的，其他资源是异步加载的。

问：打开一个有很多图片的页面时，浏览器与服务器会建立多少个连接？
答：一般情况下1个连接。如果图片来自不同的域名则会是多个连接。

2，如何优化网页打开的速度？

1，尽量减少页面资源的请求次数（可以通过base64图片、合并图片、合并js，css文件实现）。
2，对页面代码进行压缩（主要是js代码压缩）
3，合理地使用懒加载。
4，对于不需要支持多国语言的中文网页，可以使用放弃使用UTF-8，使用GBK编码。
(以上是从前端角度进行优化，下面几条是从服务端角度优化)
5，网页中的静态资源使用CDN服务。
6，使用缓存，服务端使用redis进行接口缓存，同时在响应头中通过lastmodified,Etag等字段控制浏览器缓存。
7，使用gzip进行数据压缩。
8，使用多域名，部分浏览器对于同一个域名的并发请求量设置有上限，所以可以把页面资源分布在不同域名中，例如静态资源独自使用一个域名。

3，HTTP协议的状态码都有哪些？分别是什么意思？

200，请求成功。
301，重定向。
304，使用缓存。
403，禁止访问。
404，资源不存在
500，服务端错误。

问：axios什么情况下catch？
答：1，2，3开头.then，4,5开头.catch
问：Fetch呢？
答：1，2，3开头.then，4,5开头.catch

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

都是解决网站对于老旧版本浏览器的兼容问题。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

5，什么是XSS攻击？怎么防范？

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
防范：
首先代码里对用户输入的地方和变量都需要仔细检查长度和对<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。避免直接在cookie 中泄露用户隐私，例如email、密码等等。其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。

6，什么是CSRF攻击？怎么防范？

Cross—Site Request Forgery，跨域请求伪造。
CSRF攻击攻击原理及过程如下：

1. 用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
   2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
2. 用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
3. 网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
4. 浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。
   防范：在服务端敏感接口中添加referer判断。

7，HTTP和HTTPS的区别是什么？

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。
为什么HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

8，栈和队列的区别是什么?js中怎样实现栈结构？

栈和队列都是线型数据结构，栈只有一个入口，同时也是出口，所以数据遵循先进后出，后进先出的规则。队列一侧是入口，另一侧是出口，所以数据先进先出，后进后出。
Js中的数组可以实现栈和队列。Push和pop方法是一对栈操作，push和shift是一对队列操作。

9，关于Http 2.0 你知道多少？

HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。
它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。

10，性能优化（最少5条）

（1）减少http请求，使用缓存，接口尽可能做到重复使用
（2）优化网络连接，静态资源使用CDN
（3）尽量压缩css和js文件大小
（4）采用less或者sass
（5）图片懒加载，精灵图和雪碧图
（6）数据请求异步操作，防止页面卡顿

11，webSocket是什么？

webSocket是一种双工通信技术，可以实现服务器主动向客户端发送数据。

12，微信小程序和pc端开发的区别？

前端开发的项目时运行在浏览器中的。能够调用浏览器提供的webAPI
微信小程序是运行在微信提供的平台中的。能够调用微信提供的API。
微信API的缺点
1，没有状态管理工具
2，wxs功能过于单调。

13，什么是WebWorker？

WebWorker是h5中新增的WebAPI，用于启动一个独立的线程，主线程和分线程只能通过相互发送消息进行通信。
在哪些场景下需要使用WebWorker
当前端页面中有耗时很长的代码需要执行时，可以放在worker中执行，否则会卡塞主线程，影响用户体验。

1,4，webpack的功能

webpack是为前端开发设计的自动化打包工具，能够对项目中的js、css、图片等资源进行打包（其中js可以直接打包，其他类型资源需要各自对应的loader支持），相比于传统的grunt、gulp等构建工具，webpack在打包js代码时，能够识别多种模块化语法，进行模块化打包。

Webpack怎么打包图片到js中
对于小图片，打包之后会形成base64图片，而大图片会打包成一个url地址。
vue项目中放在哪些位置的图片会被打包？如何避免大图被打包？
放在assets中的静态资源会被打包，将大图片放在public文件夹中。
webpack怎么打包css？原理是什么？
使用css-loader和style-loader，打包原理是通过js代码在页面中创建style标签，然后将css代码插入。
webpack能否打包字体文件
能，需要file-loader。
webpack如何生成多个HTML页面？
将webpack配置文件中的打包入口配置为多个入口。

15，常见兼容性问题有哪些？

png24位的图片在iE6浏览器上出现背景
解决方案是做成PNG8.也可以引用一段脚本处理.
浏览器默认的margin和padding不同
加一个全局的*{margin:0;padding:0;}来统一。

16，前端页面中的图形绘制使怎么做？

可以使用svg或者canvas。