阶段小结

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="/style.css">
  <link rel="stylesheet" href="/print.css" media_type="print">
  <link rel="stylesheet" href="/mobile.css" media="(max-width: 500px)">
</head>
<body>
  <p>一个直径为100像素的圆</p>
  <svg>
    <circle cx="100" cy="100" r="50" fill='green'>
  </svg>

  <script src='/main.js'></script>
  <script src='/gbk.js' charset='GBK'></script>
</body>
</html>

二、2016年腾讯前端面试题：
移动端是怎么做适配的？

一、首先要有设计图，只有先确定了页面，才能开始写代码。

二、使用meta viewport:
在head中添加这个meta:（编辑器中可简写为meta:vp）

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

目的是为了移动端不再默认缩放，1:1显示网页内容。

三、使用媒体查询：
1、根据需求做出对应的几套样式，用media划分在不同的像素宽度范围内使用。

//举例代码如下
<style>
    @media (max-width:320px){
      body{
          background:red;
        }
    }
     @media (min-width: 321px) and (max-width:375px){
      body{
          background:orange;
        }
    }
    @media (min-width: 376px) and (max-width:425px){
      body{
          background:blue;
        }
    }
</style>

需要注意覆盖问题，可以设置优先级或者将范围精准。
2、media也可以在外部css中使用，不同条件分别对应不同外部css。

四、使用动态REM：（手机专用的自适应方案）
1、REM的概念：root em，根元素html的font-size。
2、REM方案的思路是：整体缩放，一切单位以宽度为基准，高度和宽度一起缩放。rem与设备宽度无关，vw有关但兼容性较差，于是用rem模拟vw来实现自适应。

<html>font-size = 1rem = 1/10 pageWidth ==> 1rem = 1/10 vw

ps: rem 可与其他单位混用，比如特别小的长度可用px。
3、用sass实现px自动转换为rem：

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 640; //根据设计稿的宽度来设置具体值
.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

三、2017年腾讯前端实习面试题（二面）：
用过CSS3吗? 实现圆角矩形和阴影怎么做?

一、圆角是css3新支持的功能：
1、border-radius:只需设置一个属性，为这个属性提供一个值，就能同时设置四个圆角的半径。所有CSS度量值都可以使用：em、ex、pt、px、百分比等等。
2、

border-radius: 1em;

/* 等价于： */

border-top-left-radius:     1em;
border-top-right-radius:    1em;
border-bottom-right-radius: 1em;
border-bottom-left-radius:  1em;

二、box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性让你可以对几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。

对象选择器 {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色，建议不要省略此参数。

四、出处同上（一面二面都问了）：
什么是闭包，闭包的用途是什么？

1.什么是闭包
闭包就是函数内部访问函数作用域外的局部变量，这个变量和这个函数的总和就叫闭包
eg：

var a = 1
function fn(){
    console.log(a)
}

闭包是 JS 函数作用域的副产品。
换句话说，正是由于 JS 的函数内部可以使用函数外部的变量，所以这段代码正好符合了闭包的定义。而不是 JS 故意要使用闭包。

2.闭包的用途
闭包最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
eg：

function foo() {
    var a = 2

    function bar() {
        console.log(a)
    }

    return bar
}

var zen = foo()
zen()           // 2

这个bar函数和变量a就是一个闭包，它可以访问foo词法作用域里的a，而且因为bar()还在使用，所以foo()的整个内部作用域不会被销毁。

五、出处同上：

call、apply、bind 的用法分别是什么？

call() 方法调用一个函数，其具有一个指定的this值和分别地提供的参数(参数的列表)。
apply() 方法调用一个函数，其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。
bind()方法创建一个新的函数，被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列
举例：

var name = "window"
function foo(n, m) {
    console.log(this.name)
    if(n > m) {
        console.log(`${n} > ${m}`)
    }
}

var bar = {
    name: "bar"
}

var bindObj = {
    name: "bindObj"
}

foo.call(bar, 5, 2)         // bar, 5 > 2
foo.apply(window, [7, 1])   // window, 7 > 1

var bindFunc = foo.bind(bindObj, 36, 3)
bindFunc()          // bindObj, 36 > 3

六、出处同上：
请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。

状态码200表示响应成功
状态码204表示无资源返回但请求成功
状态码206表示范围资源，表示客户端范围请求
状态码301表示永久性重定向，资源URI已更新
状态码302表示临时性重定向，本次使用新URI
状态码400表示请求错误，请求报文中存在语法错误
状态码403表示禁止请求，请求被服务器拒绝
状态码404表示无资源，服务器上无法找到请求的资源
状态码500表示服务器错误，服务器端在执行请求时发生错误
状态码503表示无服务，服务器处于超负荷或正在停机维护，无法处理请求

七、出处同上：
请写出一个 HTTP post 请求的内容，包括四部分。
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path

1 POST /path HTTP/1.1
2 Host: passport.baidu.com
2 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.62 Safari/537.36
2Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8
2 Content-Length: 24
2 Content-Type: application/x-www-form-urlencoded
3
4 username=ff&password=123

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

O(n*n)
O(n log2 n)
O(n + max)

O(n*n) 冒泡排序：遍历整个数组，从头比较相邻两个元素，将小的排在前面，大的排后面，依次到最后可以得到当前最大的元素，继续遍历除了已经排序到最后的最大值，直至排序完成。
O(n log2 n) 快速排序：以第一个元素为基准，比基准小的排左边，比基准大的排右边，再以该元素左边和右边的第一个元素为基准，重复以上的操作，直到只有一个数字排序为止。
O(n + max) 基数排序：创建10个桶，给每个数位（0到9），从个位数开始遍历数列中的每个元素的数位，把每个元素按照队列排列到对应数位的桶中，再从队列中恢复至数列，再遍历十位数，重复以上操作，直到遍历到最大元素的位数。

九、著名前端面试题：
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

输入 URL后浏览器开启一个线程来处理这个请求，对URL判断如果是http协议就按照web方式处理；
浏览器先依次查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容（此时没有向服务端发请求）。若没有，则进行下一步操作（后面需要向服务端发送请求）；
通过DNS解析获取网址的IP地址;
向真实IP地址服务器发起tcp连接，与浏览器建立tcp三次握手。
握手成功后，进行HTTP协议会话，浏览器发送报头(请求报头);
进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
处理结束回馈报头，将数据返回至浏览器;
浏览器开始下载html文档(响应报头，状态码200)，同时设置缓存;
之后浏览器对整个 HTML 结构进行解析，形成 DOM 树；与此同时，它还需要对相应的 CSS 文件进行解析，形成 CSS 树（CSSOM）；接下来，需要结合 DOM + CSSOM，形成一个绘制树（Render Tree）;
得到绘制树之后，需要计算每个结点在页面中的位置，这一个过程称为layout；
layout的过程是在一个连续的二维平面上进行的，接下来，需要将这些结果栅格化，映射到屏幕的离散二维平面上，这一过程称为 paint ; 现代浏览器为提升性能，将页面划分多个 layer，各自进行 paint 然后组合成一个页面（composite layers）。

十、著名面试题：
如何实现数组去重？
假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。

要求：

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

ES 5:

function unique(array) {
    var tempArr = []
    var hash = {}
    for(var i = 0; i < array.length; i++) {
        if(hash[array[i]] === undefined) {
            tempArr.push(array[i])
            hash[array[i]] = 1
        }
    }
    return tempArr
}

ES6：

function unique(array) {
    return [...new Set(array)]
}

posted @ 2018-08-16 11:23 captainxue 阅读(80) 评论(0) 收藏举报

刷新页面返回顶部