开发环境

1.IDE

webstormsublime

vscode

atom

插件！！！！！！

2.Git（代码版本管理，多人协作开发）

1.常用Git命令

# Git中每个文件都有三种状态：committed、staged、modified
# 我们获取的Git仓库中的所有文件都是committed状态，
# 如果你在本地修改了文件a，a的状态就变成modified的；如果使用git add a，a的状态变成staged；
# 如果使用git commit，a的状态就变成commited。这种状态变化也说明复制代码是很方便的，但是提交更新请慎重
git init #初始化一个本地仓库

git add . #所有修改的、新增的、删除的文件都会被包含进来

git commit -m "注释" # 提交到本地仓库

git push origin master "github项目地址" # 提交到远程仓库

git pull origin master  # 从远程仓库下载最新的文件

git clone XXX  #克隆远程仓库

git status # 常提交前先检查下修改了什么内容，当前Git目录下各文件的状态

git diff # 可以查看当前目录的所有修改

git branch # 可显示当前所有分支

git checkout -b testing # 直接切换并创建分支

git checkout master
git merge hotfix  # 将hotfix分支合并到master（主分支）上

 

3.JS模块化

不使用模块化的情况

函数必须时全局变量，才能暴露给使用方，全局变量污染

依赖关系强烈，必须要引用要引用的文件的依赖文件

 

使用模块化

AMD（异步模块定义）

require.js

全局defined函数

只有defined后的模块才能被require

全局require函数

依赖JS会自动、异步加载

 

CommonJS

nodejs模块化规范，现在被大量用于前端：

前端开发依赖的插件和库，都可以从npm中获取

构建工具的高度自动化，使得使用npm的成本非常低

CommonJS不会异步加载，而是同步一次性加载出来

4.打包工具

grunt

gulp

fis3

webpack

# 初始化package.json

npm init -y


# --save把该包保存在package.json中， -dev表示该报仅限于开发环境使用

npm install --save-dev webpack

代码压缩

plugins:[new webpack.optimize.UgliyfyJSPlugin()] 

 

5.上线的流程

将测试完成的代码提交到git版本库的master分支

将当前服务器的代码全部打包并记录版本号，备份

将master分支的代码提交覆盖到线上服务器，生成新版本号

为了把项目部署上线，首先我们需要确保这个项目已经在本地跑通了，所谓跑通就是前端，后端，和服务器都已经被串在一起，而且可以正常运行了。在这个基础上，我们的部署分为以下几个步骤：

1. 购买域名和远程服务器
2. 域名解析，实名制认证，备案
3. 把项目代码放在远程服务器上
4. 程服务器安装数据库
5. 前端编译静态文件
6. nginx前端配置
7. 解决前后端跨域问题
8. 项目在线上跑通以及后续完善

1.购买域名和远程服务武器

购买服务器时，会让你选择服务器的地域，如果你的地域选在国内的话那你的域名是需要备案的，而这个备案过程大约需要半个月，所以着急着项目上线的同学可以把地域选在香港，是不用备案的。但是服务器放在香港的缺点就是有点延迟，所以服务器放在哪里还需要自己权衡。

购买服务器时还需要选择应用镜像和系统镜像，这里我们没有用到任何应用来构建我们的网站，所以只要选择系统镜像就好了。而选择什么系统呢？什么系统你最熟悉就选择什么系统，如果你完全是个小白，而且也不熟悉Linux系统的话，我个人不负责任的推荐windows系统。至于windows系统被嫌弃的不安全等问题，对于我这个个人网站来说都是不那么重要的

2.域名解析

在对域名进行实名制认证之后(如果你的服务器地域在国内，还需要进行备案)，我们就可以对域名进行解析了。所谓域名解析，就是把域名的指向设置为我们购买的服务器的ip地址。域名只是一个方便我们记住的网站的名字，而我们真正需要访问的其实是服务器的那个ip地址。

3.把项目代码放在远程服务器上

接下来我们把代码搬到远程服务器上，使用git。我们可以把项目放在github上之后，再在远程服务器上把代码clone下来。关于git有一个很浅显易懂的教程，是廖雪峰老师写的，这是链接。

代码clone下来以后不要忘了在服务器上安装运行代码所需要的软件和依赖包。比如我的后端是nodejs所以我就需要安装node。而依赖包的安装可以借助包管理工具npm或者是yarn。具体的方法在另一篇文章里有，请移步。

4.远程服务器安装数据库

前后端就准备妥当，这时候我们需要在服务器上安装数据库了。不同的数据库安装方法不同，相同的数据库库不同的操作系统安装方法也不同，这里需要根据自己的情况去找相应的文档。

如果你也是在windows系统里安装mongodb数据库的话，可以参考这个视频。

