FreeCodeCamp学习笔记（二）

基本概念

软件概念

• 软件是程序或在硬件上运行的程序，写入硬件的代码，两种软件类型是操作系统和应用软件。
• 有三个主要的操作系统：Windows，Mac和Linux。
• 应用范围包括所有其他软件，如Web浏览器，游戏，还有像Photoshop，查看邮件，编辑文档的软件等。

CDN

• 内容传递网络(CDN)是一种分布式服务器（网络），基于用户的地理位置向用户分发网页和其他Web内容，网页和内容分发服务器的起源。
• CDN的目标是建立更高质量的网络连接。
• CDNs通过为用户和用户目标站点之间建立快速通道或提供更快的建立在其他服务器上的镜像站点来达成目标。
• 这个概念和这种类型的服务不是创新型的想法，但是它正使互联网更加普及。
• 网站付费使用CDN服务，而CDN反过来you向因特网提供商付费来使用他们的服务和数据。
• 谷歌托管库就是一种CDNs ： developers.google.com/speed/libraries/#jquery
• 谷歌托管那些(常用的)库，比起你自己(在自己的服务器上)部署这些库，你的用户就可以更快的访问到它。
• 有可能的话，用户浏览器甚至会存储已经访问过的网站的缓存。

模拟与数字转换和压缩

• 一个模拟声波可能看起来像任何东西，例子中它是一条波浪线。
• 计算机采集和测量很多很多不同的点。把他们转化为数字，这就是所谓的采样。之后，计算机可以使用这些数字，并再次把它们变成声音。
• 压缩的好处是，它是一个更小的文件：它更容易储存，它更容易发送给其他人，它只是占用更少的空间。
• 压缩声音的一种常用方法是以更低的频率采样。
• 另一种方式是，它从一个中点而不是0开始采样，所以所采集的数字更小。
• 在图像中，它是通过测量一组16个的像素来压缩，而不是独立的。
• 视频中减掉的部分是你想使用一个高质量的数字文件，但当你在压缩时，你需要决定压缩到何种程度以确保用户仍然有最好的体验。

联网

• 路由器是连接不同的小范围网络的东西。

我想打个比方：我是一名教师，我在一所学校工作。

假如说我有一个包，并且我需要把它送给我在民政事务处工作的人。

我不知道她在哪里，我不知道她的办公室所在地，但我知道她的名字。

我找我的秘书，像我的第一台路由器，我说"嘿，我需要找在民政事务处的某某，你能帮帮我吗？"，她会说："当然，我不知道她的办公室准确位置，但我知道，下一步，我可以找到她所在的区域。"

于是，她继续并将其它发送至到民政事务处的秘书，下一个路由器。

那秘书不知道我是谁或者我在哪里，但她看到包装上的名称，知道结束位置。

我想要去表达的是每个路由器只需要知道自己的小网，就在它旁边的站点。

它不必知道整个互联网，但只是它自己的连接。

它可以获取信息并说，好吧，我不知道确切位置这回事，但我会在正确的方向传递下去吧。

这就是它所需要做的事。

• 路由器可以是不同的尺寸，不同容量，但他们做的是知道自己的邻居，获得信息，并传递向正确的方向。
• 路由器甚至不必须有完整的包的信息。
• 如果一台电脑正试图将信息发送到另一个时，数据可能会在不同的路由器之间分开，但是这没问题。计算机仍然知道如何正确地把信息重新组合到一起。
• 所发送信息的小碎片被称为数据包。包实际上是一小段二进制代码。
• 这是一个数据包的样子的示例，一段电流的视觉表示，计算机可以把它转化为1和0的，这就是我们所知道的二进制，可以代表任何数字数据。
• 这些小数据包通过路由器发送，并且如果一个文件是用一个信息包(发送)太大，它可以被分成帧（较小的小数据包）。帧发送到目的地不必采用相同的路由。
• 他们可以决定哪个路由是开放的，取其速度最快，而且因为它们具有IP地址，所有的路由器知道从哪里发送。一旦他们到达终点目的地，计算机知道如何把所有的信息重新拼合到一起。

源代码，解释器和编译器

• 源代码本身是程序员创建的文本文档：他们键入它，它的字母，数字和符号。
• 如果你把这个给别人，让他们看看在他们的电脑查看这个文档，这没法帮助他们查看电子邮件，它不是一个浏览器，它只是一个文本文档。
• 计算机必须有一种解释它的东西，并使一些有用的东西可以运行于它。
• 有两种主要的方法是这样做：无论是由一个解释器或编译器。
• 每个浏览器都有一个解释器，这就是JavaScript如何被处理的。
• 其他的语言，像C++，使用编译器。
• 与解释器不同的是，编译器将其所有的工作都放在了程序员的端上。
• 他们发送他们的包，他们的产品，它已经被编译，它已经可以在一台机器上运行。
• 然而，JavaScript，和其他的解释型语言，您只需编写JavaScript，用户端的浏览器有能力解释它所以你不需要编译它。

