知识总结

  1. 请写出一个符合 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>我的页面</title>
  <link rel="stylesheet" href="./stlyle.css">
  <link rel="stylesheet" href="./print.css" media="print">
  <link rel="stylesheet" href="./mobile.css" media="(max-width:500px)">
</head>
<body>
  <svg>
    <circle cx="60" cy="60" r="50"  stroke="red" fill="transparent" stroke-width="5"/>
  </svg>
</body>
<script src="./main.js"></script>
<script src="./jbk.js" charset="GBK"></script>
</html>
  1. 移动端是怎么做适配的？
    回答要点：
  1. meta viewport
  2. 媒体查询
  3. 动态 rem 方案

答：

  1. meta viewpoint
    一个典型的针对移动端优化的站点包含类似下面的内容:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • width属性控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为
    device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。（相应有height及
    device-height属性，可能对包含基于视口高度调整大小及位置的元素的页面有用。）
  • initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及
    user-scalable属性控制允许用户以怎样的方式放大或缩小页面。
  1. 媒体查询
    媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>
  1. 动态rem方案
    rem：即root em，表示根元素的font-size，根元素一般指<html></html>
    动态REM主要利用了rem = html:font-size = viewportWidth
  • 在css中我们无法获取当前设备的宽度，所以需要在JS中需要写：
 var pageWidth = window.innerWidth
 document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')

即让<html></html>的font-size = 设备宽度*0.1，即 1 rem = 0.1 pageWidth

  • 使用SCSS可以写个函数，方便的将设计稿里的尺寸单位px直接转换成rem相应的值
 @function px( $px ){
    @return $px/$designWidth*10 + rem;
 //以实际像素值➗当前页面宽度✖️rem的转换率  再加rem的后缀(字符串)
}
$designWidth : 640; // 640 是设计稿的宽度
  1. 用过CSS3吗? 实现圆角矩形和阴影怎么做?
    答：
  1. 圆角矩形
    border-radiu:3px;
  2. 阴影
    box-shadow使用一个或多个投影，如果使用多个投影时必须需要用逗号,分开。

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

  1. 什么是闭包，闭包的用途是什么？
    答：
  1. 什么是闭包
function foo(){
  var local = 1
  function bar(){
    local++
    return local
  }
  return bar
}

var func = foo()
func()

函数和函数内部能访问到的变量（也叫环境）的总和，就是一个闭包，local 变量和 bar 函数就组
成了一个闭包。

  1. 闭包的用途
    闭包常常用来间接访问一个变量。换句话说，隐藏一个变量。
    闭包可以暂存数据,给变量开辟私密空间,避免外部污染,在一个函数作用域中声明一个变量,子
    函数(访问器)可以操作这个变量,通过return 这个子函数(访问器),
    外面可以访问这一个变量,来达到此目的,外面变量通过得到return的函数,这样外面访问这个函
    数,这个函数访问父级函数的变量。
        function s(){
            var i = 0;
            return function(){
                return ++i;
            }
        }
        var a = s()
        console.log(a())
  1. call、apply、bind 的用法分别是什么？
    答：
  • 函数调用普通写法：
let me = {
        name: "me",
        sayHello: function (age) {
                console.log("hello, I am", this.name + " " + age + " " + "years old")
        }
    }
 let someone = {
     name: "someone",
 }
me.sayHello(24) // hello, I am me 24 years old
  • call：call 是函数的正常调用方式，并指定上下文 this。
me.sayHello.call(someone, 24) // hello, I am someone 24 years old
  • apply：apply 的作用和 call 一样，只是在调用的时候，传参数的方式不同。区别是 apply 接受的是数组参数，call 接受的是连续参数。如下代码：
me.sayHello.apply(someone, [24]) // hello, I am someone 24 years old
  • bind：bind方法与call、apply最大的不同就是前者返回一个绑定上下文的函数，而后两者是直接执行了函数，bind 不会立即调用，它会生成一个新的函数，你想什么时候调就什么时候调。bind方法传递给调用函数的参数可以逐个列出，也可以写在数组中。
