众所周知，css的世界，网页布局技术一直是占据着前端工程师几乎每天都会接触的东西；
从最早的，table布局，定位，浮动，margin，padding
到现在比较先进的flex
但是讲真，在flex之前，我们的布局技术感觉力不从心，flex问世之后布局的春天也慢慢来了，但是作为IT界，越晚来的技术一定是最牛逼的，这一点已经在很多框架和技术点上已经见证了，这个技术就是grid!

grid作为最先进的网格布局，上手非常快，也非常简单，但是还是有很多专门写css的前端程序员不知道grid，压根没听过，说明渗透率比flex低，所以今天这个文章，老沈保证三分钟看完所有常用知识点，就可以在项目中进行实战练习了。

第一分钟：

建立dom和初始化grid布局

  <div class="container">
    <div class="header">HEADER</div>
    <div class="menu">MENU</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
  </div>
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
  }

首先，网格布局的容器：
1.声明display:grid
2.行 用repeat函数拆分成12列，每一列为1fr（份） 份的意思：除去确定尺寸，剩下将会自动平均分配，1fr就是一份
3.列 确定了3行，第一行的高是50，第二行是350px，第三行是50px
4.（可选）网格之间的间隙，还可传入2个参数，一个是列 / 行

第一分钟看完了？我们看看实际的效果。

第二分钟：
其次，为了把网格利用的非常好，我们需要来用div填格子；
1.在子div中我们可以通过grid-column-start 和 grid-column-end来规定开始和结束的网格线，ps:如果宽12列，那么加上最左边和最右边就是13条网格线（11+2，12列11条线），所以如果要沾满第一行，就必须是从1到13，可以用代码这样写：

grid-column-start:1
grid-column-end:13

为了简写我们可以grid-column:1/13
2.行是这样，列也是同理

第二分钟看完了？我们看看实际的效果

第三分钟

我们再来一种不一样的方式布局，如果数格子太low了，我们有没有更简单的方法，答案是有
我们可以利用

 grid-template-areas:
  "h h h h h h h h h h h h"
  "m m c c c c c c c c c c"
  "f f f f f f f f f f f f";

第一眼是不是没看懂？hhh mm cc ff是啥玩意啊，这个是自己定义，这个代码的意思就是说我在父元素定义了这个布局，我的子元素只要和这个hh mm进行一个标识匹配就可以不用数格子，那如何匹配呢？

.header {
 grid-area: h;
}

天哪，这么秀的吗？不仅仅可以这么秀，如果你要空隙咋办？

grid-template-areas:
  ". h h h h h h h h h h ."
  "m m c c c c c c c c c c"
  "f f f f f f f f f f f f";

通过.的占位符就可以留出空隙了，我们可以结合媒体查询写一个非常简单的响应式布局；

@charset "utf-8";

.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-gap: 5px;
/ 图表可视化表示 /
grid-template-areas:

"m m h h h h h h h h h h"
"m m c c c c c c c c c c"
"f f f f f f f f f f f f";

}

.header {
grid-area: h;
background: red;
}
.menu {
grid-area: m;
background: blue;
}
.content {
grid-area: c;
background: yellowgreen;
}
.footer {
grid-area: f;
background: black;
}
@media screen and (max-width: 640px){

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
    /* 图表可视化表示 */
    grid-template-areas:
      "h h h h h h h h h h m m"
      "c c c c c c c c c c c c"
      "f f f f f f f f f f f f";
  }

}

结束；转载请说明出处-因卓诶老沈

winter老师说，在他面试和认识的前端开发者中百分之70的人对浏览器是一知半解的状态，对于一个每天每时每刻都会接触的开发工具，我们需要对其浏览器运行过程和HTTP进行一些必要研究，因为这些都是面试中非常常见的考点。
这最近几篇文章，都是前端必知的浏览器知识，而不是浏览器开发者必知浏览器知识。
首先浏览器是如何工作的？其实无非就是把url一请求，浏览器只提供view视图来显示而已，这是对于浏览器开发者来说的。
过程解析：请求使用HTTP或者HTTPS协议，向服务端请求页面 -> 请求回来的HTML被构建成DOM树 -> 计算DOM树上的CSS属性 ->
最后根据CSS的属性对其一个一个渲染 得到位图-> （可选步骤）对位图进行合成，可以加快后期的绘制速度 -> 合成之后绘制到界面上；
这是一个浏览器从请求到解析再到界面的全部过程；这也是面试可能被问到的，所以这边不用记忆这么死板的知识点；
请求->构建dom->计算css属性->渲染dom->合成->绘制到页面
ps：请求过来的HTML，浏览器经历这一切都是“流”式的工作方式，即不一定要等到上一步骤的完全结束，就开始输出内容，所以我们加载网页的时候，网络比较差会看到一块一块的出来，这就是流的特点。

