来份日常前端知识巩固——上篇

前言

距离上次被面试过了一段时间了，有些知识点由于回顾较少已微有忘却，虽然很多内容大家都有只是为了面试而准备、工作完全用不到的“共识”，不过我认为知识总是有其存在的意义，也许确实用不到，但知道后碰到适用场景好歹能想到有这么个东西。正巧前几天在微信（来源——>web前端学习圈）上看到一个推送，上面列举了前端一些常见知识点，看完整个列表发现自己虽然多数都曾知晓，但一些问题已然不能给出一个完备的回答，所以就趁假期有空根据各个问题搜罗整理一下相应“答案”（答案不会很完整，不然好多单独都能拿出来写一篇），反正捏，技术的东西想记住不是靠背的，背不完且背了也没用，还是得理解和实战，项目没遇到的写写demo什么的也是很加深印象的······

正文

一. HTML

1. HTML5新特性

• 声明：声明页面以标准模式进行解析与渲染；
• 标签的新增和舍弃：增——canvas(绘图)、video(视频)、audio(音频)、header(头)、footer(尾)、main(主体)、article(文章)、section(部分)、nav(导航栏)等；删——basefont、big、center、font、s、strike、tt、u（直接忘掉它们），详情参阅：HTML5的革新；
• webStorage：很重要，逢面几乎必考，实用价值高。分为sessionStorage和localStorage，sessionStorage会话结束就自动删除(如关掉浏览器窗口)，localStorage得自己删(也可以二次封装设置生命)，sessionStorage即使同源也不在不同窗口共享，(localStorage和cookie同源可以跨窗口)，webStorage容量通常大于4M(cookie<=4K)，不会随请求发送到服务器(cookie会跟着一起发过去)，详解可搜索webStorage与cookie的区别，网上内容比较多，懒癌可点webStorage与cookie的区别；
• input的类型：合理使用新加的类型可以减少很多在HTML4年代必须用JS写的功能代码，常用的有number、email、date、file、url、range等，这些基本内容在w3cSchool可以简单查阅；
• webSocket：用于客户端与服务器建立持久连接，让服务器可以主动发送消息到客户端，在HTML4年代需要使用ajax轮询或http长轮询模拟实现。详情可参考：WebSocke是什么原理？为什么可以实现持久连接？——Ovear的回答；
• webWorker： webWorker简言之就是因为JavaScript单线程，想同时处理咋办呢？那就多进程，webWorker就是HTML5新引入的功能，可以创建新的进程使得多个js文件可以同时运行（也得慎用，不然浏览器GG就尴尬了）。实用性嘛，太大的计算交给服务器，也不能处理DOM，所以呢，随机应变合理使用即可，更多内容可阅：HTML5 Web Worker深入浅出教程；
• ······

2. HTML语义化

定义：指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。。
意义：
①合理的语义化便于他人阅读、理解和定位与修改；
②方便搜索引擎爬虫的抓取（爬虫依赖于标签来确定上下文和各个关键词的权重），利于网站的SEO；
③方便其他设备进行合理的解析（如移动便携设备、掌上阅读器等）。

3. XHTML和HTML的区别

• XHTML的元素必须被正确的嵌套；
• XHTML元素必须被关闭（空元素用 />）；
• XHTML标签名必须用小写字母；
• XHTML文档必须有根元素；
• 元素属性不能为空，用”“包含；
• ······
• 不过因为XHTML太过于严格，所以HTML5出来后大家基本都用HTML5了，因此XHTML可以用来规范自己代码风格，但不是必须满足（类似写JS用ESLint）。

4. meta标签

基本操作：
解释：

The tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
标签提供了HTML文档相关的元数据，元数据不会展示在页面上，但是会被机器识别。meta元素通常用于具体说明页面描述、关键词、文档作者、最后修改时间与其他的元数据。

常用属性：

