【日常记录】期中考试

最新推荐文章于 2021-05-20 03:58:41 发布

番茄小火锅

最新推荐文章于 2021-05-20 03:58:41 发布

阅读量221

点赞数

分类专栏：前端笔试

本文链接：https://blog.csdn.net/qq_43062639/article/details/101563660

版权

前端笔试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

整理

请写出一个符合 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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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 xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
        <circle cx="50" cy="50" r="50" fill="orange" />
    </svg>
</body>
</html>

CSS3中圆角和阴影的设置方法

小例子

使用 CSS3中border-radius 属性，可以给元素制造圆角。
使用 CSS3中box-shadow属性，可以给元素制造阴影。
使用 CSS3中box-shadow属性，可以给元素制造阴影。

请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。
请说出至少三种排序的思路，这三种排序的时间复杂度分别为
O(n*n)
O(n log2 n)
O(n + max)

冒泡排序时间复杂度O(n*n)
思路：
1.比较相邻的元素，如果第一个数比第二个大就交换两个数的值。
2.针对每一对相邻的元素都做同样的工作，直到最后一对元素，这时最后的元素是最大的数。
3.下一次开始比较时，忽略最后一个元素
4.重复步骤1-3，直到排序完成。
归并排序时间复杂度O(n log2 n)
思路：
将待排序的元素划分为前后两个部分，将两部分元素分别排序，然后将这两个有序的数组归并为一个数组。不断地在子数组中划分子数组，直到每组只有个数字，然后向上合并。
计数排序时间复杂度O(n+max)
思路：
1.找出待排序数组中最大和最小的元素。
2.统计数组中每个值为i的元素出现的次数，存入辅助数组的第i项。
3.反向按数字出现的次数填充目标数组。

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
1.DNS解析
根据用户在地址栏输入的URL，如http://www.baidu.com 其中http为传输的协议，www.baidu.com为网络地址，指出需要的资源在哪台计算机上。一般网络地址可以为域名或IP地址，此处为域名。使用域名是为了方便记忆，但是为了让计算机理解这个地址还需要把它解析为IP地址。首先检查本地hosts文件是否有对应的ip地址，找到就返回响应的ip地址，找不到就请求dns服务器，直到找到域名对应的ip地址。
域名查找顺序：本地缓存-系统缓存-浏览器缓存-isp缓存-根域名服务器-主域名服务器
2.建立TCP连接
拿到ip地址后，浏览器根据这个ip地址和端口号构造一个TCP连接请求。TCP协议采取三次握手：发送端首先发送一个带SYN标志的数据包给接收端，接收端收到后回传一个带有SYN/ACK标志的数据包确认收到，最后发送端发送带ACK标志的数据包给接收端表示握手结束。
3.发起HTTP请求
建立了TCP连接后，发起HTTP请求。一个典型的HTTP请求头包含三个部分：
1. 请求方法路径协议/版本
2. 请求头(Request Header)
3. 请求正文
4.服务器处理请求并返回HTTP报文
HTTP响应报文由三部分组成: 状态码, 响应报头和响应报文。
5.请求成功返回响应的资源，浏览器渲染页面
渲染顺序
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
著名面试题：
如何实现数组去重？
假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。

//ES5
var array = [1, 5, 2, 3, 4, 2, 3, 1, 3, 4]

function unique(a) {
  var temp = {},
    res= [];
  for (var i = 0; i < a.length; i++) {
    if (!temp[a[i]]) {
      temp[a[i]] = 1;
      res.push(a[i]);
    }
  }
  console.log(res);
}
unique(array)
//ES6
console.log(Array.from(net Set(array)))

什么是闭包

什么是闭包

var x=1
function foo(){
   console.log(x)
}

在函数foo内部可以直接读取函数作用域外的全局变量x,这个函数和这个变量的环境总和，就是一个闭包。

闭包的用途
1.在函数外部访问其内部变量2. 让这些变量的值始终保持在内存中。

function foo(){
	var a=1
	function bar(){
		console.log(a)
	}
	return bar
}
var b=foo()
b()

bar()函数为一个闭包，在函数内部可以访问外部作用域的变量a,
因为bar()在使用，外部函数foo()的作用域没有被破坏，变量a始终保持在内存中。

apply call bind的用法是什么
apply,call和bind是Function对象才有的方法，它们都可以改变函数执行时this的指向。

核心理念（借用方法）
A对象有个方法，B对象因为某种原因也需要用到同样的方法，那么这时候是单独为 B 对象扩展一个方法，还是借用一下 A 对象的方法？
当然是借用 A 对象的方法，既能达到目的，又节省内存。
语法

fun.call(thisArg,param1,param2,...)
fun.apply(thisArg, [param1,param2,...])
fun.bind(thisArg, param1, param2, ...)

apply必须接收一个参数列表，而call和bind接受连续的参数

返回值
apply与call立即执行，返回值是函数执行的结果；
bind 返回函数的拷贝，并拥有指定的this值和初始参数。

下面结合例子进行说明使用方法

var a = {
  name: 'a',
  age: 22,
  myFun: function(fm, t) {
    console.log(this.name + "今年" + this.age + "岁，来自" + fm + "去往" + t);
  }
}
var b = {
  name: 'b',
  age: 16
}
a.myFun.call(b, '成都', '上海') //b今年16岁，来自成都，去往上海
a.myFun.apply(b, ['成都', '上海']) //b今年16岁，来自成都，去往上海
a.myFun.bind(b, '成都', '上海')() //b今年16岁，来自成都，去往上海

移动端是怎么做适配的？
em em这个单位所在元素对应的font-size的大小
rem 根元素html对应的font-size大小，页面默认一般为16px
1.设置meta标签

 <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
 // width=device-width: 让当前viewport宽度等于设备宽度
 // user-scalable=no: 禁止用户缩放
 // initial-scale=1.0: 设置页面的初始缩放值为不缩放
 // maximum-scale=1.0: 允许用户的最大缩放值为1.0
 // minimum-scale=1.0: 允许用户的最小缩放值为1.0

2.根据设备的不同，实现媒体查询

/*当body的宽度在0 ~ 600px的时候，背景红色*/
@media (max-width: 600px) { 
  body {
    background: red;
  }
}
/*当body的宽度超出800px的时候，背景粉色*/
@media (min-width: 600px) { 
  body {
    background: pink;
  }
}
/*当body的宽度在600px-800px之间时，背景绿色*/
@media (min-width: 376px ) and (max-width: 425px) {
  body {
      background: green;
  }
}

3.采用动态rem方案

使用JS动态调整REM

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

间接通过font-size使rem产生与页面宽度的关联

可以通过scss自动实现 px 转为rem

番茄小火锅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录