饥人谷技术博客

初级前端需要知道的基础知识

2018-07-18  本文已影响21人  EnochQin

前言：本文会罗列出十道比较基础的题目，我个人作为刚入门的初级前端，写这篇文章正好可以总结汇总一下近期的知识，看到这篇文章的朋友也可以看看这十道题你是否都能正确的、完整的答出来。我个人会总结出答案放于文后，欢迎讨论。

题目详情：

1、请写出一个符合 W3C 规范的 HTML 文件，要求如下：

  1. 页面标题为「我的页面」
  2. 页面中引入了一个外部 CSS 文件，文件路径为 /style.css
  3. 页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效
  4. 页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效
  5. 页面中引入了一个外部 JS 文件，路径为 /main.js
  6. 页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
  7. 页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意
  8. 注意题目中的路径

2、 移动端是怎么做适配的？

注：回答要点：

  1. meta viewport
  2. 媒体查询
  3. 动态 rem 方案

3、用过CSS3吗? 实现圆角矩形和阴影怎么做?

4、什么是闭包，闭包的用途是什么？

5、函数中call、apply、bind 的用法分别是什么？

6、请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。

7、请写出一个 HTTP post 请求的内容，包括四部分。

其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path

8、请说出至少三种排序的思路，这三种排序的时间复杂度分别为

  1. O(n*n)
  2. O(n log2 n)
  3. O(n + max)

9、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

10、如何实现数组去重？

假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。

要求：

  1. 不要做多重循环，只能遍历一次
  2. 请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）

参考答案

注：答案为我个人总结而得，仅供参考，欢迎讨论。

No.1 HTML基本格式 & 媒体查询 & <svg> & 文件编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的页面</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./print.css" media="print">
    <link rel="stylesheet" href="./mobile.css" media="(max-width:500px)">
</head>
<body>
    <svg>
        <circle cx="50" cy="50" r="50" fill="red"/>
    </svg>
    <script src="./main.js"></script>
    <script src="./gbk.js" charset="gbk"></script>
</body>
</html>

No.2 移动端适配：meta viewport & 媒体查询 & 动态rem

关于meta viewport 和 媒体查询详情可参考这篇博客
关于动态rem详情可参考这篇博客

移动端的适配有以下要点：

<style>
  @media (max-width: 600px) {
     ……
  }
</style>

var pageWidth = window.innerWidth
 document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')

让1rem=0.1设备宽度，然后所有的css宽高使用rem为单位即可。
使用scss可以自动让px转化为rem：

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。

No.3 CSS3 ＆ 圆角矩形 ＆ 阴影

No.4 闭包

function foo(){
  var local = 1
  function bar(){
    local++
    return local
  }
  return bar
}

var func = foo()
func()

上述代码中，变量local和函数bar合称为闭包，即在函数bar中使用了函数外定义的变量local。

!function(){

  var lives = 50

  window.addLives = function(){
    lives += 1
  }

  window.reduceLives = function(){
    lives -= 1
  }

}()

上述代码中，变量lives为局部变量，该立即函数的外面是无法直接访问该变量的，在该立即执行函数内部，声明了addLives函数和reduceLives函数，由此我们可以在函数外部通过调用这两个函数来间接地调用lives这个变量。这就是闭包的意义所在。

总结：闭包的用处：

  1. 可以间接调用函数内部的局部变量。
  2. 可以让这些变量的值始终保持在内存中。
  3. 可以暂存数据,给变量开辟私密空间,避免外部污染

No.5 call & apply & bind 的用法

参考博客

在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

举例说明：

var obj = {
    x: 81,
};
 
var foo = {
    getX: function() {
        return this.x;
    }
}
 
console.log(foo.getX.bind(obj)());  //81
console.log(foo.getX.call(obj));    //81
console.log(foo.getX.apply(obj));   //81

// 三个输出的都是81，但是注意看使用 bind() 方法的，他后面多了对括号。
//也就是说，区别是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。

No.6 HTTP 状态码

HTTP状态码 维基百科
一篇更形象的介绍状态码的博客

下面列举一些比较常见的状态码

2XX：表示成功