• name: keywords、description、viewport(移动开发重点)、author、copyright、robots…
• http-equiv: content-Type(设置网页字符集)、X-UA-Compatible(浏览器渲染页面版本)、cache-control(指定请求和响应遵循的缓存机制)、expires(网页到期时间)、refresh(自动刷新并指向某页面)、Set-Cookie(cookie设定)…
• content: 根据name与http-equiv属性进行相应配置，详情参阅：HTML meta标签总结与属性使用。

5. canvas

定义： canvas是HTML5新增的组件，类似一块画布，可以使用JavaScript在上面绘制图表、动画等，可以使用JavaScript直接进行交互。
API文档：canvas基本用法

canvas内容非常多，想要熟练掌握需要下一定的功夫，学习的同时也可以参考现成的一些基于canvas的框架如echarts、paperjs、RGraph等，通过效果和源码实现的逻辑梳理对比，可以帮助自己更快提高掌握canvas的能力。

6. IE6 bug

• IE6双倍边距bug：在该元素中加入display:inline 或 display:block；
• png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理；
• 像素问题，使用多个float和注释引起的，使用dislpay:inline -3px；
• 超链接hover点击后失效，使用正确的书写顺序：link visited hover active(lv驴-ha哈)；
• z-index问题，给父级添加position:relative；
• Min-height最小高度，使用!Important 解决；
• select 在ie6下遮盖，使用iframe嵌套；
• 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
  

  IE6在这个时代几乎要彻底沦为过去时了，不过市场占有率还有一丢丢（阅： 浏览器份额统计——百度 都谁在用啊···），尽管实用价值已经较低，但是知道老科技的问题，也算是对历史的掌握与理解，就像我们不能穿越但得了解历史，知过往而向未来。

7. 渐进式渲染

简言之就是优先加载渲染主屏需要显示的内容，之后逐步加载渲染其他内容，其中重点是如何进行资源拆分，如何判断首屏粒度等。

8. HTML模板语言

这块我自己接触过Java的Velocity（.vm结尾的那种文件），然而都没用到它的模板功能，很尴尬···实际用过的是templatejs，不过并不了解其原理和详情，堆了一堆代码而已。然后听说过Node的jade(这算引擎了吧)，然而都没用过，习惯写jQuery(Zepto)、vue、react了·····有兴趣的可以自己查阅相关资料。

二. CSS

1. 盒模型

**定义：** HTML文档都有padding(内边距)、margin(外边距)、border(边框)、content(正文)四个属性，用拟物的手法可以比喻成一个盒子，便可将HTML文档称作盒子模型。 **知识要点：** 谈到盒模型，几乎必提的就是标准模型和怪异模型。

标准模型：W3C标准，IE6以上和其他主流现代浏览器支持。
声明：box-sizing : content-box 或现代浏览器默认
计算公式：width/height = content
怪异模型：IE6及以下版本特色~
声明：box-sizing : border-box
计算公式：width/height = content + padding + border

参阅：[深入理解CSS盒子模型](https://www.cnblogs.com/xiaohuochai/p/5202597.html)、[css盒子模型理解](https://www.cnblogs.com/clearsky/p/5696286.html)

2. CSS实现隐藏页面的方式

• dom {opacity: 0;}，设置透明度为0达到视觉隐藏，继续占据空间并响应交互；
• dom {display: none}，设置元素不显示，不占据空间，不响应交互；
• dom{visibility: hidden}，这是元素能见度为隐藏，继续占据空间，但不响应交互；
• dom{position: absolute;top: -9999px;left: -9999px;}通过绝对定位控制坐标超出屏幕可见范围达到隐藏，不影响布局，可以继续交互;
• dom{clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)}有点SVG的感觉，把元素直接裁剪没，不影响布局，不响应交互；
• dom{display:block; width:0; height:0; padding:0; margin:0; border:none}，这个方法自己想的，通过设置块级元素五大皆空来隐藏，但貌似比较麻烦又或许其他原因，网上其他地方都没看用过，不占空间，不响应交互。
  参阅：用CSS隐藏元素的几种方式

3. 实现元素水平居中

