Awebone's Blog

reeCodeCamp学习笔记(三)

FreeCodeCamp学习笔记(三)

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或其他指数对于多个用户的网站来说都不是好的算法。

1
2
3
4
5
6
7
8
9
10
11
O(1)——确定一个数字是奇数或偶数。O(1)是一个静态的时间常量,不管有多少信息或有多少用户它都是一样的不改变。
O(log N)——发现一个字在字典里(使用二分法检索)。二分法检索是一个典型的“分而治之”的算法。
O(N)——看一本书
O(N log N)——排序一副扑克牌(使用归并排序)
O(N ^ 2)——在你购物车上检查你的购物清单的每一样东西
O(∞)-掷硬币,直到它落在头上

计算机安全

针对密码的字典攻击。

  • 当创建您的密码,有些网站需要极其特殊和复杂的密码,这实际上是一个也不必要的。

  • 他们想要保护你不受字典攻击的攻击。

  • 字典攻击就是尝试字典里的每一个字词,或者是它自己数据库中的常见词汇和很多人使用过的密码

  • 大多数密码都没有这个简单的,但是,这并不重要。

  • 他们只需要简单的密码就可以攻击巨量的账户。

  • 在创建密码时,你想要使用不同的类型,数字和符号,但是最有效的方法之一是出现一些随机的字母。

网络钓鱼

  • 网络钓鱼,是模仿其他正规站点的网页或者邮件,试图欺骗用户输入自己的个人信息,而它却没有连接到它所模仿的站点。

  • 一般情况下,两种方式来保护免受这些攻击:在地址栏中查看网址,打开一个新的浏览器并转到它所声称的网站。

  • 我们还要学习加密和HTTPS。

  • 如果你是在星巴克试图访问您的银行帐户,您有理由怀疑有人能看到,并采集您的信息。

  • 你会想在网址的开头寻找一个绿色的HTTPS而不是HTTP。

  • 这意味着,你向该网站所发送的密码和其他信息都被加密,只有他们可以根据一串码解开的数据。

  • 一般情况下,只要你显示的是私人或敏感信息,检查一下HTTPS。

  • 其他一些提示:重要账户之间不要使用相同的代码。

  • 如果您使用的网站被黑客侵入,密码再长也没用。

  • 同样,不要下载奇怪的文件。

  • 如果你下载的文件不是像.PDF,txt文件,JPG格式这样常见的文件类型,就要小心了。

  • 你下载的一些文件非常厉害,它们甚至可以在后台运行。

  • 最后,让你的软件更新,特别是联网的软件。

  • 信息泄露的一种方式就是’坏人’发现了旧版本的漏洞并突破了安全系统。

  • 这些漏洞在新版本中已经修复,如果你每个软件都保持更新,你可以避免很多问题。