共计 3334 个字符，预计需要花费 9 分钟才能阅读完成。
#### 1. 页面从输出 URL 到页面加载显示实现，这个过程中都产生了什么？（流程说的越具体越好）
1. 输出域名地址
2. 发送至 DNS 服务器并取得域名对应的 WEB 服务器 IP 地址；
3. 与 WEB 服务器建设 TCP 连贯；
4. 服务器的永恒重定向响应（从 http://example.com 到 http://www.example.com）
5. 浏览器跟踪重定向地址
6. 服务器解决申请
7. 服务器返回一个 HTTP 响应
8. 浏览器显示 HTML
9. 浏览器发送申请获取的资源（如图片、音频、视频、CSS、JS 等等）
10. 浏览器发送异步申请
#### 2. 请形容一下 cookies，sessionStorage 和 localStorage 的区别？
cookie 是网站为了标示用户身份而贮存在用户本地终端（Client Side）上的数据（通常通过加密），
，数据会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会主动把数据发给服务器，仅在本地保留。
存储大小：
cookie 数据大小不能超过 4k。
sessionStorage 和 localStorage 尽管也有存储大小的限度，但比 cookie 大得多，能够达到 5M 或更大。
有期工夫：
localStorage 存储持久数据，浏览器敞开后数据不失落除非被动删除数据；sessionStorage 数据在以后浏览器窗口敞开后主动删除。cookie 设置的 cookie 过期工夫之前始终无效，即便窗口或浏览器敞开。
#### 3. 如何实现浏览器内多个标签页之间的通信? (阿里)
调用 localstorge、cookies 等本地存储形式
#### 4. 网页验证码是干嘛的，是为了解决什么平安问题。
辨别用户是计算机还是人的公共全自动程序。能够避免歹意破解明码、刷票、论坛灌水；
无效避免黑客对某一个特定注册用户用特定程序暴力破解形式进行一直的登陆尝试。
#### 5. 一个页面上有大量的图片，加载很慢，你有哪些办法优化这些图片的加载，给用户更好的体验。
（1）图片懒加载，在页面上的未可视区域能够增加一个滚动条事件，判断图片地位与浏览器顶端的间隔与页面的间隔，如果前者小于后者，优先加载。
（2）如果为幻灯片、相册等，能够应用图片预加载技术，将以后展现图片的前一张和后一张优先下载。
（3）如果图片过大，能够应用非凡编码的图片，加载时会先加载一张压缩的特地厉害的缩略图，以进步用户体验。
（4）如果图片展现区域小于图片的实在大小，则因在服务器端依据业务须要后行进行图片压缩，图片压缩后大小与展现统一。
#### 6. 请写出一些前端性能优化的形式，越多越好
1. 缩小 dom 操作
2. 部署前，图片压缩，代码压缩
3. 优化 js 代码构造，缩小冗余代码
4. 缩小 http 申请，正当设置 HTTP 缓存
5. 应用内容散发 cdn 减速
6. 动态资源缓存
7. 图片提早加载
#### 7.HTTP 状态码及其含意
状态码类型
状态码 类别 起因短语
1XX Information（信息性状态码）接管的申请正在解决
2XX Success（胜利状态码）申请失常处理完毕
3XX Redirection（重定向状态码）须要进行附加的操作以实现申请
4XX Client Error（客户端谬误状态码）服务器无奈解决申请
5XX Server Error（服务端谬误状态码）服务器解决申请出错
204：服务器胜利解决，但未返回内容。
304：Not Modified 未修改。所申请的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存拜访过的资源，通过提供一个头信息指出客户端心愿只返回在指定日期之后批改的资源
400：Bad Request 客户端申请的语法错误，服务器无奈了解
403：Forbidden 服务器了解申请客户端的申请，然而拒绝执行此申请
404：Not Found 服务器无奈依据客户端的申请找到资源（网页）。通过此代码，网站设计人员可设置 ” 您所申请的资源无奈找到 ” 的共性页面
#### 8. 什么是同源：协定雷同 域名雷同 端口雷同
同源政策的目标，是为了保障用户信息的平安，避免歹意的网站窃取数据。
如果非同源，共有三种行为受到限制。
（1）Cookie、LocalStorage 和 IndexDB 无奈读取。
（2）DOM 无奈取得。
（3）AJAX 申请不能发送。
#### 9. 对于建站平安防护
答：要做好防 XSS、CSRF、SQL 注入攻打.DDOS 攻打。
XSS 概念:
译为跨站脚本攻打, 具体是指攻击者在 Web 页面里插入歹意 Script 脚本，当用户浏览该网页时，Script 代码会被执行，从而进行歹意攻打。
XSS 预防:
要害 cookie 字段设置 httpOnly
输出查看, 特殊字符 < > / & 等, 对其进行本义后存储
CSRF 概念：
实质上讲，是黑客将一个 http 接口中须要传递的所有参数都预测进去，而后不论以什么形式，他都能够依据他的目标来任意调用你的接口，对服务器实现 CURD。
CSRF 预防：
应用验证码，更高级用图灵测试
SQL 概念：
通常没有任何过滤，间接把参数寄存到了 SQL 语句当中
SQL 预防：
基本上避免 SQL 注入的办法，就是参数化查问或者做词法剖析。
DDOS 概念：
利用木桶原理，寻找利用零碎利用的瓶颈；阻塞和耗尽；以后问题：用户的带宽小于攻打的规模，噪声拜访带宽成为木桶的短板。
DDOS 预防：用软硬件联合的形式来进攻是最无效的
#### 10. 对前端工程化的了解
1. 开发标准
2. 模块化开发
3. 组件化开发
4. 组件仓库
5. 性能优化
6. 我的项目部署
7. 开发流程
8. 开发工具
#### 11. 常见的浏览器兼容问题？
1. 不同浏览器的标签默认的内. 外补丁不同。
*{margin:0;padding:0;}
2. 图片默认有间距
应用 float 属性为 img 布局
3. 居中问题（而 FF 默认为左对齐）
margin: 0 auto;
4.CSS 兼容前缀
-ms- IE
-moz- Firefox
-o- Opera
-webkit- Chrome
5. 应用 CSS Hack
如：+:IE6,7 的前缀
-:IE6 的前缀
12. 跨域
通过 jsonp 跨域
1.）原生实现：
<script>
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
// 传参并指定回调执行函数为 onBack
script.src = ‘http://www…..:8080/login?user=admin&callback=onBack’;document.head.appendChild(script);
// 回调执行函数 function onBack(res) {
alert(JSON.stringify(res));
}
</script>
2. 跨域资源共享（CORS）只有服务端设置 Access-Control-Allow-Origin 即可
- nodejs 中间件代理跨域
#### 12. 性能优化？
1. 应用 CDN
2. 图片懒加载
3. 应用内部 JavaScript 和 CSS
4. 压缩 JavaScript、CSS、字体、图片等
5. 优化 CSS Sprite
6. 缩小 HTTP 申请数
7. 缩小 DNS 查问
8 缩小 DOM 元素数量
9. 缩小 DOM 操作
10. 把脚本放在页面底部
#### 13. 什么是 HTTP 协定：
HTTP 协定传输的数据都是未加密的，也就是明文的，因而应用 HTTP 协定传输隐衷信息十分不平安，HTTPS 协定是由 SSL+HTTP 协定构建的可进行加密传输、身份认证的网络协议，要比 http 协定平安。
HTTPS 和 HTTP 的区别次要如下：
1、https 协定须要到 ca 申请证书，个别收费证书较少，因此须要肯定费用。
2、http 是超文本传输协定，信息是明文传输，https 则是具备安全性的 ssl 加密传输协定。
3、http 和 https 应用的是齐全不同的连贯形式，用的端口也不一样，前者是 80，后者是 443。
4、http 的连贯很简略，是无状态的；HTTPS 协定是由 SSL+HTTP 协定构建的可进行加密传输、身份认证的网络协议，比 http 协定平安。
前端加密形式 https：是在 http 根底上加了 SSL 协定，应用 443 端口,http 是 80 端口;
// 对于前端题库总结二到了这里就完结啦, 是不是很简略! 心愿对你有所帮忙, 让咱们一起致力走向巅峰!