硬件基础知识

硬件组成

计算机由4个基本部分组成：输入、输出、CPU（中央处理器）、存储器。

• 输入是你放入计算机的东西。

• 输出是你在显示屏上所看见的或在扬声器里所听见的。

• CPU代表中央处理单元，并且当我们提到计算机时都能想起它。CPU是实现功能，运行软件的部分，由CPU来操作数据。

• 存储器是我们存储数据和信息的地方。CPU对存储器具有独占访问权。你无法通过输入和输出来访问内存而不使用CPU。

  • 现在存储器可以分为短期存储器, 称作RAM, 或者是长期存储器.

  • 长期存储器通常是硬盘, 但是也可以是使CD-ROM或者是闪存设备, 或是任何这一类的。

除了这四个基本部分, 我们今天还有另外三样东西要谈论: 主板，扩展槽和电源。

• 主板是连接这些硬件的东西。当这些数据到处流动试图找出该去哪时, 主板帮助他们导流他们，使他们去向正确的地方

• 扩展卡是声卡，显卡，这类可以提升用户体验的东西。

• 电源, 就像他的名字一样, 给我们的计算机提供电力。它通常是一个部件并有一个风扇在上面来帮助它散热。

  • 一个芯片全是由成千上万的晶体管(一种只能是0或1的开关)组成的
• 所有的这些晶体管塞进了一个芯片里，并且这就是芯片存储信息的方式。
  • 在一个芯片上集成的晶体管数量决定了芯片的大小和速度
• 摩尔定律是观察到自从1965年芯片上的晶体管数量每两年增加一倍的一种规律。
  • 二进制码是一种非常常见的计算机语言，它只能是1或0，也是on(开)或关，1代表on(开)，0代表off(关)。

数据

数据大小

• 最小的单位我们称之为1比特(bit)。比特(bit)只能是0或1, 也就是回到我们一直在学习的二进制。

• 字节, 很常见, 8比特(bit)。很多东西都可以用二个字节来表示。

• 下一步是KB, 1024个字节, 或者8192个比特(bit).

• 之后是MB, 1024个字节的2次方。

• 之后就是GB了, 1024个字节的3次方； TB, 1024个字节的4次方, 和PB, 1024个字节的5次方。

数据的速率

• 数据速率不同于数据大小, 通常是计算每秒多少比特, 而大小是计算有多少比特。
• 一旦我们涉及到指数级，数据速率的表示就有了很大的不同

• 怎么讨论数据速率取决于我们在讨论的东西。

  • 在音频下载中，我们使用KB/s

  • 网速，我们使用MB/s。如果你看到你的网速有多少多少比特每秒，记住它永远比按你提到数据大小时的字节小8倍。

  • 网络中, 我们用GB/s (十亿比特每秒!)。

• 这里主要选取方式是速度是按比特来计算而大小是按字节来计算。

超级计算机

• 一种使用一种叫做并行处理的技术同理用很多CPU处理同一问题的计算机。

服务器

• 服务器拥有并访问大量的数据或程序。

工作站

• 一种和个人电脑非常相似的计算机, 但是更耗能且贵的多。

微控制器

• 一种可能你汽车里都有的计算机，它非常擅长处理小型的特定的任务但是不可以像个人计算机那样操作和使用。

• 主板的构成是处理器和内存之间的桥梁-如果它不这样做，它就不是一个主板。但是大多数主板要比这个功能多的多。主要是它们有扩展槽和接口。

  • 扩展槽使你可以任意插入提高计算机性能的东西，而不需要让中央处理器负担更多。
• 举个例子，显卡和声卡可以提供更好的声音和更出色的显示效果从而显著提升用户体验，却不会拖慢电脑。
  • 网卡也可以插进扩展槽。
• PC和扩展卡在笔记本上很常见，并且扩展卡因为他们尺寸很小被合并到了主板上。
  • 在电脑上，你会知道有一个地方链接USB，电源接口，SD卡，以太网，甚至是一个音频插孔来通过耳机听声音。它们都是接口，主板上一个可以连接外源到CPU来获取或者给予信息的地方。

数据网络

