再有两个月，2018就快过完了，因而有必要在年末对2018年的前端学习做一个总结，本文主要从前端面试中的一些基础知识来对前端进行相关的总结。本文根据网络面试题进行总结。

基础知识

本部分主要从以下几个方面来回顾前端相关的基础知识：

HTML相关
CSS相关
JAVASCRIPT相关
DOM相关
HTTP相关
webpack相关

Html

html

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。在选择标签时请遵循以下原则： 1.尽可能少的使用无语义的标签div和span； 2.在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利； 3.不要使用纯样式标签，如：b、font、u等，改用css设置。 4.需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）； 5.使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td； 6.表单域要用fieldset标签包起来，并用legend标签说明表单的用途； 7.每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

2 meta viewport

<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′>    声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/>       页面描述
<meta name=”keywords” content=””/>      页面关键词
<meta name=”author” content=”name, [email protected]”/>    网页作者
<meta name=”robots” content=”index,follow”/>      搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”>  启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码
<meta name=”HandheldFriendly” content=”true”>     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name=”MobileOptimized” content=”320″>   微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”>   uc强制竖屏
<meta name=”x5-orientation” content=”portrait”>    QQ强制竖屏
<meta name=”full-screen” content=”yes”>              UC强制全屏
<meta name=”x5-fullscreen” content=”true”>       QQ强制全屏
<meta name=”browsermode” content=”application”>   UC应用模式
<meta name=”x5-page-mode” content=”app”>    QQ应用模式
<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

复制代码

3 canvas

常用api: 1.fillRect(x,y,width,height)实心矩形 2.strokeRect(x,y,width,height)空心矩形 3.fillText("Hello world",200,200);实心文字 4.strokeText("Hello world",200,300)空心文字

CSS

1.盒模型

①ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法如下：

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;
复制代码

② 几种获得宽高的方式 ：

dom.style.width/height 这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。 dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。 window.getComputedStyle(dom).width/height 这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。 dom.getBoundingClientRect().width/height 这种方式是根据元素在视窗中的绝对位置来获取宽高的。 dom.offsetWidth/offsetHeight 这个就没什么好说的了，最常用的，也是兼容最好的。

2，css reset 和 normalize.css 有什么区别

两者都是通过重置样式，保持浏览器样式的一致性；
前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致；
后者修复了常见的桌面端和移动端浏览器的bug：包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
前者中含有大段的继承链；
后者模块化，文档较前者来说丰富；

####3，清除浮动不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}
给浮动元素父级设置高度；
父级同时浮动（需要给父级同级元素添加浮动）；
父级设置成inline-block，其margin: 0 auto居中方式失效；
利用br标签的clear属性；
给父级添加overflow:hidden 清除浮动方法；
万能清除法 after伪类清浮动（现在主流方法，推荐使用）；

.float_div:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.float_div{
    zoom:1
}

复制代码

4，画三角形

#item {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid transparent;
    border-bottom: 50px solid blue;
    background: white;
}
复制代码

JavaScript

1，什么是立即执行函数？使用立即执行函数的目的是什么？

常见两种方式
1.(function(){...})()
  (function(x){
      console.log(x);
  })(12345)
2.(function(){...}())
  (function(x){
      console.log(x);
  }(12345))
作用 不破坏污染全局的命名空间，若需要使用，将其用变量传入如
（function(window){...}(window)）

复制代码

2，async/await

ES7 提出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。 async 函数是 Generator 函数的语法糖。使用关键字 async 来表示，在函数内部使用 await 来表示异步。想较于 Generator，Async 函数的改进在于下面四点：

内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样；
更好的语义。async 和 await 相较于 * 和 yield 更加语义化；
更广的适用性。co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await命令后面则可以是 Promise 或者原始类型的值（Number，string，boolean，但这时等同于同步操作）；
返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator对象方便，可以直接使用 then() 方法进行调用。

下面是使用示例：

作用：异步代码的新方式
promise示例
const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}
async/await示例
const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

复制代码

HTTP

常见状态码

2开头（请求成功）表示成功处理了请求的状态代码

200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201 （已创建）请求成功并且服务器创建了新的资源。
202 （已接受）服务器已接受请求，但尚未处理。
203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容）服务器成功处理了请求，但没有返回任何内容。
205 （重置内容）服务器成功处理了请求，但没有返回任何内容。
206 （部分内容）服务器成功处理了部分 GET 请求。

3开头（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。

300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent)选择一项操作，或提供操作列表供请求者选择。
301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD请求的响应）时，会自动将请求者转到新位置。
302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求）服务器不理解请求的语法。
401 （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403 （禁止）服务器拒绝请求。
404 （未找到）服务器找不到请求的网页。
405 （方法禁用）禁用请求中指定的方法。
406 （不接受）无法使用请求的内容特性响应请求的网页。
407 （需要代理授权）此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时）服务器等候请求时发生超时。
409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
410 （已删除）如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型）请求的格式不受请求页面的支持。
416 （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值）服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误）服务器遇到错误，无法完成请求。
501 （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

GET 与POST区别

请求行，请求头，请求体详解

其中，1,2,3表示请求行，4请求体，5请求体。

webpack

打包体积

为了减小包的打包体积，可以从以下几个方面进行优化：

提取第三方库或通过引用外部文件的方式引入第三方库
代码压缩插件UglifyJsPlugin
服务器启用gzip压缩
按需加载资源文件 require.ensure
优化devtool中的source-map
剥离css文件，单独打包
去除不必要插件，通常就是开发环境与生产环境用同一套配置文件导致

打包效率

开发环境采用增量构建，启用热更新
开发环境不做无意义的工作如提取css计算文件hash等
配置devtool
选择合适的loader，个别loader开启cache 如babel-loader
第三方库采用引入方式
提取公共代码
优化构建时的搜索路径指明需要构建目录及不需要构建目录
模块化引入需要的部分

Loader

loader就是一个node模块，它输出了一个函数。当某种资源需要用这个loader转换时，这个函数会被调用。并且，这个函数可以通过提供给它的this上下文访问Loader API。

2018年前端面试总结

正文