来来来，程序猿哥哥给产品汪讲技术:前端篇

底部有惊喜，关注更多精彩

不积跬步，无以至千里

不积小流，无以成江海

生活中总有些东西值得分享

7TCoding 科技是驱动时代的引擎，7TCoding与伙伴们共同做一点点小事情，共建最具影响力、传播性、链接性、赋能性的平台。7TCoding最懂你！

唠叨两句啊：原创不易，转载请注明出处！

在互联网打拼这么多年，本猿纵横在错综复杂的伪需求与真需求中，见过各式各样的产品汪汪、测试猫猫、PM吼吼，也经历过BUG缠身噩梦般的情境中，也算是经历颇深，本猿发现，在与产品沟通的过程中，由于立场不用、思维不同、专业不同、角度不同，对需求的撕逼可谓是百花缭乱，你喝你的特仑苏，我吃我的肉夹馍，所以经常处在水深火热之中，但是久而久之，觉得为什么我们不能和谐相处呢，你多懂点我，我多懂点你，岂不是更快的步入“婚姻的殿堂”，ha ha ha.........好了废话不多说，让哥哥给产品汪讲讲关于前端的那些事儿。

前端篇

AJAX技术的妙用

异步加载模式可在最大程度上缓解用户等待时间的焦虑

意义：

1.发起网络请求：XmlHttpRequest2.无须刷新，动态操作网页

实现方式：

实现异步拉取数据并展示在当前页面的技术：不用刷新网页，就能和后台交互获取数据，应用于当前网页的问题。阿贾克斯技术，是将JavaScript与XML技术组合起来应用

DOM是什么

虚拟DOM是模拟简单的DOM树，可演练所有的DOM操作，等时机成熟将模拟DOM和实际DOM作对比，算出差异，一次性的改变真正的DOM树

DOM是文档对象模型，JavaScript是用来操作DOM的技术，通过操作DOM会显示相应的数据

静态网页与动态网页

动态网页一般需要由程序来处理（ASP, JSP, PHP, Python, Ruby等），并由数据库提供支撑

静态网页不需要后台程序干预处理，数据不需要更新，一般也不需要维护

分析URL的结构

标准的URL由4部分构成：protocol, hostname, port, path, parameters

• parameters：参数或查询，
• path：路径，最终文件所在的路径和文件名
• port：端口号，一般默认HTTP的端口号为80，HTTPS的默认端口号为443，定义了从规定的端口号访问服务器的先关资源
• hostname：主机名，mq.qq.com 就是hostname
• protocol：协议，是http:// 部分，定义了只能通过HTTP规则访问该页面资源

网页基础知识：

表单：表单是用户与服务器数据交换的承载体

意义：

• submit：标记此处为提交按钮；
• type：标记此处为文本输入；
• input：标记了此处为输入框；
• method：标记了提交到网站的方法为GET（一般为GET或POST）；
• action：标记了所有数据内容将向引号内的地址提交；
• form：标记了这是一个表单

H5应用程序缓存简介Application Cache：

定义：HTML 5 中定义的离线存储技术标准

作用：让开发者明确指定页面中的哪些静态资源可以第一次访问时候存储到本地，下次访问时会向服务器咨询资源是否需要更新。如过期会自动更新新资源到Cache中。

JS DDos攻击的原理与防御

直接用流行的第三方库容易遇到该情况

分布式拒绝服务供给是一种对网站发起大量连接，导致正常用户无法访问网站的攻击手段，利用流量劫持变相进行DDos，就是JS DDos。

防御方法

1.引用第三方库时，页面里写上散列值，第三方库被劫持时候，计算出的散列值与开发者写在页面里的不匹配，浏览器就不会执行它。

2.用HTTPS链接，可以解决大部分的劫持问题。

URL编码

在浏览器中键入的各种文字的内容，会被编码

简单理解HTML, CSS 和 JavaScript

• JavaScript：脚本语言，用于前端页面的DOM处理
• CSS：起装修作用的，和HTML一起搭配使用
• HTML：HyperText Markup Language 超文本标记的语言，对文本进行标记所组成的规则

跨域与同源

iframe

作用：将一个URL地址嵌入当前页面并展示出来，两个页面的功能可以解耦合，不依赖对方而存在

跨域（跨源）

如果跨域更改内容会被浏览器拒绝，不同源就不能修改另一个页面，也不能获取与另一个页面相关的内容。只有同源的页面才能互相访问

同源（同域）

要求两个页面：协议、主机名、端口3个特征完全一致，否则是跨域

合理的跨域方法：

• HTML 5 PostMessage[着重推荐]
• iframe location.hash
• iframedoucument.domain
• JSONP

Cookie和广告联盟

• 广告联盟：浏览器供应商保存相应的cookie，其他网站应用了含有该浏览器推送的相关代码，就会给用户提供在该浏览器上浏览的近期物品，大大提升了广告推送的精准性，越来越多的网站加入了搜索引擎的广告联盟。
• 为了让服务器识别请求者，请求者在发送请求时候会带上自己的身份信息，学名即Cookie

HTTP Header是什么

是一个数据区域，分为请求头和响应头，请求头是客户端向服务器发送请求时带的，响应头是服务器响应客户端数据时带的

简单理解HTTP的GET和POST

常见的是，开发人员会做兼容处理，同时支持HTTP GET和HTTP POST来取和传数据

POST：向服务器提交数据

GET：从服务器拉取数据

WebSocket是什么

需求：需要向正在浏览页面的用户实时更新内容

实现方式：

• 传统1：以HTTP协议完成时，一种是轮询，每隔一段时间重新向服务器发送请求，查询最新数据（浪费资源）
• 传统2：Comet，发送更新请求后，一直占据端口，等待相应，有数据返回时候再断开连接（浪费资源）

推荐：WebSocket是建立在TCP上的全双工协议，客户端可以向服务器发送信息，服务器也可以向客户端发送消息。

简单理解单页Web应用

• 多页Web应用：包含多个页面，通过链接切换的网站
• 单页Web应用：用户单机链接之后和服务器联系，拉取数据
• 单页Web应用实现方式：页面历史栈、AJAX

PS：你学废了吗？不懂的话程序猿小哥哥可以手把手教育你哦

往期内容回顾：

1、能量加油站：第六期：异步确保型事务【业务场景中最常用的】

2、能量加油站：本期内容有点多哦，最全的图解读分布式事务：第五期-柔性事务和刚性事务、XA模型、XA接口规范、XA实现

3、能量加油站：最全的图解读分布式事务：第四期-BASE定理

4、能量加油站：最全的图解读分布式事务：第三期-CAP定理

5、能量加油站：Git 操作，新手学习老手温故【附脑图】

6、云原生：Docker实战之Docker安装（最详细）

7、7TCoding年轻人应该知道的小秘密

...............

更多精彩内容，请加入我们哦～

添加小编微信，拉你进群哦

原创不易，转载请注明出处！