--HTTP协议
1.HTTP1.1 https://tools.ietf.org/html/rfc2616
2.HTTP1.1 https://tools.ietf.org/html/rfc7234
上面两份是HTTP协议的靠谱文档

HTTP协议是基于TCP协议出现的，它规定了REQUEST 和 RESPONSE 两种模式，tcp是一种双向的通讯通道，而HTTP协议的出现可使浏览器必须首发起。

我们可以口述一个基于TCP手动实现一个HTTP请求：首先建立TCP连接与服务器 -> 然后写request-line，它分为三个部分,HTTP Method,也就是请求的“方法”,请求的路径和请求的协议和版本 -> 然后返回的第一行就是response-line，也分为三个部分，协议版本，状态和文本；

--HTTP方法
HTTP的方法和JAVA亦或者是和web编程的REST风格很相似，有get，post，delete，put，connect，head，options，trace；
get默认我们在地址栏输入url时候就是默认的get提交
post一般为表单提交
put 做一个增加的操作
delete 删除操作
connect 通常和webscoket连接
head 返回头部信息
options和trace 在企业中一般做测试，在线上环境一般没有这玩意

--HTTP状态码
1** 临时回应，表示让客户端继续
2** 表成功
3** 表目标发生资源变化 301&&302 永久或者临时跳转 304跟客户端缓存没更新
4** 客户端请求错误 403没权限 404资源丢失 418（愚人节彩蛋）ps:要不是winter说我还没见过这个菜单
5** 服务端请求错误 500 请求错误服务端 503 暂时错误，一会再试试

--HTTP的head （这边直接上图）规定了对应的属性和值
request head

response head

ps:这个请求头要知道看到它就要知道它什么意思

--HTTPS和HTTP2

https://tools.ietf.org/html/rfc2818
HTTPS顾名思义：super http 它是也是基于TCP的，他在连接的时候会首先和服务端建立TLP连接，相当于在HTTP外层包了一层加密的壳，它与HTTP传输的内容没有任何区别，TLS是基于TCP的；主要作用就是确确定服务端身份，以及不会存在1.1的从网络传输节点进行窃听和篡改的问题

HTTP2 是HTTP1.1的升级版本
优点：支持服务端推送，支持TCP复用

服务端推送能够在客户端发送第一个请求到服务端时,提前把一部分内容推送给客户端,放入缓存当中,这可以避免客户端请求顺序带来的并行度不高,从而导致的性能问题。

TCP 连接复用,则使用同一个 TCP 连接来传输多个 HTTP 请求,避免了 TCP 连接建立时的三次握手开销,和初建 TCP 连接时传输窗口小的问题。

--结束

这段时间写第二章，希望能对我和你们都有一定的帮助理解浏览器的工作原理，知识不易，大家消化一下，部分demo出自winter
《重学前端》，转载说明出处：因卓诶-老沈

前端部分，css是最缺乏标准的语言，不像html和js有着大量的规范标准，但是css你几乎找不到一个像他们一样的标准。
css的顶层样式表分为at-rule和qualified-rule 一个是at规则，一种是普通规则；
我们的at规则是由一个@发起，跟一个区块组成的，如果没有区块是以分号结束的；at规则是远远比普通规则少并且少用的，
所以大家可能会对at-rule比较陌生。

@charset ： https://www.w3.org/TR/css-syntax-3/
@import ：https://www.w3.org/TR/css-cascade-4/
@media ：https://www.w3.org/TR/css3-conditional/
@page ： https://www.w3.org/TR/css-page-3/
@counter-style ：https://www.w3.org/TR/css-counter-styles-3
@keyframes ：https://www.w3.org/TR/css-animations-1/
@fontface ：https://www.w3.org/TR/css-fonts-3/
@supports ：https://www.w3.org/TR/css3-conditional/
@namespace ：https://www.w3.org/TR/css-namespaces-3/

上面这么多，是已经整理好的at文档
下面我们给所有的at规则做一个解释和demo

@charset "utf-8" ---- 规定css文件的编码
@import "index.css" ---- 引入对应的css文件（除了编码都可以全部引入） ->
@import url("index.css") ->
@import [ | ]

    [ supports( [ <supports-condition> | <declaration> ] ) ]?
    <media-query-list>? ;

@media print { ---- 他能对设备做一些判断，此方法体是普通规则

body { font-size: 10pt }

}

---- @page，针对于分页媒体网页表现，除了设置页面本身自己，也可以设置周围其他盒

@page {
size: 8.5in 11in;
margin: 10%;

@top-left {

content: "Hamlet";

}
@top-right {

content: "Page " counter(page);

}
}

