ME!
链滴
2018 Web 开发路线图
🚀 介绍 🎨 前端路线图 👽 服务端路线图对于后端，作者个人更喜欢 Node.js 和 PHP7。另外，我最近一直在做 Go，我非常喜欢它。除此之外，如果我不得不选择另一个，我会去 Ruby。不过，这只是我个人的偏好，你可以选择任何一种你熟悉的语言。👷 部署运维路线图摘自：https://github.com/kamranahmedse/developer-roadmap
前端
0 篇文章兜兜转转的 2017
兜兜转转兜兜转转，从 PM 回归到了码农兜兜转转，年末继续计划家里蹲 2017 还有三天就要过年了，拖延症的我不得不和 2017SayBye，不得不和自己交代一下 2017 我都干了什么？突然脑袋一蒙，我到底干嘛了。。。翻开博客，翻开 Timeline。还好还好，今年没有一片空白 😂 工作去年末准备家里蹲的，但是身为一名党员，怎么能不服从党的号召，然后就被口号为“抓党建促脱贫攻坚”的某司吸引了。。。RESTful、Gi
2018 VS 2017 前端使用数据对比
JavaScriptis 总在变化。新的库，新的框架，新的语言。。。虽然都在朝着更好的方向努力，但回想自己维护的项目和前端进化史，真的是一把辛酸泪。所以我希望不断变化的他们可以加快 WebComponent 的步伐。PS：今年没有 CSS 这一块的数据，我表示很伤心，是因为 CSSinJS 的争论么？JavaScript 当谈论 JavaScript 时，你不仅仅是在谈论一个单一的语言，而是关于这个语言的很多东西。开发
清缓存的目的是什么，如何实现？
2018-12-15 缓存及优点浏览器的缓存可以临时存储一些文件，因此当页面切换或者再次加载相同页面时就不需要去重新下载这些文件。服务端可以设置头部告诉浏览器在一定时间内存储这些文件。这样不仅可以大幅度加快网站的速度还可以节省你的带宽。缓存带来的问题然而当开发者对站点进行修改时就可能会带来一些问题：某些用户可能仍在访问那些修改之前的文件。这样就会导致那些用户使用以前的功能或者访问一个坏了的站点（当服务
HTML 中可以包含多个 `<header>` 或者 `<footer>` 元素吗？
2018-12-16 回答当然可以。W3 文档指出 <header> 和 <footer> 标签表示离他们最近的祖先“段落”区域中的头部和页脚。因此不仅 <body> 可以包含头部和页脚，<article> 和 <section> 同样也可以。加分回答 W3 建议根据你的需求编写你所需要的 <header> 和 <footer>，但是他们在离他们最近的祖先“段落”中仅能出现一次。正确示例 <body><header>...</hea
简单描述 HTML5 语义元素中 `<header>`、`<article>`、`<section>`、`<footer>` 的正确用法
2018-12-17 回答 <header>：可在段落（<body>、<section> 等）中使用，用来介绍或导航该段落的相关内容。如：标题、作者姓名、发布日期和时间、目录和其他导航信息。<article>：是一个独立的元素。能够在逻辑上独立于页面的其他内容而存在，单独创建时可保证内容的完整性。如：博客中完整的文章或新闻中的报道。<section>：是一个较为灵活的容器，可用于存放拥有一个主题的内容。如
简述 `<script>` 标签中的 defer 和 async 属性
2018-12-18 回答如果两个属性都没有（默认行为），脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候，文档解析就会被阻塞，在脚本下载和执行完成之后文档才能往下继续进行解析。总之脚本的下载和执行都是按照文档的先后顺序进行。defer 属性表示脚本按顺序被解析到时就开始下载，下载过程中文档继续进行解析，当文档全部解析完成之后便开始执行下载好的脚本，这相当于在 DOMContentL
什么是 DOM？
2018-12-19 回答 DOM（文档对象模型）是可扩展标记语言的标准编程接口，用来处理如 HTML 或 XML 这样由节点组成的树形结构的标记语言。这些节点（例如元素和文本节点）都是能够被编程接口操作的对象，他们任何可见的改变都会在文档中实时反映出来。在浏览器中，这些接口可供 JavaScript 进行使用，使其操作 DOM 节点来改变他们的样式、内容、在文档中的位置或者通过事件监听器来进行交互。加分回答 DOM 的设
HTML 规范和浏览器实现存在什么区别？
2018-12-20 回答 HTML5 等 HTML 规范定义了一系列文档必须遵循的规则，以便规范能够“有效”的执行。此外，规范提供了浏览器必须如何去解析和渲染文档等诸如此类的说明。如果一个浏览器在处理文档上和规范中的规则保持一直，就可以说他已经支持了规范。到目前为止，还没有浏览器能够支持所有的 HTML5 规范（主流浏览器已经支持了绝大部分），这样一来，开发人员就必须考虑他们的产品或项目需要支持哪些浏览器，他们
XHTML 和 HTML 有什么不同?
2018-12-22 回答主要区别如下：XHTML 是更严格更纯净的 HTML 代码，他必须包含 <DOCTYPE>XHTML 属性值必须使用双引号扩起来 XHTML 属性值不能省略。如 checked="checked"不能简写为 checkedXHTML 元素必须被正确地嵌套。如下就是错误的示例：<b><i>Thistextisboldanditalic</b></i><ul><li>Tea<ul><li>Black
`rel="noopener"` 应在什么场景下使用，为什么？
2018-12-23 回答 rel="noopener"是 <a> 超链接标签的一个属性。他可以禁止打开的新页面中使用 window.opener 属性，这样一来打开的新页面就不能通过 window.opener 去操作你的页面。因此 rel="noopener"应在打开新页面的场景下使用，否则就会导致严重的安全漏洞。如新页面可以通过 window.opener.location=newURL 将你的页面导航至任何网址。
什么是 HTML5 存储？解释一下 `localStorage` 和 `sessionStorage`
2018-12-24 回答在 HTML5 中，页面可以在用户的浏览器中存储本地数据。这些数据以 name/value 的格式进行存储，且只能被存储该数据的网页访问。在 localStorage 和 sessionStorage 中存在生命周期的差异。通过 localStorage 存储的数据是持久化的：他不会过期，可以一直存储在用户的电脑上，除非 web 应用程序删除他或用户使用了浏览器中相关的缓存清除功能。sessionS
介绍一下 CSS 的 BEM
2018-12-25 回答 BEM（Block,Element,Modifier）是一种基于组件的对 CSS 类名进行约定的 Web 开发方法。他通过定义命名空间来解决权重问题，从而使 CSS 更易于维护。BEM 使用 Block、Element、Modifier 来解释其结构。Block 是一个可跨项目重用的独立组件，且是子组件（Element）的“命名空间”。Modifier 可标示 Block 或 Element 处于某种状态
CSS 预处理器有什么优势？
2018-12-26 回答 CSS 预处理器添加了一些实用的原生 CSS 没有的的功能，并且他通过使用 DRY（Don'tRepeatYourself）原则使生成的 CSS 更加整洁和易于维护。他通过简洁的嵌套选择器语法减少了大量重复代码。变量、颜色函数（lighten,darken,transparentize 等）等附属工具，mixins 及循环使得 CSS 更像一个真正的编程语言，这使开发者编写复杂的 CSS 更加容易了
使用 flexbox，创建一个 3 列布局，其中每列占据容器的 col-{n} / 12 比率
2018-12-27 回答设置父容器为 display:flex，然后使用 flex 为每列提供与其比值相对应的 flex-grow 值。<stylelang="scss">.row{display:flex;&__col{...&--2{flex:2}&--7{flex:7}&--3{flex:3}}}</style><divclass="row"><divclass="row__colrow__col--2
简述一下 `@media` 的媒体类型
2018-12-28 回答@media 是可根据一个或多个基于媒体特征、媒体类型等条件来使用样式的规则。其包含以下四种媒体类型：all：适用于所有设备，默认选项 print：仅适用于打印设备 screen：仅适用于台式机、平板电脑、手机等屏幕 speech：仅适用于屏幕阅读器加分回答其余的媒体类型：tty，tv，projection，handheld，braille，embossed，aural 在 MediaQ
描述 CSS 盒子模型布局并简要描述其每一个部分
2018-12-29 回答 CSS 盒子模型（BoxModel）布局包含内容（content）、内边距（padding）、边框（border）、外边距（margin）四个部分。content：盒子内部填充元素内容（例如文本、图像或视频播放器等）的区域。他的大小为 content-box 的宽和高。相关 CSS 属性为 width，min-width，max-width，height，min-height，max-h
focus 有什么效果？应该怎么正确处理他们？
2018-12-30 回答像按钮或锚点标记等元素被选中时，该元素的外围就会出现轮廓。不同浏览器会呈现不同的效果，但一般是在元素周围显示蓝色的轮廓来表示他已经被选中。过去，很多人使用 outline:0 来移除元素被选中的效果。但是，这会让键盘侠们感到很不友好，因为选中效果被移除了。但是如果不移除的话，元素外围的蓝色轮廓有时候会让大多数人感觉不够舒适美观。Bootstrap 等 UI 框架一般采用更加美观的 box
`em` 和 `rem` 有什么区别？
2018-12-31 回答 em 和 rem 都是基于 font-size 的 CSS 属性。唯一的区别是他们继承的对象不同。em 继承父元素中的 font-sizerem 继承根元素（html）中的 font-size 在大多数浏览器中，根元素的 font-size 默认值为 16px 加分回答其他单位 vh 和 vw：窗口高度或宽度的 1/100。可脱离父元素的继承规则，如：窗口高 900px，父元素高 1200px，1vh 为 9px。vmin
CSS sprites 的优点及如何使用？
2019-01-01 回答 CSSsprites 将多张图片合并为一张图片，从而减少浏览器对 HTTP 的请求数量，进而减少网页的加载时间。即使在 HTTP/2 协议下，这依旧可以减少网页的加载时间。在 HTTP/1.1 中，每个 TCP 连接只允许一个请求。现代浏览器虽然可以打开多个（2-8）并行的 TCP 连接，但连接数量依旧有限。HTTP/2 允许浏览器和服务器之间的多个请求在一个 TCP 连接上进行复用。这意味着 TCP 连接