劝了别人无数次，让别人喝鸡汤，帮别人填坑，自己却掉坑里了1.前言中的前端学习，很多人都关注学习代码（html、css、js）。或者一些框架、库（jquery、vue、react），或者各种工具（webpack、gulp）。在之前的文章中，或者跟别人交流的时候，我都建议别人多多练习，不要光写代码，多学习原理和思想。但是除了代码的知识，作为前端还应该学习什么？以下是近期学习资源的简要列表和整理。如果大家有其他推荐，欢迎在评论区留言。下面的知识可能不需要太深入太详细，但是一定要了解，这样在开发中遇到问题的时候，即使在解决问题的时候没有锦上添花，也是锦上添花。2、对于http和https前端，不可避免的要处理接口。除了与后台交互，请求数据，渲染页面。对于http请求，你也要有一个了解，比如http协议，请求方法，请求过程，结果状态码等，知道了这些，在开发中可能遇到问题的时候，就可以大致知道问题是怎么产生的，知道怎么处理的更快地解决和避免它们。2-1.Request首先是请求，包括请求头、请求行、请求文本。具体看下面的代码:'Fred',lastName:'Flintstone'}});上面说了，method和url就是这次请求的请求行（这里是请求行的一部分信息，其实请求行还包括了http协议的版本等信息）。headers中的属性就是请求头，里面的属性都包含在请求的头中，是服务器获取客户端版本、缓存等信息的一种方式。数据对应请求文本，也就是通常所说的参数。2-2。Response当请求发出并且响应已经返回时，信息可以分为响应行、响应头和响应文本。响应行以看云请求为例。下面的代码是本次请求的响应行，返回请求的http协议和版本、状态码、请求状态等描述信息。请求地址：https://www.kancloud.cn/yunye/axios/comment?article_id=234845&page=1请求方式：GET状态码：200OK远程地址：117.23.61.221:443响应头响应头格式与请求头，返回的版本，缓存等信息。响应文本通常是接触最多的响应文本，是日常开发需要的数据。开发人员拿到数据后，会进行相应的处理。2-3。关于https关于https。我们先了解一下http的缺点。https是在http的基础上进行加密处理。1.通讯采用明文不加密，内容可能被窃听。2.通讯方身份未经核实，可能存在伪装。3.无法验证消息的完整性，可能被篡改。2-4.关于http和https的相关信息这里只是简单的提一下，详细的推荐看下面的信息。HTTP教程HTTP协议【详解】-经典面试题一个故事讲完https3.ResponseStatusCode响应状态码上面说了，这里简单写一下。在前端，请求接口可能会暴露在各种情况下。常见的如下。如何解决，具体问题具体分析。状态码含义200请求成功400参数错误403拒绝或禁止访问（无权限访问）404地址不存在405客户端请求中的方法被禁止（一般是请求方法错误）500服务器报错502请求超时,无效网关503ServerOverloadormaintenance,unabletorespond3-1.参考详细的状态码请参考以下内容。HTTP状态代码4.前端安全4-1.XSSXSS（CrossSiteScripting）是一种跨站脚本攻击。为了区别CSS，简称为XSS。XSS攻击方式是在网页中插入恶意的JavaScript代码。当用户浏览网页时，插入的代码就会被执行，从而达到攻击的目的。比较多的应用之一是在网页的一些公共交互区域。比如在搜索文本框中，除了可以输入一些关键字，还可以输入一些JavaScript代码。一旦点击代码进行搜索，代码就会被执行，从而达到攻击的目的。下面的例子在文本框中输入上面的代码，然后点击提交，就会弹出用户的cookie。XSS预防1.将重要的cookies标记为HTTPONLY，这样就无法调用JavaScript代码，只能调用http。或者在会话中保存重要信息。2.只允许用户输入我们期望的数据。例如，在消费金额框中只能输入数字和小数点。3.加密数据。4.过滤或去除特殊的HTML标签，过滤JavaScript代码等。4-2.CSRFCSRF（Cross-siterequestforgery）是一种跨站请求伪造。XSS利用站点中受信任的用户。与XSS不同，CSRF通过假装来自受信任的用户并在受信任的网站上发出请求来窃取信息。事实上，攻击者盗用了受害者的身份，并以受害者的名义向网站发出了恶意请求。CSRF攻击的思路参考一张CSRF攻击原理和防御的图来说明。图片来自：CSRF攻击原理及防御按照步骤，看了图片相信不难理解，就是在一个网站里预留一个cookie，然后访问一些危险的网站，然后用户信息被危险网站窃取。CSRF防御1.在表单中添加一个Hash值来验证这确实是用户发送的请求，然后在服务器端验证Hash值。2、验证码：用户每次提交时，都需要用户在表单中的图片上填写一个随机字符串。3.修改和添加重要信息，如密码、个人信息操作，尽量使用post。避免使用get来暴露url上的信息。4-3。反爬虫不同于以往的XSS、CSRF攻击防护。反爬虫的目的是为了防止网站的重要数据被别人拿走，比如电商的交易金额、电影网站的票房统计、音乐网站的评论等等。反击爬虫，前端工程师的脑洞能有多大？五、渲染过程，原理1、浏览器通过DNS解析URL，找出对应的IP地址；2、向IP地址发起网络请求，进行http协议会话：客户端发送一个header（请求头），服务器返回Header（响应头）3、服务器根据请求，处理完成后返回文件数据，浏览器收到文件数据（HTML、JS、CSS、图片等）；返回一个页面（根据页面上的外部链接）4.浏览器收到文件后，解析加载的资源和对应的内部数据结构（网页渲染）6.在跨域和跨域方面，我们平时接触不多，这里的相遇也是为了让后台允许跨域（跨域资源共享），但是这个跨域也是绕不开的话题。由于篇幅局限性，以下作简要说明。6-1。情况分析URL描述是否允许通信http://www.example.com/a.js,http://www.example.com/lab/b.js同域名不同文件或路径允许http://www.example.com:8000/a.js,http://www.example.com/b.js同一个域名，不允许不同的端口http://www.example.com/a.js,https://www.example.com/b.js同一个域名，不同的协议不允许http://www.example.com/a.js,http://192.168.2xx.2x/b.js域名和域名对应同一个ip不允许http://www.example.com/a.js,http://x.example.com/b.js,http://domain.com/c.js主域相同子域不同允许http://www.example.com/a.js,http://www.demo.com/b.js不允许不同的域名6-2.解决方案网上有很多跨域的解决方案，大家看看参考一下即可。虽然列出了这么多，但我只用过两个。1、jsonp2、document.domain+iframe3、location.hash+iframe4、window.name+iframe5、postMessage6、跨域资源共享（CORS）7、nginx代理8、nodejs中间件代理9、WebSocket协议6-3。参考数据前端常用跨域解决方案（全）前端跨域知识总结七、性能优化这只是一个大概的思路，具体操作还得自己问搜索引擎。7-1。首屏优化按需加载，非首屏图片使用预加载或延迟加载、DNS、压缩代码、合并图片、减少请求。7-2。算法优化减少冗余代码，控制循环次数，避免庞大的函数等。8.SEO作为前端开发人员，应该和SEO有很多接触。在前端，SEO需要注意的点很多。下面简单写下。在我开发的项目中，也有几个需要SEO的项目。我个人的建议如下：8-1．meta标签可以定义关键字，网站描述