-- counter-style 它可以自定义列表前缀表现，具体的方法可以百度有详细的api
@counter-style triangle {
system: cyclic;
symbols: ‣;
suffix: " ";
}

@ support support --检查环境的特性，它与 media 比较类似。
@ namespace --用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。
@ viewport --用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 html 的 meta 代替。

普通规则：由选择器和声明区块构建的；声明区块又由属性和值构建而成；
下面这张图，就能很好的解释选择器的优先级和权重问题

值得注意的是：我们在写属性的时候不要写两个--，否则会被当成css变量处理，与之配合的是var函数

:root {
--main-color: #06c;
--accent-color: #006;
}
/ The rest of the CSS file /

foo h1 {

color: var(--main-color);
}

css也支持一些计算属性：

calc() max() min() clamp() toggle() attr()

这些函数用的比较多的就是calc和max min函数，实际开发中我们可以用calc简单的计算出不同运算符加减乘除

test{

height:calc(50% - 10px)
}

ps: 这些变量我们再做运算的时候，一定要空格隔开

css的函数有很多，欢迎提出你日常中用到过的函数以及应用场景吧！

本文部分demo摘自winter老师的专栏

HTML5标签中增加了非常多的语义化标签，比如nav，footer诸如此类

但是这篇笔记，主要介绍这些语义化标签以及应用的场景

作为一个程序员，你肯定就在想，html非常的简单，是我们入门级别的语言

但是我想说：html是入门简单，精通非常难，可以完全和后端精通相媲美

因为难的指标就是：能够正确运用标签，可能会和自身的“文化”素养挂钩：

比如说：

语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。

这是极客专栏上的一段话：但是我并不认为语义化标签能对开发造成良好的维护性，因为不是每一个前端工程师都精通语义化标签，这会造成累加更多的沟通成本

下面举一下比较简单的例子：ul是无序列表，ol是有序列表，可是在我们开发中，总是把一些相关性的信息列表做成ul，如果大量的使用此类代码，会对机器读码造成

肉眼开不见的压力，也会让你的代码变得更臃肿；

所以，对于语义标签，我的态度是：“用对”比“不用”好，“不用”比“用错”好。当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们。

摘自极客专栏的一段话，作为一个优秀的前端工程师，不仅仅要考虑的是功能的实现，也要考虑你的标记语言是否在某个程度上是优雅的；

最后说一句话：标签语义化不是我们现在所担心的，因为它和你们的工作可能没任何关系，甚至可以继续使用div，span，都不影响，只是语义化是一个趋势，我们要改变这个风气。

koa2是express框架的原班人马打造，仅仅只有600 700行代码，可谓超轻量级做小程序，博客轻量级程序，可以不用express，koa2也是一个非常不错的选择；

首先我们来看看koa2的入门demo吧，首先安装koa2，直接npm安装即可；

const koa = require('koa')
const app = new koa()

app.use(async(ctx,next)=>{
ctx.body = '1'
//下一个中间件
next();
//上下文
ctx.body = ctx.body+ '2'
})

app.use(async(ctx,next)=>{
ctx.body = '1'
//下一个中间件
next();
//上下文
ctx.body = ctx.body+ '2'
})

app.use(async(ctx,next)=>{
ctx.body = '1'
//下一个中间件
next();
//上下文
ctx.body = ctx.body+ '2'
})

app.listen('3000')

所谓的消息中间件的概念，就是一个类似洋葱圈的样子，我们从请求编译到结束，会从外层进入内层，再从内层穿过外层，执行next方法就会进入下一个中间件，
ctx是上下文对象；

我们可以写一个定时方法，然后使用await方法来进行等待中间件执行完毕；

app.use(async(ctx,next)=>{
ctx.body = '3'
await delay()
//下一个中间件
await next();
//上下文
ctx.body = ctx.body+ '4'
})

自己实现一个koa2的打印logger

module.exports=async(ctx,next)=>{
const start = new Date().getTime();
await next()
const end = new Date().getTime();

console.log(ctx.request.url,end-start,ctx.body.length)
}

打印请求路径，和运行时间，还有上下午字符串长度

我们直接在server.js中app.use使用这个logger，也别忘记了引入；

koa2的路由的2种实现方法

app.use(async(ctx,next)=>{
ctx.body = '1'
if(ctx.request.url == 'qitiandasheng'){
ctx.body = '齐天大圣'
}else if(ctx.request.url == '/'){
ctx.body = '首页'
}else{
ctx.body = '

404

第一种是利用上下文对象的request.url来在中间件中做判断来做出对应的显示；

还有一个比较正规的方法是利用koa2-router，首先我们安装它

router.get('/sun', (ctx, next) => {
ctx.body = '1'
next()
});

app
.use(router.routes())
.use(router.allowedMethods());

koa router地址：https://github.com/alexmingoia/koa-router