me.sayHello.bind(someone, 24)() // hello, I am someone 24 years old
me.sayHello.bind(someone, ([24])() // hello, I am someone 24 years old
  1. 请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。
    答：
    HTTP状态码共分为5种类型：
  • 1**： 信息，服务器收到请求，需要请求者继续执行操作
  • 2**： 成功，操作被成功接收并处理
  • 3**：重定向，需要进一步的操作以完成请求
  • 4**：客户端错误，请求包含语法错误或无法完成请求
  • 5**： 服务器错误，服务器在处理请求的过程中发生了错误

100：继续。客户端应继续其请求
200：请求成功。一般用于GET与POST请求
201：已创建。成功请求并创建了新的资源
202：已接受。已经接受请求，但未处理完成
301：永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
305：使用代理。所请求的资源必须通过代理访问
400：客户端请求的语法错误，服务器无法理解
404：服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

  1. 请写出一个 HTTP post 请求的内容，包括四部分。
    其中
    第四部分的内容是 username=ff&password=123
    第二部分必须含有 Content-Type 字段
    请求的路径为 /path
    答：
POST /path HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.54.0
Accept: */*
Content-Length: 24
Content-Type: application/x-www-form-urlencoded

username=ff&password=123
  1. 请说出至少三种排序的思路，这三种排序的时间复杂度分别为
  • O(n*n)
  • O(n log2 n)
  • O(n + max)
    答：
  • 冒泡排序:每次比较两个相邻的数字,小数放前面,大数放后面,这样一轮下来小的数字就拍在了前面（大的数字位置在后面确定）,如此重复,直到所有的数字排完
  • 快速排序:选择一个数作为”基准”。小于”基准”的元素，移到”基准”的左边；大于”基准”的元素，移到”基准”的右边。
    对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
  • 计数排序:将所有待比较数值（正整数）统一为同样的数位长度，数位较短的数前面补零。然后，从最低位开始，依次进行一次排序。
  1. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
    答：
  1. DNS域名解析
    地址栏输入的域名不是资源所在的真实位置，域名只是IP地址的一个映射，域名解析的过程
    实际是将域名还原为IP地址的过程。DNS域名解析有两种方法，分别是迭代查询和递归查询。
  2. TCP连接
    通过DNS域名解析后，获取到了服务器的IP地址，便会开始建立一次连接，主要通过TCP三次握手
    进行连接。
    三次握手图片
  3. HTTP请求
    在确认与服务器建立连接后，便会发送一个HTTP请求，HTTP请求的报文主要包括请求行，
    请求头，请求正文。
  4. 处理请求返回HTTP响应
    服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，
    并通过不同的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，
    响应头，响应报文三个部分。
  5. 页面渲染
  • 浏览器会解析HTML/SVG/XHTML产生一个DOM Tree，解析CSS产生CSS规则树，
    解析Javascript，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree。
  • 解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。
  • 最后通过调用操作系统Native GUI的API绘制。
  1. 关闭连接
    在页面元素传输完成后，会选择关闭连接，此时用到的是TCP四次挥手
    四次握手图片
  1. 如何实现数组去重？
    假设有数组 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 对象）
答：
1.indexOf

var array = [1,5,2,3,4,2,3,1,3,4];
function unique(array) {
    var res = [];//存储数组
    for (var i = 0, len = array.length; i < len; i++) {
        var current = array[i];
        if (res.indexOf(current) === -1) { //确定res里面没有该值
            res.push(current)
        }
    }
    return res;
}

console.log(unique(array));

2.利用空哈希存储到键值

function unique(array) {
  var res = [];
  var json = {};
  for(var i = 0; i <array.length; i++) {
    if(!json[array[i]]) {
      res.push(array[i]);
      json[array[i]] = 1;
    }
  }
  return res;
}
var arr = [1,5,2,3,4,2,3,1,3,4];
console.log(unique(arr));

3.ES6 Set 对象

var array = [1,5,2,3,4,2,3,1,3,4];

function unique(array) {
   return Array.from(new Set(array)); //或者return ([...new Set(array)])
   //用Array.from()或者...(展开操作符)将Set对象转换为Array
}

console.log(unique(array));
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,969评论 1赞 45
  • 2018-02-08
    前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 4,193评论 0赞 3
  • 面试题
    前端开发面试题 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。 题目类型： 理论知...
    怡宝丶阅读 7,378评论 0赞 7
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1赞 92
  • 面试问题答案综合版(web)
    $HTML， HTTP，web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
    Hebborn_hb阅读 10,088评论 0赞 20