3XX：重定向

4XX：客户端错误

5XX：服务器错误

No.7 HTTP post 请求

具体格式，参照博客
参考答案：

POST /path HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.54.0
Accept: */*
Content-Length: 10
Content-Type: application/x-www-form-urlencoded

username=ff&password=123

注意：第二部分一般都要有Host、Content-Length、Content-Type

No.8 排序算法

排序算法维基百科 ，很多前端对算法的了解都很浅，但在面试中大多时候都会考察一些算法的知识，所以最基本的排序算法我们还是应该大致了解一下的。下面大概提几个常见的排序算法思路。注：这个网站提供了常见排序算法的动态展示效果。

No.9 一个页面从输入 URL 到加载显示完成，这个过程中都发生了什么

这是一道很经典的前端面试题，网上有各种各样的资料，总体来说这一题是考察你的知识边界，这里只大概的说一下相关的过程（不够全面）。
参考博客：这篇博客写的非常全面，从敲击键盘开始讲起，包含了很多硬件知识以及操作系统、内存等，我本人目前知识有限，无法介绍的那么详细，有兴趣的可以点击上面的链接查看。

总体来说分为以下几个过程:

  1. DNS解析：
    DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。它实际上充当了一个翻译的角色，实现了网址到IP地址的转换。
  2. TCP连接：
    知道了服务器的 IP 地址，下面便开始与服务器建立连接了。
    通俗地讲，通信连接的建立需要经历以下三个过程：
    （1）主机向服务器发送一个建立连接的请求（您好，我想认识您）；
    （2）服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
    （3）主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。
  3. 发送HTTP请求
    发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。
    数据经过应用层、传输层、网络层、数据链路层、物理层逐层封装，传输到下一个目的地。其中每一层的作用如下：
    （5）应用层：为应用进程提供服务，加应用层首部封装为协议数据单元。
    （4）传输层：实现端到端通信，加TCP首部封装为数据包，TCP控制了数据包的发送序列的产生，不断的调整发送序列，实现流控和数据完整。
    （3）网络层：转发分组并选择路由；加IP首部封装为IP分组。
    （2）数据链路层：相邻的节点间的数据传输；加首部[mac地址]和尾部封装为帧。
    （1）物理层：具体物理媒介中的数据传送，数据转换为比特流。
    下一个目的地接受到数据后，从物理层得到数据然后经过逐层的解包 到 链路层 到 网络层，然后开始上述的处理，在经网络层 链路层 物理层将数据封装好继续传往下一个地址。
    到达最终目的地，再经过5层结构，逐层剥离，最终将数据送到目的主机的目的端口。
  4. 服务器处理请求并返回HTTP报文：
    后端从在固定的端口接收到TCP报文开始，这一部分对应于编程语言中的socket。它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。这一部分工作一般是由Web服务器去进行。
    HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。
  5. 浏览器解析渲染页面：
    浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。
  6. 连接结束：
    （1）主机向服务器发送一个断开连接的请求（不早了，我该走了）；
    （2）服务器接到请求后发送确认收到请求的信号（知道了）；
    （3）服务器向主机发送断开通知（我也该走了）；
    （4）主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接；

No.10 数组去重

ES5写法1：

function unique(array){
  let tempArray = []
  let hash = {}
  for(let i = 0;i<array.length;i++){
     if(hash[array[i]] === undefined){
       tempArray.push(array[i])
       hash[array[i]] = true
     }
  }
  return tempArray
}

ES5写法2：当数组中出现数字3 和字符串 '3'时，第一种写法会将其当成同一个值返回，而第二种写法可以判断数字3 和字符串 '3'的不同。

function uniqueCom(array) {
  let hash = {}
  let tempArray = []
  array.forEach(function(value) {
    let key = (typeof value) + value;
    if (!hash[key]) {
      hash[key] = true
      tempArray.push(value)
    }
  })
  return tempArray
}

ES6写法：使用Set对象，MDN文档
注：用...(展开操作符)操作符将Set转换为Array

function unique6(array){
  return [...new Set(array)]
}
上一篇 下一篇

猜你喜欢

热点阅读