第1章 Web前端技术
AJAX技术的妙用
只让部分页面刷新,和后台交互获取数据,应用于当前网页
实现方式
由浏览器的内置能力(XmlHttpRequest对象)发起网络请求
后台返回JSON串
JavaScript程序解析json串,并将解析后的字符插入网页的DOM结构
重新渲染页面,显示下拉列表框,回填获得的联想词
应用
异步拉取数据并展示在当前页面,用于延迟加载数据或触发式加载数据
DOM是什么
文章对象模型
包含
JavaScript代码
可以修改DOM树上的对象
虚拟DOM
静态网页与动态网页
HTML
网页的基础结构,描述网页的排版、元素所在的位置
区别
后台是否有数据库的支撑
网页上展示的内容是否要变化
因人而异显示不同内容?
根据时间线呈现内容的变化?
一直保持不变?
动态网页更灵活
分析URL的结构
protocol
http://
协议:一套定义了数据的封装、打包、拆包和结实的规则
类别
http
https
ftp
thunder
自定义协议
hostname
主机名
news.qq.com
一台名叫news.qq.com的机器
二级域名
qq.com——一级域名
二级域名
www.qq.com
news.qq.com
qzone.qq.com
v.qq.com
parameters
参数/查询
在URL中带上一些本地的信息传给服务器
query
网页基础知识:表单
h5,5是版本号
定义
用户和服务器数据交互的用户界面,一切向服务器提交的数据都是由其中的几个简单的标签组成的
包含类型
action
标识了所有 的数据内容将向引号内的地址提交
method
标识为提交到网站的方法(get或post)
H5应用程序缓存简介
Application Cache
H5定义的一种离线存储技术标准
让开发者明确地指定页面中那些静态资源可以在第一次访问网页的同时缓存到本地,并在下次访问该网页时向服务器询问本地缓存的资源是否需要更新
注册监听器
获得Cache更新成功的事件并主动刷新页面。将最新的内容展示出来
Chrome里的冷知识
恐龙小游戏
断网,随便打开一个网址,可以看到小恐龙,按空格键,游戏开始
尝试过后,现在是询问是否要玩游戏,并且提供了新的游戏
制定搜索引擎
地址栏输入淘宝或知乎的域名,然后按Tab键,地址栏显示 用“”搜索
输入想搜索的内容,按回车键
本机尝试未能成功
执行Javascript语句
手动输入Javascript语句,执行
显示对话框
将网页村委PDF文件
Ctrl+P,打开打印网页对话框
在目标打印机选项中选择“另存为PDF”
JS DDoS攻击的原理与防御
分布式拒绝服务攻击
对网站发起大量连接,导致正常用户无法访问网站
防御
引用第三方库时,在页面里写上它的散列值
使用https链接
简单理解HTML、CSS和JavaScript
HTML
超文本标记语言
用来布局网页中的每一个元素的
JavaScript
脚本语言,主要做前端页面的DOme处理
控制HTML中的每一个元素
跨域与同源
iframe
HTML的标签,可以随意指定一个URL地址
将一个URL地址嵌入当前页面并展示出来
用途
嵌入一个页面,两个页面的功能可以解耦合,不依赖对方存在
跨域
合理的跨域沟通方法
JSONP
iframe document.domain
iframe location.hash
HTML 5 PostMessage
同源
两个页面的协议、主机名、端口一样,就是同源的
同源就是同域
Cookie和广告联盟
cookie
请求者的身份信息
浏览器每次向网站服务器请求数据时携带的一些额外信息
一般非常少
精准广告
HTTP Header是什么
一块数据区域
请求头
客户端的基础信息
accept-encoding
表示当前浏览器可以接受的数据编码
accept-language
标识当前使用的浏览语言
响应头
响应数据以及如何处理数据的指令
content-encoding
返回内容的压缩编码类型
set-cookie
服务器通知浏览器设置一个cookie
简单理解HTTP的GET和POST
输入网站的登录页地址
从服务器上拉取登录页的HTML文件
浏览器接受登录页的HTML文件并解析
用户输入信息后提交
POST请求
将信息放在HTTP请求的数据字段中传输
WebSocket是什么
实时更新的实现方式
轮询
每隔几秒重新向服务器发送请求,查询数据,浪费资源
Comet
发送请求后占据端口,服务器有数据返回时才断开,也浪费资源
WebSocket
建立在TCP上的全双工协议
首次连接时使用普通HTTP和服务器通信,并告知服务器后面交互用WebSocket方式
通过WebSocket发送消息,并保持心跳,防止连接异常断开
“直出”是什么
直接输出
浏览器直接输出经过JavaScript渲染号数据 的HTML页面
互联网的黄金矿工:爬虫
要点
从页面中解析出正确的URL
有很快的抓取速度
有挑选最有价值的页面进行抓取的能力
智能地适应不同的网站
抵御
在网站根目录下放一个robots.txt文件,描述哪些网页可以被抓取,哪些不能
简单理解单页Web应用
多页Web应用
包含多个页面,通过链接切换的网站
每打开一个新的链接,浏览器都会重新向服务器请求一个完整的HTML网页
网站
有多个页面(URL)
没有页面,服务器根据请求动态生成HTML
浏览器只负责把服务器吐给他的东西再吐给用户
缺点
等待时间长,用户体验不好
存在And日哦对、iOS、Web三种页面时,服务器要根据业务逻辑生成HTML,更麻烦
单页Web应用
一个页面,点击链接后,会直接在这个页面里刷新并显示
在用户单击链接之后直接和服务器联系,拉取数据
服务器只负责输出数据,界面的显示、业务逻辑都交给终端来做
类似于原生的Andriod或者IOS应用
技术
AJAX
通过它,前端的JavaScript可以拉取服务器上的数据
页面历史栈
锚点与网页内跳转的实现
定义网页中元素的位置,即定义锚点
URL中#号标记网页加载之后的位置
网页内跳转还可用JavaScript实现
利用锚点还可以改变浏览器的访问历史
简单理解“盗链”与“反盗链”
广告过滤机制科普
第6章 互联网技术领域专业名词
抽象、封装、类、实例和对象
SDK、API和架构
控件、组件和框架
二进制文件
脚本
内存泄漏
中间件
打底数据与云端控制
变量与函数
散列表
钩子
配置文件
算法复杂度
模板
RGB通识
应用程序、进程和线程
视频文件与编解码标准
同步、异步和回调
时间戳、MD5和GUID
栈的含义
JSON
理解OpenGL
引擎
开源许可证
渲染
WLAN、Wi-Fi与IEEE 802. 11
位图与矢量图
接口
线程池、对象池和连接池
向前兼容和向后兼容
游戏引擎
第7章 大前端
React:流行的前端技术
React Native: 专治急性子的产品经理
一个React Native的应用是什么样的
什么样的业务适合用React Native来改造
终端开发新思路: Flutter
二窥微信小程序的技术思路
如何自己开发小程序
第8章 人工智能的基本原理
如何通俗地理解机器学习
人工智能从业者:专家、工程师和调参程序员
TensorFlow:几行代码写 一个神经网络的时代来了
人工智能里的套话该怎么理解
一个最简单的机器学习模型
什么是神经网络
神经网络的数据处理
为什么你的神经网络像个傻瓜
懂你的推荐算法:你应该懂的一些知识