三种类型：局域网(LAN)，广域网(WAN)，虚拟专用网(VPN)。

• 局域网就像是一小组计算机连接在了一起。局域网最重要的是这些计算机离得很近。

• 广域网是两个，三个或者更多的局域网长距离的连接起来。

  • 你也许认为他们通过因特网(Internet)相连接，对于VPN来说(虚拟专用网，设计上和广域网相似)，你是对的。

  • 一个广域网通常租用来自因特网公司的电缆来创建连接。

• 因特网(Internet)的第一部分：因特网是如何工作的。

  • IP地址：你可能已经习惯了每个设备都有它自己的IP地址，就像一个房子有它自己的地址一样。

  • 如果一个设备没有IP地址因特网不能向它分发数据。

  • 不止设备有，猫(modem)和路由器(router)也有，数据传输路上的每一步都有。

  • IP地址由位置所决定，起始于5个大型国际地区。

  • 从左到右，数字意味着你的位置。

Chrome调试学习

elements标签

• 在chrome浏览器中右击选中Inspect element即可访问elements标签，然后你就可以随便修改元素文本，元素标签和任何其他CSS或者HTML。

• 这些修改不会自动保存，不能当做IDE或者可以保存内容的编辑器。你可以使用chrome中的’persistent authoring’功能去保存更改。

• 记住这里层叠，继承和其他CSS规则都可以使用，另外，被覆盖的式样会以穿越文字的横线的形式展示。
• 需要注意的是现在”树”中看到的代码是当前的HTML，而不是页面加载时的代码。如果你用JavaScript或Jquery来改变页面元素，”树”就会更新。
• Padding，border和margin都很容易在右下角的彩色盒子里面检查和编辑。

network标签

• network标签页是用来回答’页面中哪个部分最耗时间’或’哪个调用初始化了网络请求’
• network仪表盘记录了页面中每个元素加载的详细信息。
• 每一个请求都记录在network仪表盘的底部日志中
• 观察底部的线条，你会注意到彩色图案。每一个颜色都代表了请求中的不同类型内容。
• 线越长代表网络耗时越大，我们最终目标就是缩短线长。如果出现长线条，说明某些内容拖慢了整个网页。
• 点击请求日志，会看到更加详细的请求信息。

Sources标签

• Sources标签页对调试JavaScript帮助很大。项目越大，越难准确找到问题所在。
• 可以对代码的不同部分设置断点，代码会到此停止执行。
• 有很多种断点类型可以使用，如一行特定代码，一个DOM事件，XMLHTTP请求或一个JavaScript事件。
• 设置好断电之后，浏览器在进入这段代码或事件时，会暂停执行。
• 通过减缓代码执行，我们就有机会仔细观察每一个设置点，准确跟踪页面行为。
• 一旦断点设置好，我们就可以逐步浏览和检查页面中断点处的代码。
• 和elements标签一样，可以实时编辑代码观察结果，不过记得在别处保存更改。

Timeline 面板

• Timeline 面板可以在应用运行时记录和分析所有行为。此处最适合分析应用性能问题。
• 就像通过network标签找出时间耗费，通过sources标签找出有问题的代码一样，通过Timeline可以观察到更多详细细节。
• 使用点击timeline的圆形按钮，你可以记录（捕获）堆栈，js性能，内存和图形绘制(CSS)等信息。
• chrome会以小粒度的详细日志来展现这些信息，可以通过很多种形式来查看。
• 所有这些信息可以帮助你很好地理解浏览器中发生的行为，尤其是发现内存占用比较多的事件。
• 在加载新页面之前记得先点击’clear’按钮再开始记录。
• 当记录JS事件时，点击title或左侧的’function call’，会重定向到resource标签，同时定位到函数所在位置的代码行。

Profiles 面板

• Profiles 面板可以提供web应用或页面的执行时间和内存，主要是针对运行于页面或app上的JavaScript。
• 这里可以收集到3种类型的概述信息: CPU profile，HEAP snapshot和HEAP profile。HEAP profiles更多的和内存使用信息相关，CPU profile和JavaScript性能相关。
• V8分析器可以帮助定位JavaScript中的性能问题，有助于优化代码。
• 每一个profile都可以在左侧查看，可以对每个页面采集多个profile。总体而言，profiles标签页非常适合优化代码。

Resources 面板

• Resources 面板可以显示已经加载的资源，包括：IndexedDB，Web SQL数据库，local storage，session storage，cookies，Application Cache, 图片, 字体和样式表。
• 可以在浏览器中查看和修改所有这些信息。
• 当你进行高级网站构建时，resources 面板可以帮你更好的理解app和页面的实时性要求。

