在前端学习里面, 很多人都是注重学习代码(html,CSS,JS). 或者是一些框架, 库(jQuery,vue,react), 或者是各种工具(webpack,gulp). 在以往的文章里面, 或者自己和别人交谈, 都有建议过别人多练, 不要闷头就写代码, 多深入了解当中的原理, 学习其中的思想. 但是除了代码方面的知识之外, 还有哪一些是作为一个前端, 应该扩展学习的呢? 下面简单罗列和整理了一下最学习经验
下面的知识, 可能不需要太过于深入, 详细的掌握, 但是必须要有所了解, 这样在开发上遇到问题, 解决问题的时候即使不是如虎添翼, 也是锦上添花.
2.http,https
前端而言, 不可避免的要和接口打交道. 除了和后台对接口, 请求数据, 渲染页面, 之外. 对 http 的请求, 也是要有一个了解, 比如 http 协议, 请求方式, 请求过程, 结果状态码等. 了解这些, 对开发的时候可能遇到的问题, 就可以大概知道问题是怎么产生的, 更快的知道怎么解决, 避免.
2-1. 请求
首先一个请求, 包含有请求头, 请求行, 请求正文. 具体是怎样境, 看下面的代码
如上所述
method 和 url 就是这个请求的请求行(这里是请求行部分信息, 其实请求行还包括 http 协议的版本等信息).headers 中的属性就是请求头, 里面的属性, 全部包含在请求的 header 里面, 是服务端获取客户端版本, 缓存等信息的一个途径. data 对应的就是请求正文, 也就是平常所说的参数.
2-2. 响应
在请求发出去, 并且响应已经回来的时候, 就时候信息可分为响应行, 响应头, 响应正文.
响应行
引用看云的一个请求作为实例, 如下代码就是这个请求的响应行, 返回请求的 http 协议及版本, 状态码, 请求状态等描述信息.
响应头
响应头和请求头格式一致, 返回版本, 缓存等信息.
响应正文
平常接触最多的就是响应正文, 也就是日常开发需要用到的数据. 开发者拿到这些数据之后, 再进行相应的处理.
2-3. 关于 https
关于 https . 下面可以先了解下 http 的缺点, https 就是 http 基础上做的加密处理.
1. 通信使用明文不加密, 内容可能被窃听 2. 不验证通信方身份, 可能遭到伪装 3. 无法验证报文完整性, 可能被篡改
3. 响应状态码
上面提到响应状态码, 在这里也简单写下. 在前端方面, 请求接口可能会接触到各种情况, 常见的有下面几个, 应该怎么解决, 就是具体问题, 具体分析.
4. 前端方面的安全性
4-1.XSS
XSS(Cross Site Scripting)是跨站脚本攻击, 为了区分 CSS, 所以缩写为 XSS.XSS 攻击方式是往 Web 页面插入恶意的 JavaScript 代码, 当用户浏览网页的时候, 插入的代码就是被执行, 从而达到攻击的目的.
其中应用比较多的一个就是, 在网页一些公用的交互区域. 比如搜索的文本框, 除了可以输入一些关键字, 还可以输入一些 JavaScript 代码, 一旦代码点击搜索, 代码就会被执行, 达到攻击的目的. 如下例子
在文本框中输入以上代码, 然后点击提交, 就会把用户的 cookie 弹出来.
XSS 防范
1. 将重要的 cookies 标记为 HTTP ONLY, 让 JavaScript 代码无法调用, 只有 http 能调用. 或者将重要的信息保存在 session 里面.
2. 只允许用户输入我们期望的数据. 如消费金额框只能输入数字和小数点.
3. 对数据进行加密处理.
4. 过滤或者移除特殊的 HTML 标签, 过滤 JavaScript 代码等.
4-2.CSRF
CSRF 的防御
1. 在表单里增加 Hash 值, 以认证这确实是用户发送的请求, 然后在服务器端进行 Hash 值验证.
2. 验证码: 每次的用户提交都需要用户在表单中填写一个图片上的随机字符串.
3. 修改, 增加重要信息, 比如密码, 个人信息的操作, 尽量使用 post. 避免使用 get 把信息暴露在 url 上面.
4-3. 反爬虫
和之前的防护 XSS 和 CSRF 攻击目的不一样, 反爬虫是为了防止网站重要的数据被别人拿走, 比如电商的交易额, 电影网站的票房统计, 音乐网站的评论等.
5. 渲染过程, 原理
1. 浏览器通过 DNS 对 URL 进行解析, 找出对应的 IP 地址;
2. 向 IP 地址发起网络请求, 进行 http 协议会话: 客户端发送报头(请求报头), 服务端回馈报头(响应报头)
3. 服务器根据请求, 交给后台处理, 处理完成后返回文件数据, 浏览器接收文件数据(HTML,JS,CSS, 图象等); 返回一个页面(根据页面上的外链的 URL 重新发送请求获取)
4. 浏览器接收文件完毕, 对加载到的资源进行语法解析, 以及相应的内部数据结构(网页渲染)
6. 跨域
跨域这方面, 平常接触的不多, 我们这边遇到也是让后台允许跨域(跨域资源共享), 但是这个跨域, 也是一个绕不开的话题, 受限于篇幅, 下面简单进行讲解.
6-1. 情形分析
6-2. 解决方案
网上的针对跨域的解决方案有很多, 大家参考着看就好. 虽然罗列这么多, 但是我只用过两种.
- , JSONP
- , document.domain + iframe
- , location.hash + iframe
- , Windows.name + iframe
- , postMessage
6, 跨域资源共享(CORS)
7, nginx 代理
8, Node.JS 中间件代理
9, WebSocket 协议
7. 性能优化
这里只讲个大概, 具体操作得靠自己自行问搜索引擎.
7-1. 首屏优化
按需加载, 非首屏图片使用预加载或懒加载, DNS, 压缩代码, 合并图片, 减少请求等.
7-2. 算法优化
减少沉余的代码, 控制循环的次数, 避免巨大函数等.
8.SEO
作为前端开发者, 在 SEO 方面接触得应该不少. 前端方面, 注意 SEO 的点也不少. 下面简单写下, 在我开发的项目里面, 也有几个项目是需要做 SEO 的, 个人的建议如下几点:
8-1.meta 标签
可定义关键词, 网站描述
8-2. 语义化 HTML 标签
一方面是, 利用 HTML 标签, 达到语义化的目的, 比如列表使用 ul,ol. 表格使用 table 等, 不建议什么元素都使用 div.
另一方面是尽可能使用 html5 提供的具有语义化的标签.
以前写法
建议写法
8-3.HTML 嵌套级别不宜过多
这一点就是尽量使 HTML 做到扁平化, 避免嵌套过多, 但是这点相对而言, 难度比较大.
8-4.img 标签四大属性不能省
alt 属性是为了让图片因网速慢, src 引用错误, 浏览器禁用图像, 用户使用屏幕阅读器等情况, 未成功显示时候, 仍可以显示文本, 让用户可大概知道这张图片大概是什么.
width 和 height 是为了防止因为图片无法显示, 造成页面重新渲染, 或者布局错乱.
8-5.h1-h6 标签的使用
1. 一个页面建议只出现一个 h1 标签, 而且一般是放在网页 log 上面使用.
2.h2 标签一般用于详情页的主标题. 详情页没有 logo, 标题使用 h1. 如有副标题, 使用 h3.
3.h1-h6 标签自带权重, 如果只为了设置字体大小, 或者区分样式, 不适合使用 h1-h6.
8-6. 其它方面
关于 SEO 的其他方式, 在网上看到有这样的方法, 但是我自己在开发上面没尝试过这样做, 这里就简单罗列下, 大家参考下.
避免 iframe 标签
重要内容谨慎使用 display:none;
a 标签尽量添加 title 属性
利用布局, 把重要内容 HTML 代码放在最前
使用 "rel=nofollow" 属性, 集中网站权重
9. 堆, 栈?
栈 (stack) 会自动分配内存空间, 会自动释放. 堆 (heap) 动态分配的内存, 大小不定也不会自动释放.
基本类型: Undefined,Null,Boolean,Number 和 String, 这 5 中基本数据类型可以直接访问, 他们是按照值进行分配的, 存放在栈 (stack) 内存中的简单数据段, 数据大小确定, 内存空间大小可以分配.
如下例子
如果修改了 b
虽然 b 一开始是通过 a 赋值, 但是 a 和 b 是独立的储存在栈内存里面, 修改其中一个, 不会对另一个有任何影响.
引用类型: 即存放在堆 (heap) 内存中的对象, 变量实际保存的是一个指针, 这个指针指向另一个位置.
如下例子
如果修改了 b
b 通过 a 赋值, a 和 b 就共用了一个堆内存, 修改了 a 或者 b, 都直接修改了堆内存的值, 就会对另一个产生影响.
10. 响应式和自适应
关于这两个的概念, 现在没怎么听说了. 可能是因为现在主流的就是 PC 和手机是分开两个项目的原因, 也可能是因为这两个概念更应该是设计图的工作. 上一次和别人谈论这个问题, 还是在一年前, 那个时候我还是切图仔.
但是关于这两个概念的区别, 大家知道一下就好, 下面看两张图片估计就差不多懂了.
简单来说:
自适应: 一个网页, 根据屏幕宽度的改变而改变. 代码只有一套. 在个别的屏幕上, 排版这个比较丑, 但是设计, 开发成本低.
响应式: 一个网页, 根据屏幕的宽度的改变而展示不同的效果, 代码基本是两套以上. 在所有屏幕上都展示很好的效果, 但是设计, 开发成本高.
如果大家对编程, Web 前端感兴趣, 想要了解学习, 打算深入了解这个行业的朋友, 可以加下我们的前端学习扣 qun :767273102, 不论你是学生还是想转行的朋友, 我都欢迎, 不定期分享干货, 网页制作, 网站开发, Web 全栈开发, 从 0 基础开始的的 HTML+CSS+JavaScript.jQuery,Ajax,node,angular 框架等到移动端 HTML5 的项目实战[视频 + 工具 + 系路线图] 都有整理, 分享给小伙伴: 学习前端我们是认真的
11. 小结
之所以要发这么一片, 总结这一些概念, 是因为我和别人交谈的时候, 遇到这些总是有一个是是而非的概念. 所以最近就抽空看了下这些概念, 也和大家分享下这一些知识. 这些概念知识, 可能只是了解一下, 大概知道就好, 有些可能要深入了解下, 这个就看个人所需了.
来源: http://www.jianshu.com/p/fb4a563851b9