关于如何在网上准确的找到自己所需要的资料，这里我想结合我的经验说几句。找资料首先第一想到的应该是官方文档，因为官方文档是最新的，很多数据库(比如mongodb我就踩过坑)，版本的变更安装方法也会不一样，第三方网站给出的安装方法往往都是过时的，不适用的。但如果官方文档读的云里雾里怎么办？这个时候我推荐去Youtube找视频看，把视频按发布时间排序，找最新的视频看。这样再结合官方文档应该就没有问题了。

5. 文件编译

关于编译我知道的也不多，所以这里只说一下具体我是怎么操作的，留个坑以后填。

首先是前端代码的编译，前端代码里直接npm run build或者是yarn run build就可以编译出静态文件，这里的静态文件是经过压缩的，所以代码的加载速度快。另外由于我的前端代码是用ES6标准写的，执行这个编译过程(如果你正确配置了babel)也帮我把ES6编译成了服务器可以识别的ES5代码。

然后是后端，后端也使用ES6写的，所以后端也需要用babel来编译一下。

6. nginx前端配置

这里我们使用nginx主要有两个目的，第一是我们需要nginx充当我们的前端静态文件代理服务器，第二就是我们需要nginx的反向代理帮我们解决跨域的问题，因为我们这是一个前后端分离的项目，前后端运行在不同的端口上就需要解决跨域的问题。

ngnix可以去官网下载，下载完成后找到nginx.conf文件，我的是在目录C:\nginx-1.14.2\nginx-1.14.2\conf下。打开nginx.conf文件，这里我们重点关注一下server里面的配置，有几项要根据我们的具体情况进行编辑。

首先，listen在80端口，没有问题，因为我们输入网址时默认的就是访问80端口。

server_name后面应该填上你自己的域名。

root后面应该填你的前端静态文件的存放目录。

location后面的/表示当路径在主页的时候，这里不需要改动。花括号表示访问根目录里面(也就是你填写的root目录)的index.html文件。如果你的入口文件是别的名字的话记得更改。

整个连起来，着几行代码的意思就是：当输入网址chenxin.art的时候，nginx会加载root目录里的index.html文件。相信理解以后你就知道要改哪些东西了。

到这一步为止，在浏览器中输入你的域名应该可以看到静态部分的网页了，但是你会发现所有的ajax请求都会报错，因为我们的前后端还没有真正的连通，还有一个跨域的问题需要解决。

7.解决前后端跨域问题

我们借助nginx的反向代理来解决跨域的问题。具体操作如下：在nginx.conf文件的server配置里新增几行代码，现在你的server应该如下所示:

 别的地方都没动，我们只是新增了一个location，而且这个location后面的路径需要改成你自己的ajax请求的路径，比如我的是/api。

proxy_pass后面的端口号也要改一下，改成你的后端运行的端口。再后面的代码我们保持原样，不用更改。

这新增的几句代码的意思是：当请求的路径以/api开头时，将请求代理到8080端口，而我的后端就运行在8080端口，所以就能够响应请求了。

到这里为止，我们的项目就算是真正的在线上跑通了。

6.回滚的流程

将当前服务器的代码打包并记录版本号，备份

将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号

7.Linux基本命令

服务器使用Linux居多，server版，只有命令行

测试环境要匹配线上环境，因此也是linux

经常需要登录测试机来自己配置，获取配置

# 登录远程服务器
ssh name@server

# 创建一个新文件夹
mkdir a

# 删除一个文件夹a
rm -rf a


#查看当前目录下的文件、文件夹名字
ls

# 查看当前目录下的文件、文件夹内容
ll

# 
cd a
cd ../../


# 新建一个文件或查看文件内容
vim a.js
vi a.js

#编辑好文件后可以通过按Esc键+":wq"保存并退回命令行，按Esc+":w"保存文件


# 输出文件内容
cat a.js
cat head a.js
cat tail a.js

# 搜索文件中的关键字
grep "a" a.js

# 删除文件
rm a.js

8.运行环境

浏览器就可以通过访问链接来得到页面的内容，通过绘制和渲染，显示出页面的最终的样子，整个过程中，我们需要考虑什么问题？

1.页面加载过程

1.加载资源的形式输入url或跳转页面，加载html

• 加载html中的静态资源，如script标签、img标签、video、audio、link的内容

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。 src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在 位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片 和 frame 等元素。

<script src =”js.js”></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行 完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点） 或当前文档（链接）之间的链接，如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式

2.加载一个资源的过程

从输入URL到浏览器显示页面发生了什么？

浏览器进行DNS域名解析成IP地址----->www.baidu.com----->.....

应用层发送http请求到IP地址

传输层TCP传输报文，进行三次握手

网络层IP协议查询MAC地址

数据到达数据链路层

服务端接受请求，进行处理，并发送响应内容

