Grit的前端之路

知识总结

2019-03-11  本文已影响0人  Grit0821
  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">
  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 
 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

 @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

me.sayHello.call(someone, 24) // hello, I am someone 24 years old

me.sayHello.apply(someone, [24]) // hello, I am someone 24 years old

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种类型：

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. 请说出至少三种排序的思路，这三种排序的时间复杂度分别为
  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));
上一篇下一篇

猜你喜欢

热点阅读