强大的Grid网格布局
概述Grid 网格布局是网页最强大的布局方案
上图就是 Grid 的拿手好戏
Grid 布局将容器划分为“行”和“列”横纵分布的“单元格”，组成“二维布局”，然后将“项目”放置在指定的单元格内，形成复杂布局。
基本概念容器和项目
采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。
123456<div> <div><p></p></div> <div><p></p></div> <div><p></p></div> <div><p></p></div></div>
上面代码中，最外层的 <div>元素就是容器，内层的三个<div>元素就是项目。注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对 ...
浅谈前端面筋 (JS篇)
JS 中的 8 种数据类型及区别包括值类型(基本对象类型)和引用类型(复杂对象类型)
基本类型(值类型)： Number(数字),String(字符串),Boolean(布尔),Symbol(符号),null(空),undefined(未定义)在内存中占据固定大小，保存在栈内存中
引用类型(复杂数据类型)： Object(对象)、Function(函数)。其他还有 Array(数组)、Date(日期)、RegExp(正则表达式)、特殊的基本包装类型(String、Number、Boolean) 以及单体内置对象(Global、Math)等 引用类型的值是对象 保存在堆内存中，栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址。
JS 中的数据类型检测方案1.typeof12345678910console.log(typeof 1) // numberconsole.log(typeof true) // booleanconsole.log(typeof 'mc') // stringconsole.log(typeof function () { ...
浅谈前端面筋 (CSS篇)
HTML5 新特性、语义化
概念：HTML5 的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】
语义化标签：header nav main article section aside footer
语义化的优点:
在没 CSS 样式的情况下，页面整体也会呈现很好的结构效果
代码结构清晰，易于阅读，
利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
CSS 选择器及其优先级选择器
选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel=”external”])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
优先级
!important
内联（1000）
id 选择器（0100）
类/属性/伪类选择器 （0010）
元素/伪 ...
浅谈前端面筋（浏览器篇）
从输入 URL 到页面加载的全过程
在浏览器中输入 URL。
查找 DNS 缓存
浏览器缓存：浏览器会记录 DNS 一段时间，因此，只是第一个地方解析 DNS 请求；
操作系统缓存:如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统， 获取操作系统的记录(保存最近的 DNS 查询缓存)；
路由器缓存：如果上述两个步骤均不能成功获取 DNS 记录，继续搜索路由器缓存；
ISP 缓存：若上述均失败，继续向 ISP 搜索。
DNS 域名解析：浏览器向 DNS 服务器发起请求，解析该 URL 中的域名对应的 IP 地址。DNS 服务器是基于 UDP 的，因此会用到 UDP 协议。
建立 TCP 连接：解析出 IP 地址后，根据 IP 地址和默认 80 端口，和服务器建立 TCP 连接。
发起 HTTP 请求：浏览器发起读取文件的 HTTP 请求，该请求报文作为 TCP 三次握手的第三次数据发送给服务器
服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的 html 文件发送给浏览器
关闭 TCP 连接：通过四次挥手释放 TCP 连接
浏览器渲染（渲染引擎） ...
浅谈前端面筋（网络篇）
HTTP 和 HTTPSHTTP 和 HTTPS 基本概念
HTTP 是超文本协议，用于从服务器传输超文本到客户端的超文本协议。
HTTPS 是安全的 HTTP 通道，在 HTTP 下加入 SSL 层进行加密处理数据。其作用是保证数据传输的安全性和完整性。
HTTP 和 HTTPS 的区别和优缺点
HTTP 是超文本传输协议，明文传输数据；HTTPS 要比 HTTP 更安全，HTTPS 通过 SSL 层加密数据，在传输过程中保证数据安全，可靠，完整。
HTTP 默认端口 80；HTTPS 默认端口 443。
HTTP 连接简单，无状态；HTTPS 在握手阶段相对耗时，会增加页面加载时长。
HTTPS 的缓存不如 HTTP 高效。
HTTPS 需要 CA 证书，费用较高。
SSL 证书需要绑定 IP，不能在用一个 IP 上绑定多个域名，IPV4 资源支持不了这种消耗。
HTTPS 协议的工作原理
客户端使用 HTTPS url 访问服务端，服务端建立 ssl 连接。
服务端接收到客户端请求后，会将网站证书（证书包含公钥）发送给客户端。
服务端和客户端开 ...
