笔试知识回顾(一)

var、let、const

• var：变量提升、声明全局、变量可修改、可重复声明
• let：变量不能提升-暂存死区、声明局部、不可重复声明
• const：变量不能提升、声明常量、声明后必须赋值，否则会报错

[typeof null]、[null instanceof Object]

• null：既是对象，又不是对象，史称「薛定谔的对象」。参考

Http与Https

• Https协议主要可以分为两种，一种是建立安全信息的通道，用来保证数据安全；另一种是来确保网站的真实性。
• Https在Http协议的基础上加上SSL/TLS，以此确保通信安全和网站真实性。
• Https的默认端口号443，http默认端口号8080；
• Http不进行加密，Https的加密机制是一种共享密钥加密和 公开密钥加密并用的混合加密机制；
• Https的长连接和短连接本质上是TCP长连接和 短连接，不仅限短连接。

二叉树已知中序、后续，求前序

中序遍历：DBFEACHGI，后续遍历：DFEBHIGCA

• 前序遍历：根+前子节点+后子节点
• 中序遍历：前子节点+根+后子节点
• 后序遍历：前子节点+后子节点+根
• 通过后续遍历确定根节点A，中序分为DBFE A CHGI，后续为DFEB HIGC A
• 通过前子树的后续遍历确定B，中序分为D B FE，后续为D FE B
• 依此类推，得到整个树的结构

行内元素、块元素

• 块元素：独占一行；能设置宽高；margin、padding均有效，会自动换行。
• 行内元素：不会自动换行；不能设置宽高；margin上下无效。

Http状态码

• 200：找到资源，一切正常；
• 304：该资源在上次请求之后没有改动，这通常用于浏览器的缓存机制；
• 400：表示请求出现错误，比如请求头不对等
• 401：客户端无权限访问该资源，通常会使浏览器要求用户输入用户名和密码来登录；
• 403：客户端未能获得授权，这个是在401之后输入了不正确的用户名和密码；
• 404：请求的资源（网页等）不存在；
• 500：内部服务器错误；

MAC层和OSI参考模型

　　

 HTML中，插入图像

• <img src=”image.gif”>

文件的存储单位

• 为了提高存储空间的利用率,对存储空间的分配,通常是采用离散分配方式,以减少外存零头,并以盘块为基本分配单位。

是否支持CSS某属性

• @supports (display: flex) { div { display: flex; }}  主要是用于监测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，可以使用一套样式；如果不支持这一属性，可以使用另一套样式。具体使用参考

CSS水平居中

• 行内元素text- align:center；
• 块级元素margin:0 auto；
• position:absolute + left:50% + transform:translateX(-50%)；
• display:flex + justif-content:center；

事件委托

• 将监听函数绑定在子节点的父结点上，通过事件冒泡监听内部变化。
• 优点：动态添加元素；减少绑定事件，减少内存。

Calc()函数

• 用于动态计算长度值，width: calc(100% - 100px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

Label标签

• <label> 标签为 input 元素定义标注（标记）。
• label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。用来方便鼠标点击使用，扩大可点击的范围，增强用户操作体验。
• <label> 标签的 for 属性应当与相关元素的 id 属性相同。

Cookie

• 服务器返回的，指定了有效期的是持久cookie，没有指定的是会话cookie。设置的过期时间前一直有效，大小4K。有个数限制，各浏览器不同，一般为20个。携带在http头中，过多会有性能问题。可自己封装，也可用原生。
• localStorage，sessionStorage统称为webStorage，保存在浏览器，不参与服务器通信。大小为5M。
• 生命周期不同：localStorage永久保存，sessionStorage当前会话。都可以手动删除。

CSS3有哪些新特性？

• 边框的圆角border-radius、阴影border-shadow
• 文字阴影text-shadow、旋转transform
• 多列布局column-count
• 颜色透明度rgba()
• 边框效果border-image:url(image.png)
• 媒体查询@media(max-width:20px){}

谈谈对语义化的理解？

• 语义化是指：用合理的HTML标记以及其特有的属性去格式化文档内容。如，标题用h1-h6， 段落用p标签，合理得给图片添加alt属性（当HTML元素本身的物件无法被渲染时，就显示替换文字作为一种补救措施。）
• 语义化的好处：
  • ① 在没有CSS的情况下，页面也能呈现出很好的内容结构
  • ② 语义化使代码更具可读性，便于团队开发和维护
  • ③ 语义化有利于用户体验（例如 title，label，alt属性的灵活运用）
  • ④ 语义化有利于网站优化和后期维护

JS异步加载的方式？

• JavaScript默认是同步加载（又称阻塞模式），这种模式在加载js文件时，会影响后续页面的渲染，一旦网速不好，整个页面将会等待js文件的加载，从而不进行后续页面的渲染，因此提倡将<script>标签放在</body>标签之前。
• 另外，有些js文件是按需加载的，用的时候加载，不用时不必加载。所以引入了异步加载模式（非阻塞模式），即浏览器在下载执行js文件时，会同时进行后续页面的处理。

1. defer —— 以前适用于IE，现在适用于所有主流浏览器。defer属性规定是否对脚本执行进行延迟，js脚本在所有元素加载完成后按声明顺序执行。用法：在script标签里加入defer属性即可，可直接写为defer，适用于所有script脚本<script src='XXX.js' defer></script>
2. async —— h5新属性。async属性规定一旦脚本可用，则会异步执行，是乱序执行的。用法：async只适用于外部引用的脚本，即script有src属性时才可使用。<script src='XXX.Js' async></script>
3. 动态生成script标签。在js里创建script标签，插入DOM中，加载完成后callback。这样所有的js脚本都会在onload事件后才加载，onload事件会在所有文件内容加载完成后才开始执行，极大的优化了网页的加载速度，提高了用户体验。

程序设计：JS对象的深克隆

• (1) 使用迭代遍历对象
• (2) 使用Lodash库
• (3) Json.parse(Json.stringfly())

程序设计：数组去重

• (1) 遍历数组
• (2) 使用ES6的set集合