• 行内元素：
  
  • 父容器指定宽度或父容器是块级元素(默认有100%宽)：父容器——.parent{text-align:center}
  • 父容器未指定宽度且非块级元素：子容器直接撑起父容器，理论上不存在相对父容器的居中，特殊操作参见通用。
• 块级元素
  
  • 子元素指定宽度：子元素——.child{margin: 0 auto;}(需要内容居中视情况嵌套text-align:center)
  • 子元素不指定宽度：默认占满该行宽度，理论上只有内容可以居中，特殊操作参见通用。
• 通用(需要考虑兼容性)：子元素——.child{position:absolute/fixed; left: 50%; transform: translateX(-50%);}；子元素——.child{display: inline-block; margin-left:50%; transform: translateX(-50%);}
  

  css定位问题很常见，垂直居中原理类似（行内的可以设置行高达到内容垂直居中），方法很多各有各的使用场景和局限性，此处只列举了几种常见方式，可根据自己的需求选择，不要死死抓一个。

4. position

5. display

6. 浮动的问题和解决办法

7. link和@import的区别

• 从属关系区别：@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
• 加载顺序区别：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
• 兼容性区别：@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
• DOM可控性区别：可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
• .权重区别：link引入的样式权重大于@import引入的样式。

8.css3的flexbox

9. grid布局

10. 如何实现两栏布局

1. display:inline-block;
2. float:left;
3. position:absolute;
4. flex布局

11. css dpi

12. attribute和property的区别

13. 流式布局和响应式布局

14. 移动端布局方案

15. 三栏布局（圣杯布局、双飞翼布局、flex布局）

16. overflow:hidden的缺点

17. css3动画中transition和animation的区别

18. sass、less、stylus

19. 移动端开发的了解（响应式设计、Zepto、@media、viewport、平台判断）

20. BFC

21. css长度单位（px、pt、em、rem、ex、vw、vh、vmin、vmax）

22. 选择器优先级

23. 雪碧图

24. 媒体查询与其原理

25. css的加载是异步的吗？表现在什么地方？

26. 常遇到哪些兼容性问题？常用的hack技巧

27. 外边距合并

28. ‘:before’/’:after’的’:’和’::’的区别

三. JavaScript

(该篇进行了选择性记录)

1. 判断变量是Array类型

• Array自带的Array.isArray(arr)，某些版本浏览器不兼容，需要判断兼容性；
• arr instanceof Array和arr.constructor === Array，跨页面变量判断会失效，注意使用场合（具体为啥自己去查）；
• Object.prototype.toString.call(arr) === '[object Array]'，兼容性最好，如果想节省代码直接用这种，如果确定Array支持isArray就用第一种。

2. 判断变量是number类型

• typeof num === 'number'，原则上用这个即可；
• num.constructor === Number，因为number是数值类型，所以就不怕了；
• Object.prototype.toString.call(num) === '[object Number]'，万能兽；

3. JavaScript引用类型

JavaScript的引用类型有对象、数组、函数，引用类型存放在堆中，数值类型存在栈中，主要涉及知识点有引用类型浅拷贝、深拷贝、比较等。

4. 显示原型和隐式原型

显示：prototype，函数创建时自带(Function.prototype.bind创建的没有prototype属性哟)，默认为空对象，指向函数的原型对象；
隐式：_proto_，JavaScript中任何对象都有的内置属性[[prototype]]，ES5之前官方没给访问的标准方法，浏览器厂商多用_proto_进行访问，其指向创建该对象的函数的prototype。
谈到原型，势必涉及继承、实例等内容，更多内容参考：JavaScript原型

5. 严格模式

只说原因不说内容：
- 消除JavaScript语法的一些不合理、不严谨之处，减少一些怪异行为；
- 消除代码运行的一些不安全之处，保证代码安全的运行；
- 提高编译器效率，增加运行速度;
- 为未来新版本的JavaScript做好铺垫。

      —-阮一峰网络日志

四. ES6

这篇我就啥都不写了，直戳——>阮一峰–ES6，成神之路在此一举