http协议 状态码

状态码

100 客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。

101 服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到在Upgrade 消息头中定义的那些协议。只有在切换新的协议更有好处的时候才应该采取类似措施。例如，切换到新的HTTP版本比旧版本更有优势，或者切换到一个实时且同步的协议以传送利用此类特性的资源。

102 代表处理将被继续执行。

200 请求已成功。

201 请求已经被实现，而且有一个新的资源已经依据请求的需要而建立，且其URI已经随Location头信息返回。假如需要的资源无法及时建立的话，应当返回 ‘202 Accepted’。

more >>

设计工具

Figma

在会议中，团队成员同时在看一个项目，并实时提供反馈来修改项目，Figma将是最合适不过的解决方案。
官网: https://www.figma.com

Adobe XD

官网: http://www.adobe.com/products/experience-design.html

##Sketch & Plugins
官网: https://www.sketchapp.com/
插件市场: https://speckyboy.com/plugins-sketch-app/

Zeplin

它可帮助开发人员轻松检查画板中的UI规格。 此外，他们可以直接通过Zeplin在画板上标注或下载必要的资源进行开发。
官网: https://zeplin.io

官网: https://material.io/stage/, https://material.io/gallery/

Framer

Framer是利用代码（Coffeescript）进行原型设计。
官网: https://framerjs.com/

ProtoPie

创建简单交互原型而无需输入任何代码成为可能。
官网: https://www.protopie.io/

js模块化

commonjs AMD CMD

node 用commonjs

1
var express = require('express')
//同步全部加载模块 在服务器端没事 在前端不ok

AMD requirejs

1
require([‘jquery’, ‘underscore’, ‘backbone’], function ($, _, Backbone){
　　　　// 干活
　})
//异步去加载3个模块 加载完了才执行回调 回调里是整个程序依赖前面模块要做的事
1
//module.js
define([依赖模块],funciton(依赖模块){
	//导出给别的模块引用的方法
})

//main.js
require(['module'],function(module){
	//do something
})

所以 依赖的模块必须要符合AMD的规范 引入了才起作用

more >>

HTML笔记

格式化标签

1
<br>
<hr>
<i></i>
<b></b>
<tt></tt>
<big></big>
<small></small>
<strong></strong>
<sub></sub>
<sup></sup>
<bdo dir="ltr rtl"></bdo>
<pre></pre>
<code></code>
<var></var>
<samp></samp>
<abbr title=""></abbr>
<address></address>
<blockquote></blockquote>
<q></q>
<ins></ins>
<del></del>
<cite></cite>

more >>

mardown 笔记

‘> 1~6个# 1~6级标题’

‘>区块panel ‘
‘>>子区块’

‘## 二级标题’

‘>1. 有序列表’
‘>2. 有序列表’

代码实例：

‘> return shell_exec(“echo $input | $markdown_script”);’

‘>* red’
‘>+ Green’
‘>- blue’

more >>

git 笔记

命令：

git config –global user.name “Your Name”
git config –global user.email “email@example.com”
git init 把这个目录变成git可以管理的仓库
git add readme.txt 添加到缓存区
git commit -m “注释描述” 提交到仓库
git status 来查看是否还有文件未提交
git diff readme.txt 查看该文件该了的内容
git log 显示从最近到最远的显示日志，我们可以看到最近三次提交
git reset –hard HEAD~100 版本回退操作 这里是退回到第100个版本
git reflog 即可获取到版本号
git rm b.txt 如果我想彻底从版本库中删掉了此文件的话，可以再执行commit命令 提交掉.
git push 实际上是把当前分支master推送到远程。
git branch 查看分支
git branch name 创建分支
git checkout name 切换分支

more >>

css 笔记

优先级

id: 0100
class: 0010
属性: 0010
伪类: 0010
伪元素 : 0001
元素: 0001

  • : 0000
    文内样式: 1000
    !important 优先级最高
    同优先级 比较先后顺序 后来居上

h2{color:red;} 0001
h2.caption {color:red;} 0011

more >>

browserify 笔记

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。
一种解决方法是使用UMD的方式，前端使用requirejs，同时兼容nodejs的情况,例如：

1
(function (window, factory) {
    if (typeod exports === 'object') {
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        define(factory);
    } else {
        window.eventUtil = factory();
    }
})(this, function () {
//module ...
})

more >>

前端性能 总结

图片

使用 CSS Sprites 对图片优化 简单的说就是”利用 CSSbackground相关元素进行背景图绝对定位”，把多次HTTP 调用变为一次调用：因为CSS Sprites
不要在 HTML 中缩放图片
用工具压缩图片
尽可能的使用PNG格式的图片，因为和GIF相比，PNG有更多的功能和更小的体积
选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
DNSlookup是很耗费时间的 减少DNS 查找
使用智图( http://zhitu.tencent.com/ )
使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
尽量避免重设图片大小 ，多次重设图片大小会引发图片的多次重绘，影响性能
DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长 合理使用
字体图标
内容图片多为照片之类的，适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。而GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
使用cdn，例如七牛
浏览器对单个域名下的请求并发数是有限制的，如果是图片量很多的页面，需要考虑使用多域名。
尽量使用png格式的图片来代替滤镜效果，因为开启滤镜会加大浏览器的开销。
方向代理nginx缓存静态文件
不要对image和pdf等二进制文件进行gzip压缩

more >>

flexbox 制作footer

解决方法解决该问题的最好方法是采用 flexbox——CSS3提供的一种先进布局模型，旨在建立具有适应性的布局。如果你对 flexbox 还不怎么熟悉，文章最后有一些扩展阅读链接，可以帮助你了解 flexbox。
我们的演示页面应该具备 Header、主体内容区域和 Footer，下面是该页面的 HTML

1
<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

more >>