变量声明和引用
声明:
任何可以用作css属性值的赋值都 可以用作sass的变量值
1 | $basic-border: 1px solid red; |
引用:
1 | .container { |
声明:
任何可以用作css属性值的赋值都 可以用作sass的变量值
1 | $basic-border: 1px solid red; |
引用:
1 | .container { |
工作区、暂存区和版本库
工作区:
可直接在电脑上操作编辑的文件
暂存区:
数据暂时存放的区域
版本库:
存放已经提交的数据,使用push提交的时候,就是把这个区的数据push到远程git仓库了
git clone
拷贝一份远程仓库
git init
初始化仓库
git add .
添加文件到暂存区
git commit -m ‘xxx’
将暂存区内容添加到仓库中
git push
上传远程代码并合并
git pull
下载远程代码并合并
git status
查看仓库当前的状态,显示有变更的文件
git diff
比较文件的不同,即暂存区和工作区的差异
git reset –hard git提交哈希值
回退到某一个版本
git branch -a
查看分支
git branch
查看当前分支
git branch <分支名称>
创建分支
git checkout <分支名称>
切换分支
合并分支:
git checkout master 先切换到master分支
git merge fenzhi 再将分支的代码合并到master
对Web应用的攻击模式有以下两种:
1.主动攻击
2.被动攻击
主动攻击:
攻击者通过直接访问Web应用,把攻击代码传入的攻击模式。由于该模式是直接针对服务器上的资源进行攻击,因此攻击者需要能够访问到那些资源。主动攻击模式里具有代表性的攻击是SQL注入攻击和OS命令注入攻击。
被动攻击:
利用圈套策略执行攻击代码的攻击模式。在被动攻击过程中,攻击者不直接对目标Web应用访问发起攻击。被动攻击模式中具有代表性的攻击是跨站脚本攻击和跨站点请求伪造。
跨站脚本攻击(XSS)
通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或JavaScript进行的一种攻击。动态创建的HTML部分有可能隐藏着安全漏洞。就这样,攻击者编写脚本设下陷阱,用户在自己的浏览器上运行时,一不小心就会受到被动攻击。
影响:
1.利用虚假输入表单骗取用户信息
2.窃取用户Cookie,让用户在不知情的情况下帮助攻击者发送恶意请求
3.显示伪造的文章或图片
应对方法:
1.在Cookie中设置httpOnly,使js脚本无法读取到Cookie信息
2.过滤:
(1)对输入格式进行检查,前端和后端都要做
(2)对标签进行转换
(3)对特定字符进行转义处理
SQL注入攻击
针对Web应用使用的数据库,通过运行非法的SQL而产生的攻击。该安全隐患有可能引发极大的威胁,有时会直接导致个人信息及机密信息的泄露。
可能造成的影响:
1.非法查看或篡改数据库里的数据
2.规避认证
3.执行和数据库服务器业务关联的程序等
OS命令注入攻击
通过Web应用执行非法的操作系统命令达到攻击的目的。只要在能调用Shell函数的地方就有存在被攻击的风险。OS命令注入攻击可以向Shell发送命令,让Windows或Linux操作系统的命令行启动程序。也就是说,通过OS注入攻击可执行OS上安装着的各种程序。
跨站点请求伪造(CSRF)
攻击者通过设置好的陷阱,强制对已完成认证的用户进行非预期的个人信息或设定信息等某些状态更新,属于被动攻击。通俗来讲,就是攻击者冒充用户身份发起请求,在用户不知情的情况下完成一些违背用户意愿的事情
可能造成的影响:
1.利用已通过认证的用户权限更新设定信息等
2.利用已通过认证的用户权限购买商品
3.利用已通过认证的用户权限在留言版上发表言论
应对方法:
1.验证码
2.Token
3.Referer check 请求来源限制
栈内存存放基本类型变量,复杂数据类型的引用和方法(函数)的调用,遵循先入后出的原则
看下面这段代码:
1 | function foo() { |
上述代码中函数体入栈顺序为:fn->foo
出栈顺序为:foo->fn
栈内存特点:
连续的内存区域
栈内存与堆内存相比非常小,存取速度比较快
系统自动分配和释放,例如函数参数、局部变量、临时变量等
栈内存里的数据可以共享
栈内存里的数据大小和生命周期是确定的,缺乏灵活性
堆内存不等于数据结构里的堆,其分配方式类似于链表
堆内存分配过程:
操作系统有一个记录空闲内存地址的链表,当系统收到程序的申请时,会遍历该链表,寻找第一个空间大于所申请空间的堆结点,然后将该结点从空闲结点链表中删除,并将该结点的空间分配给程序。由于找到的堆结点的大小不一定正好等于申请的大小,系统会自动的将多余的那部分重新放入空闲链表中
堆内存特点:
不连续的内存区域
一般由开发人员申请和释放
堆内存获取的空间比较灵活,比较大
存取速度比较慢,比较容易产生内存碎片
什么是SPA
SPA单页面应用,是一种网络应用模型,其特点在于整个网站由一个html页面构成
传统的网站,不同页面之间的切换是直接从服务端加载新的页面,而在SPA中,页面之间的切换是通过动态地重写页面发生变化地部分来实现与用户的交互,避免过多的数据交换,响应速度相对较高
常见的SPA框架有:Angular, React, Vue
优点
页面之间切换较快
减轻了服务端压力
缺点
首屏打开速度较慢,因为首次加载需要下载SPA框架和应用程序的代码再渲染页面
不利于SEO搜索引擎优化
SSR即服务端渲染,是将SPA应用打包到服务器上,在服务器上渲染出html发送到浏览器,这样的html页面还不具备交互能力,所以还需要与SPA框架配合,在浏览器上混合成可交互的应用程序
常见的SSR框架有:React-Next, Vue-Nuxt
优点
首屏加载较快,不用等待所有的js代码下载完毕,浏览器就能显示比较完整的页面
利于SEO,可以将SEO的关键信息直接在后台就渲染成html,而保证搜索引擎的爬虫都能爬取到关键数据
缺点
服务端压力较大
开发调试会比较麻烦
服务端渲染结果可能和浏览器端不一致
参考自腾讯前端代码规范文档 & 京东前端代码规范文档
类名命名
1.class, id都需小写
2.命名使用英文,禁止使用特殊字符
3.名称间隔使用 - 符号
4.类名命名需要语义化
选择器
1.禁止使用层级过深的选择器,最多三层
2.除非有特殊需求,禁止随意通过id来定义元素样式
3.禁止随意对纯元素选择器设置特定样式,避免样式污染
4.尽量少用通用选择器*
1 | /* 推荐 */ |
HTML规范
1.标签必须合法且闭合、嵌套正确,标签名需小写
2.标签语法无错误,需要符合语义化
3.标签的自定义属性以data-开头,如:
1 | <a href="#" data-num='18'></a> |
4.除非有特定的功能、组件要求等,禁止随意使用id来定义元素样式
prototype:
每个构造函数都有一个prototype属性,该属性指向一个原型对象,这个对象的属性和方法,都会为构造函数所拥有
通常我们会把共有的方法定义到prototype对象上,这样所有的实例对象就可以共享这些方法
__proto__:
每个实例对象都有一个__proto__属性,该属性指向构造函数的prototype原型对象,实例对象之所以可以使用prototype原型对象的属性和方法,是因为有__proto__的存在
__proto__的意义在于为对象的成员查找机制查找提供了一个方向
以V8引擎为例,V8执行js代码的过程如下
1 生成AST抽象语法树
先通过词法分析将代码分解成一个个token,再通过语法分析将这些token根据一定的语法规则转化为AST,生成AST后,接下来会生成执行上下文(this绑定、创建词法环境和变量环境)
2 生成字节码
V8通过AST生成字节码,字节码是介于AST和机器码之间的一种代码,比机器码轻量得多。字节码需要通过解释器转换为机器码然后执行
3 执行
解释器逐行执行字节码
在执行字节码过程中,如果有一段代码重复出现,V8会将其标记为热点代码,V8的编译器会将热点代码编译为机器码保存起来,后面再遇到热点代码时,直接执行相应的机器码。这样的机制下,代码执行的时间越久,会有更多的代码被标记为热点代码,代码执行的效率会越来越高
可以看出,js是解释和编译结合起来执行的,因此js并不是一门完全的解释型语言。这种字节码跟解释器和编译器结合的技术,称为即时编译(JIT)
内容参考自:http://chuquan.me/2018/01/21/browser-architecture-overview/
浏览器结构大致如下图所示:
用户界面
主要包括工具栏、地址栏、前进/后退按钮、书签菜单等部分
作用:提供浏览器会话管理、与其他桌面应用程序通信
浏览器引擎
为渲染引擎提供高级接口
加载给定的url,提供前进/后退/重新加载操作
提供查看浏览会话的各个方面的挂钩,例如:当前页面加载进度
查询/修改渲染引擎设置
渲染引擎/浏览器内核(包含HTML解析器)
为指定的url生成可视化的表示
显示html和xml文档,选择css样式及嵌入式内容(例如:图片)
计算布局,调整页面元素位置
浏览器/Run Time | 内核(渲染引擎) | Javascript引擎 |
---|---|---|
Chrome | Blink | V8 |
FireFox | Gecko | SpiderMonkey |
Safari | WebKit | JavaScriptCore |
IE->Edge | trident->EdgeHTML | JScript(IE3.0-IE8.0) / Chakra(IE9+) |
Opera | Presto->Blink | Futhark(9.5-10.2)/ Carakan(10.5-) |
网络
实现http和ftp等文件传输协议
JavaScript引擎
解释执行嵌入在网页中的js代码
XML解析器
将xml文档解析为dom树
显示后端
提供绘图和窗口原语(不太懂是什么,了解即可)
数据持久层
将浏览会话相关的数据存储在硬盘上,例如:书签、工具栏设置、Cookie、安全证书、缓存
http的缺点
通信使用明文(不加密),内容可能被窃听
不验证通信对方的身份,有可能遭遇伪造
无法验证报文完整性,报文有可能已遭篡改
https
https=http+加密+认证+完整性保护
HTTPS并非是应用层的一种新协议。只是HTTP通信接口部分用SSL(Secure Socket Layer)和TLS(Transport Layer Security)协议代替而已
通常,HTTP直接和TCP通信。当使用SSL时,则演变成先和SSL通信,再由SSL和TCP通信了。简言之,所谓HTTPS,其实就是身披SSL协议这层外壳的HTTP,采用SSL后,HTTP就拥有了HTTPS的加密、整数和完整性保护这些功能
tag:
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置:
jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true