浏览器得到响应内容，进行页面渲染，HTML解析器对HTML进行解析成DOM Tree，CSS解析器对css解析成CSSOM，把 DOM 和 CSSOM 组合成 渲染树 (render tree)，在渲染树的基础上进行布局, 计算每个节点的几何结构，把每个节点绘制到屏幕上 (painting)

3.浏览器渲染页面的过程

HTML解析器把HTML解析成DOM Tree

CSS解析器把css解析成CSSOM 

将DOM Tree和CSSOM Tree 结合生成Render Tree

Layout 根据Render Tree,在渲染树的基础上进行布局, 计算每个节点的几何结构

把每个节点绘制到屏幕上 (painting)

遇到<scritp>标签时，会执行JS并阻塞浏览器的渲染

解释白屏问题和 无样式内容闪烁（FOUC）

白屏的根本原因是浏览器在渲染的时候请求时间过长造成的。

 Chrome的渲染流程大致是HTML-->Dom-->Css-->Cssom-->Render Tree-->进行计算-->painting最终才是我们看到的网页界面。

1.如果把样式放在底部，对于IE浏览器，页面会出现白屏，而不是内容逐步展现
2.如果使用@import，即使css放入link，也可能出现白屏,因为import会导致CSS文件不能并行下载。所以，尽量避免使用css @import而尽量采用link标签的方式引入，让多个css可以并行下载。
3.js脚本会阻塞后面内容的呈现和其后组件的下载，对于图片和CSS, 在加载时会并行加载，但在加载js时，会禁用并行，并且阻止其他内容的下载。所以将js放在页面的顶部也可能会导致白屏。建议将JS放在body标签内的底部(当操作dom节点时节点存在+防止白屏)

js上存在并发，而不存在并行。
并发的关键是你有处理多个任务的能力，不一定要同时。
并行的关键是你有同时处理多个任务的能力。
所以它们最关键的点就是：是否是『同时』。

并行:在一个 js 线程上不存在并行（JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事），即同一个时间只能执行一段 js 代码。
并发是指这个系统拥有处理多个任务的能力，并不要求同时性。当js的setTimeout执行时，其实是把setTimeout里的函数加入了消息队列，等系统空闲时再依次处理。此时系统利用消息队列，相当于拥有了并发的能力。

FOUC (Flash of Unstyled Content) 无样式内容闪烁

FOUC 指逐步加载无样式的内容,等CSS加载后页面突然展现样式，对于Firefox，渲染机制与chrome略有不同，因此会出现FOUC；把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现FOUC现象，对于 Firefox 会一直表现出 FOUC .

4.CSS要放到head中（css放到其他地方，DOM渲染时会先根据默认的样式渲染，然后解析到样式后，会重新渲染样式），JS放在body最下面（JS时单线程的，JS的加载会阻塞浏览器的渲染）

5.window.onload与document.DOMContentLoaded()

window.addEventListener("load",function(){
    //页面中的全部资源加载完毕后，才能执行，包括图片、视频等
},false);

document.addEventListener("DOMContentLoaded",function(){
    //页面中的DOM结构加载完毕就会执行，此时图片、视频可能没有加载完
},false);

2.性能优化

多使用内存、缓存或者其他方法

减少http请求、CPU计算

从哪入手？

1.加载页面的静态资源

静态资源的合并、压缩

静态资源缓存

使用CDN让资源加载更快

使用SSR(服务端渲染)，服务端直接返回解析好的HTML

2.页面渲染

css放到head标签中，script放到body的最后面

懒加载（图片懒加载，下拉加载更多）

<img id="img1" src="preview.png" data-realsrc="abc.png">
<script>
    //先将图片显示一个预先的图片，然后加载真正的图片
    var img1 = document.getElementById("img1");
    //加载真正的图片，图片地址存放在data-realsrc属性中
    img1.src = img1.getAttribute("data-realsrc");
</script>

减少DOM查询，对DOM查询做缓存

var img1 = document.getElementById("img1");

减少DOM操作，多个操作尽量合并在一次执行（减少重绘重排）

var frag = document.createDocumentFragment();

for(var i = 0; i<100;i++){
    var p = document.createElement("p");
    frag.appendChild(p);
}

document.body.appendChild(frag);

事件节流

var textNode  =  document.getElementById("text");

var timeId;
textNode.addEventListener("keyup",function(){
    if(timeId){
        clearTimeout(timeId);
    }
    timeId = setTimeout(function(){
        //触发change事件
        //如果用户输入的很快，不会触发这个方法，等待100ms后触发，减少计算
    },100)
},false)

尽早执行操作，如DOMContentLoaded

3.安全性

XSRF跨域网站请求伪造

XSS跨域脚本攻击

XSS cross-site scripting

 预防：