Audit 工具

• Audit 工具帮助你逐步改善你的页面。
• Audit 工具会自动给你提供改进建议。

Console 面板

• Console 面板提供了2个主要功能：在开发过程中记录调试信息和提供一个可以用于和文档、开发工具交互的shell环境。
• 可以使用标准JS语法和特定控制台命令来查看原始数据和结构化数据。
• 从API中获取的JSON数据是典型的结构化数据。
• 信息经常会叠加满屏幕，你可以键入’clear()’来清空屏幕。通过勾选’Preserve Log’可以保存日志。
• 有几种不同的日志命令，比如console.log()用于基本日志记录，console.error()和colsole.warn()用于一些重要信息。
• Console中可以追踪异常（代码出现了问题），甚至可以在出现异常时暂停代码的执行，如果你还记得，这个功能在Source标签页中也有。

复杂度学习

• 时间复杂度是讨论算法花费多少时间的一种方式。它对于更快的提高精简中的软件的运行速度有着很大的作用。
• 当你编写代码的时候，你应该要知道这个软件需要花多长时间去执行。没有人想要创造一个由于运行缓慢而让用户觉得沮丧的项目。
• 时间复杂度相对于一个算法来说，是一个或多个函数的集合。
• 大O符号专门帮助您识别是算法没有’规模’好，还是在有大量不同的用户，信息，或其他投入量工作下运行良好。
• 这不符合摩尔定律 - 不管你的电脑有多大有快捷，如果算法是成倍地低效率，它在现实就无法使用。
• 通过在算法中执行的基本操作（基本操作=一个花费固定时间执行的操作）的数目统计来测量时间复杂度。
• 时间复杂度由函数T(n)表示。O代表函数，(n)表示作用于元件的数目。
• 渐进时间复杂度，对于任何的有效输入它可能花费的最长时间，是表达时间复杂度最常见的方式。
• 当你讨论大0符号,通常指的是最坏的情况。
• 作为一个经验法则,任何用N ^ 2或其他指数对于多个用户的网站来说都不是好的算法。

O(1)——确定一个数字是奇数或偶数。O(1)是一个静态的时间常量,不管有多少信息或有多少用户它都是一样的不改变。

O(log N)——发现一个字在字典里(使用二分法检索)。二分法检索是一个典型的“分而治之”的算法。

O(N)——看一本书

O(N log N)——排序一副扑克牌(使用归并排序)

O(N ^ 2)——在你购物车上检查你的购物清单的每一样东西

O(∞)-掷硬币,直到它落在头上

计算机安全

针对密码的字典攻击

• 当创建您的密码，有些网站需要极其特殊和复杂的密码，这实际上是一个也不必要的。
• 他们想要保护你不受字典攻击的攻击。
• 字典攻击就是尝试字典里的每一个字词，或者是它自己数据库中的常见词汇和很多人使用过的密码
• 大多数密码都没有这个简单的，但是，这并不重要。
• 他们只需要简单的密码就可以攻击巨量的账户。
• 在创建密码时，你想要使用不同的类型，数字和符号，但是最有效的方法之一是出现一些随机的字母。

网络钓鱼

• 网络钓鱼，是模仿其他正规站点的网页或者邮件，试图欺骗用户输入自己的个人信息，而它却没有连接到它所模仿的站点。
• 一般情况下，两种方式来保护免受这些攻击：在地址栏中查看网址，打开一个新的浏览器并转到它所声称的网站。
• 我们还要学习加密和HTTPS。
• 如果你是在星巴克试图访问您的银行帐户，您有理由怀疑有人能看到，并采集您的信息。
• 你会想在网址的开头寻找一个绿色的HTTPS而不是HTTP。
• 这意味着，你向该网站所发送的密码和其他信息都被加密，只有他们可以根据一串码解开的数据。
• 一般情况下，只要你显示的是私人或敏感信息，检查一下HTTPS。
• 其他一些提示：重要账户之间不要使用相同的代码。
• 如果您使用的网站被黑客侵入，密码再长也没用。
• 同样，不要下载奇怪的文件。
• 如果你下载的文件不是像.PDF，txt文件，JPG格式这样常见的文件类型，就要小心了。
• 你下载的一些文件非常厉害，它们甚至可以在后台运行。
• 最后，让你的软件更新，特别是联网的软件。
• 信息泄露的一种方式就是’坏人’发现了旧版本的漏洞并突破了安全系统。
• 这些漏洞在新版本中已经修复，如果你每个软件都保持更新，你可以避免很多问题。