flura的博客
0%

前端知识体系概览

Posted on In Views: Valine:

前端知识体系概览

前端开发(front-end development)简单来说，就是将抽象的数据、视觉效果和交互逻辑，结合起来产出用户看到的真实页面的一个过程。

前端开发技术最重要的三个是HTML(超文本标记语言)、CSS(叠层样式表)以及JavaScript。

  1. HTML：提供网页的结构，提供网页中的内容
  2. CSS: 用来美化网页
  3. JavaScript: 可以用来控制网页内容，给网页增加动态的效果

CSS

css是用来表现html或xml等文件样式的语言，使用css可以有效地对页面的布局、字体、颜色、背景以及动画实现控制。

css的发展

使用了一段时间的css以后，会发现很多令人头疼的问题：

  • 样式经常莫名其妙被覆盖
  • 代码复用性差
  • 代码没有层级结构
  • 代码维护性差，遇到问题难以定位

css预处理器，css预处理器是一门专门的编程语言，为css增加了一些编程的特性。常用的css预处理器有

  1. Sass(https://sass-lang.com/)
  2. Less(http://lesscss.org/)
  3. Stylus(http://stylus-lang.com)

Css-in-Js,Css-in-Js是将html、css、javascript写在一起，一个组件封装了样式、结构和逻辑

JavaScript

JavaScript组成

  1. ECMAScript - JavaScript的核心

    ​ ECMA 欧洲计算机制造联合会

    ​ 网景：JavaScript

    ​ 微软：JScript

    ​ 定义了JavaScript的语法规范

    ​ JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

  2. BOM - 浏览器对象模型

    ​ 一套操作浏览器功能的API

    ​ 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

  3. DOM - 文档对象模型

    ​ 一套操作页面元素的API

    ​ DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

JavaScript能做什么？

web开发

  • jQuery、BootStrap、Angular、React、Vue

后端开发

  • Node.js

桌面应用(Linux, Mac OS X, Windows)

  • Electorn
  • NW.js

Hybird移动应用开发

  • PhoneGap

Native移动引用开发

  • React Native
  • Weex
  • NativeScript

嵌入式/物联网开发

  • IoT

JavaScript的发展

ECMAScript6(ES6)

Babel(https://babeljs.io/)，一个广泛使用的ES6编译器，可以将es6代码转为es5代码，从而在现有的环境中执行

TypeScript(https://www.typescriptlang.org/)是js的强类型版本，ts是js的超集(类似于c与c++的关系)。它为js的生态增加了静态类型检查机制，并最终将代码编译为纯粹的js代码。使用TypeScript有以下几个优点

  • 静态类型检查(编一阶段即可发现类型不匹配的错误)
  • IDE智能提示
  • 类型信息有利于编译器优化

FLow(https://flow.org/)针对js弱类型问题，Facebook也推出了Flow。

HTTP

HTTP (HyperText Transfer Protocol,超文本传输协议)。 Web是建立在HTTP协议通信的。

HTTP 报文

所有的 HTTP 报文都可以分为两类： 请求报文（request message）和响应报文
（response message）。

请求报文的格式

GET /test/hi-there.txt HTTP/1.1
Accept: text/*
Host: www.joes-hardware.com

响应报文的格式

HTTP/1.0 200 OK
Content-type: text/plain
Content-length: 19
Hi! I’m a message!

包括以下三个部分。

• 起始行
报文的第一行就是起始行，在请求报文中用来说明要做些什么，在响应报文中说
明出现了什么情况。
• 首部字段
起始行后面有零个或多个首部字段。每个首部字段都包含一个名字和一个值，为
了便于解析，两者之间用冒号（:）来分隔。首部以一个空行结束。添加一个首
部字段和添加新行一样简单。
• 主体
空行之后就是可选的报文主体了，其中包含了所有类型的数据。请求主体中包括
了要发送给 Web 服务器的数据；响应主体中装载了要返回给客户端的数据。起
始行和首部都是文本形式且都是结构化的，而主体则不同，主体中可以包含任意
的二进制数据（比如图片、视频、音轨、软件程序）。当然，主体中也可以包含
文本

一些常见的HTTP方法

HTTP方法 描　　述
GET 从服务器向客户端发送命名资源
PUT 将来自客户端的数据存储到一个命名的服务器资源中去
DELETE 从服务器中删除命名资源
POST 将客户端数据发送到一个服务器网关应用程序
HEAD 仅发送命名资源响应中的 HTTP 首部

HTTPS

需要适应的各项要求

• 服务器认证（客户端知道它们是在与真正的而不是伪造的服务器通话）。
• 客户端认证（服务器知道它们是在与真正的而不是伪造的客户端通话）。
• 完整性（客户端和服务器的数据不会被修改）。
• 加密（客户端和服务器的对话是私密的，无需担心被窃听）。
• 效率（一个运行的足够快的算法，以便低端的客户端和服务器使用）。
• 普适性（基本上所有的客户端和服务器都支持这些协议）。
• 管理的可扩展性（在任何地方的任何人都可以立即进行安全通信）。
• 适应性（能够支持当前最知名的安全方法）。
• 在社会上的可行性（满足社会的政治文化需要）。

https分层

HTTP2.0

http是http1.x的升级，它是基于SPDY设计，但与SPDY存在一些不同，比如SPDY是强制使用HTTPS，而HTTP2.0支持HTTP传输(但是现在的主流的浏览器，还是只支持基于TLS部署的HTTP2.0协议，所以要想升级成2.0还是先升级HTTPS好。)；HTTP2.0消息头的压缩算法采用HPACK，而SPDY采用的是DEFLATE等。 NGINX配置HTTP2.0官方指南

HTTP2.0的新特性相对于1.x

  • 多路复用： 允许在一个TCP连接上请求多个并发流，这样就可以降低延迟，同时提高带宽的利用率。
  • 请求优先级： 多路复用共享一个TCP连接，会导致关键请求被阻塞，HTTP2允许给每个请求设置优先级。客户端可以为每个请求分配一个优先级，这样就可以防止在网络通道被非关键资源堵塞时，高优先级的请求被挂起。比如浏览器加载首页，首页的html内容应该优先展示，之后才是各种静态资源文件，脚本文件等加载，这样可以保证用户能第一时间看到网页内容。
  • HTTP报头压缩： 采用压缩算法对请求和响应HTTP报头进行压缩，可以减少传输的数据包数量和字节数。
  • Server Push：允许服务主动推送数据给客户端，而不需要客户端发起请求，可以优化网页初次访问性能。例如我的网页有一个sytle.css的请求，在客户端收到sytle.css数据的同时，服务端会将sytle.js的文件推送给客户端，当客户端再次尝试获取sytle.js时就可以直接从缓存中获取到，不用再发请求了。

前端工具

代码编辑器与IDE

常用代码编辑器：windows记事本、nodepad++(推荐用这个)、Emacs、Vim、Sublime Text、Atom、VS code(VS code逐渐成为前端领域的主流选择,因为vs code对TypeScript的支持程度是其他编辑器难以企及的)..

IDE(集成开发环境)。与专注于代码编辑能力相比，IDE的职责要宽泛很多，包括但不限于代码编辑、运行、调试、编译打包甚至设计图形界面，常用IDE有：Visual Studio、WebStorm、Xcode、Dreamweaver等。

页面调试工具

Chrome DevTools(https://developers.google.com/web/tools/chrome-devtools)

其他工具

版本管理工具

在工程化越发复杂、多人协作日常化的今天，版本管理工具早已成为必需品，而Git这是当下的主流选择，搭配Github/Gitlab之类的代码托管工具，即可实现一个功能齐全的代码管理与共享工具

Git官方网站：https://git-scm.com/

设计工具

Mac用户：Sketch，Famer X。

Windows用户：PS，XD

抓包及代理工具

在开发调试移动端的页面时，我们常常苦于无法使用类似于DevTools之类的工具查看网络请求，很多接口问题难以排查，此时我们往往会将无线设备的网络代理到电脑上，然后使用Charles(https://www.charlesproxy.com)之类的工具抓包查看相关请求信息

host管理

作为一个web开发者，绑定hosts可以说是再日常不过了，很多时候可能还要再多个应用/业务之间不断切换。这里推荐几个工具：

  • SwitchHosts：跨平台
  • iHosts：仅限苹果电脑
模拟请求及测试API

因为时常要测试服务端的API，需要模拟各种请求参数或者登录态

  • Paw：仅限苹果电脑
  • Postman：window

前端框架

jQuery

Angular

React

官方文档(https://react.js.org/)

环境搭建，对于初学者来说，建议使用facebook官方提供的脚手架工具Create-React-App，首先确保你已经安装了node.js 打开终端，依次输入一下命令

1
2
3
npx create-react-app my-app
cd my-app
npm start

……….

Virtual DOM

VDOM即是对真正的DOM的模拟，它与DOM一样，同样能够描述页面的结构、样式和内容。不过，VDOM往往以JavaScript对象的形式存储和操作，而不是浏览器提供的接口。

Virtual DOM中的diff算法

Vue

生命周期

vue生命周期图示

Vue是一个构造函数，整个生命周期的入口是对Vue的实例化。在执行new Vue()时，Vue会依次初始化(init),和挂载(mount)两个阶段。

在初始化阶段，Vue会触发生命周期事件、初始化Props、methods、data、computed与watch等。如果Vue的参数对象中没有render方法，则会调用模板编译器从template生成一个新的render函数，值得注意的是编译这一步会比较耗时，所以官方推荐使用离线构建的方式提前把模板编译成静态的render函数，以在线上获取更快的执行速度和更小的运行时体积。

在挂载阶段，Vue会通过执行render方法，获得一个VDOM树，这颗树中的每一个节点对应一个真实的DOM节点，如果Vue的参数中有提供el选项，Vue会把这些节点渲染到el所代表的DOM节点上去，这个过程中Vue会依次触发beforeMount和mounted生命周期。

挂载完成之后，如果数据发生了变更，Vue就会进入更新视图阶段。Vue会重新执行render函数，得到一个新的VDOM对象，并与原先的VDOM对象进行对比，这个对比的过程称之为patch，patch中的diff算法可以得到两个VDOM对象之间的差异。Vue在得到这些差异之后，会把这个变更应用到真实的DOM节点上。如果patch的结果是两者存在差异，在修改DOM之前会触发beforeUpdate生命周期，在修改DOM之后会触发updated生命周期。

当一个Vue组件即将被销毁时，这有可能是父组件发生了重新渲染，删除了本组件。Vue会进入销毁阶段，Vue会触发beforeDestory生命周期，消除vm对象上的关联，包括watchers，事件监听器，data的依赖等，避免发生内存泄漏，同时也会递归的通知它的子组件进行销毁过程，当它的所有子组件完成销毁，会触发destroyed生命周期。

工程化知识

自动化工程工具的使用

  1. 使用前端构建工具
    • gulp、grunt、Broccoli
  2. javascript 编译工具
    • Babel、Browserify、Webpack
  3. 开发辅助工具
    • 数据 mock、livereload
  4. 使用CI集成工具
    • jenkins、Travis CI
  5. 使用脚手架工具
    • yeoman、create-app、vue-cli

Node.js

web服务框架

Node.js最常用的场景之一就是发布Web服务，而对应的框架则有两类

  1. 简单的洋葱模型框架：比如Koa、Express，可以基于其丰富的Middlewares来快速的转配出一个Web服务。
  2. 企业级的Web框架：比如阿里开发的Midway.js、Egg.js，可以基于一定约束多人开发一些中大规模的应用。

数据库

  1. 关系型数据库：Node.js有MySQL，PostgreSQL、Oracle、SQLite等常见关系型数据库产品的连接客户端，相匹配也有一些成熟的ORM产品让操作数据库更加的方便(比如Sequelize、TypeORM等)
  2. NoSQL产品：比如MongoDB、Redis等，更利于编写伸缩性强的分布式应用

构建跨端应用

React Native

架构设计

在rn中，使用JSX来描述界面，使用css的子集Flexbox来申明样式

Virtual Dom：对真实DOM的抽象，作为开发者描述的UI和实际渲染UI之间的桥梁。通过这层设计使得JS控制Native UI成为可能。在React Native中使用JSCore来运行js，将生成的VIrutal DOM以异步的形式传递给底层的渲染引擎。Native渲染引擎将接到手的指令转换为原生组件进行UI绘制。

通信机制

在React Native中运行着以下几类线程：

  • UI线程：即主线程，复杂最终UI界面的渲染
  • JS线程：负责js执行、数据获取和事件处理等工作，也是React Native应用业务逻辑处理的地方
  • Native 模块进程：当我们需要调用底层系统能力的时候，通常是单独开一个Native线程来处理。

为了保证良好的用户体验，确保UI主线程不被阻塞，React Native中js和Native渲染引擎之间通信都是异步的、主要存在以下几类通信：

  • 界面渲染：js线程需要把UI的结构和样式传递给UI线程，并由UI线程渲染出最终的UI界面。这个过程是从js线程到ui线程的通信
  • 事件绑定与触发：由于UI线程组要负责UI界面的渲染和事件的触发，js线程负责事件的处理逻辑，因此js线程需要告诉ui线程需要监听哪些交互行为，当用户特定的交互行为发生时，UI线程需要把交互信息通知到js线程
  • 数据请求：当业务逻辑需要获取服务端数据、获取当前位置、调用摄像头等场景时，需要通知Native模块线程进行处理，然后将相关信息传给js线程。

Weex

Flutter

图形技术

Canvas

WebGL 3D

Web安全

XSS

首先说下最常见的 XSS 漏洞，XSS (Cross Site Script)，跨站脚本攻击，因为缩写和 CSS (Cascading Style Sheets) 重叠，所以只能叫 XSS。

XSS 的原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。XSS 的攻击方式千变万化，但还是可以大致细分为几种类型。

非持久型 XSS 漏洞

也叫反射型 XSS 漏洞，一般是通过给别人发送带有恶意脚本代码参数的 URL，当 URL 地址被打开时，特有的恶意代码参数被 HTML 解析、执行。

非持久型 XSS 漏洞攻击有以下几点特征：

  • 即时性，不经过服务器存储，直接通过 HTTP 的 GET 和 POST 请求就能完成一次攻击，拿到用户隐私数据。
  • 攻击者需要诱骗点击
  • 反馈率低，所以较难发现和响应修复
  • 盗取用户敏感保密信息

持久型 XSS

持久型 XSS 漏洞，也被称为存储型 XSS 漏洞，一般存在于 Form 表单提交等交互功能，如发帖留言，提交文本信息等，黑客利用的 XSS 漏洞，将内容经正常功能提交进入数据库持久保存，当前端页面获得后端从数据库中读出的注入代码时，恰好将其渲染执行。

主要注入页面方式和非持久型 XSS 漏洞类似，只不过持久型的不是来源于 URL，refferer，forms 等，而是来源于后端从数据库中读出来的数据。持久型 XSS 攻击不需要诱骗点击，黑客只需要在提交表单的地方完成注入即可，但是这种 XSS 攻击的成本相对还是很高。攻击成功需要同时满足以下几个条件：

  • POST 请求提交表单后端没做转义直接入库。
  • 后端从数据库中取出数据没做转义直接输出给前端。
  • 前端拿到后端数据没做转义直接渲染成 DOM。

持久型 XSS 有以下几个特点：

  • 持久性，植入在数据库中
  • 危害面广，甚至可以让用户机器变成 DDoS 攻击的肉鸡。
  • 盗取用户敏感私密信息

CSRF

CSRF（Cross-Site Request Forgery），中文名称：跨站请求伪造攻击

完成 CSRF 攻击必须要有三个条件：

  1. 用户已经登录了站点 A，并在本地记录了 cookie
  2. 在用户没有登出站点 A 的情况下（也就是 cookie 生效的情况下），访问了恶意攻击者提供的引诱危险站点 B (B 站点要求访问站点A)。
  3. 站点 A 没有做任何 CSRF 防御

SQL 注入

SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。

而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码

DDoS 攻击

DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用。当DDoS攻击者制造高流量无用数据，造成网络拥塞，使受害主机无法正常和外界通讯。因为一直在处理无用的数据，就没有多余资源去处理正常数据了。最后造成的结果，轻则网速变慢，重则网络瘫痪，服务器系统奔溃，导致死机。

面对DDoS，目前不存在彻底解决方法，通常通过提升硬件性能、分布式应用部署、DDoS清洗等方案提高应对DDoS的防御能力。

web安全常用工具

Fiddle：Window常用抓包工具

Charles：常用的网络抓包工具

sqlmap：SQL注入检测工具

curl：命令行网络请求工具

burp suite：请求截获与修改工具

ant-XSS：XSS检测工具

性能优化

缓存策略

网站的缓存策略

常见性能优化措施