xx网络科技（深圳）前端开发面试

最新推荐文章于 2024-05-13 02:08:20 发布

焦杨2019

最新推荐文章于 2024-05-13 02:08:20 发布

阅读量400

点赞数

分类专栏：面试文章标签：面试

本文链接：https://blog.csdn.net/weixin_45344873/article/details/111245107

版权

面试专栏收录该内容

12 篇文章 0 订阅

订阅专栏

面试时间： 2020年12月15日晚上7.30点-9点
面试形式：视频面试（一面）

笔试题

请用纯CSS两种方法写效果 “左列定宽200px，右列自适应“

<div id='box'>
	<div id='left'></div>
	<div id='right'></div>
</div>

#left, #right {
	height: 200px;
}
#left{
	float: left;
	width: 200px;
}
#right{
	margin-left: 200px;
}

<div id='box'>
	<div id='left'></div>
	<div id='right'></div>
</div>

#box {
	display: flex;
}
#left{
	width: 200px;
}
#right{
	flex: 1
}

实现斐波那契数列，并设置缓存

var cache = []
function fb(n){
	if(!!cache[n]){ //从缓存中获取数据
		return cache[n]; // 如果缓存有值，直接返回缓存数据
	}
	if(n = 1){ //如果缓存没值，直接进行计算
		cache[n] = 0;
		return 0; //结果存放缓存中
	} else if(n = 2){
		cache[n] = 1; //结果存放缓存中
		return 1;
	} 
	var temp = fb(n-1) + fb(n-2);
	cache[n] = temp; //结果存放缓存中
	return temp;
}

了解闭包吗？函数A返回了一个函数B，并且函数B中使用了函数A的变量，函数B就被称为闭包
请用闭包实现以上函数

function(){
	var arr = [0, 1];
	var func = function(n){
		var res = arr[n];
		if(typeof arr[n] !== 'number'){
			arr[n] = func(n-1) + func(n-2)
			res = arr[n]
		}
		return res;
	}
	return func
}()

实现括号匹配
思路：利用栈的先进后出的特点，将栈作为一个容器
事先声明一个可以建立左右括号对应关系的对象（key为左括号，value为右括号）
使用for of遍历字符串，如果遍历的是左括号，就直接push入栈，如果是有括号，将先前入栈的取出来，与当前遍历的元素进行对比，如果不匹配return false；如果左右括号都不是，就终止此次循环continue
最后判断传入的字符串是否合法，等价于栈的长度是否为0

function isValid(str) {
    // 以左右括号来建立一个对象，key为左括号，value为右括号
    let obj = {
      "(": ")",
    };
    //实例化一个栈
    let arr = [];
    //遍历str字符串
    for (let s of str) {
      if (obj[s]) {
        arr.push(s); //是左括号，入栈
      } else if (Object.values(obj).includes(s)) {
        // 右括号  将当前的元素和栈顶的第一个元素进行匹配
        let top = arr.pop();
        if (s !== obj[top]) return false;
      } else {
        //这里排除的是空字符的情况，如果不是左右括号而是其他的空字符串或者非法字符的话，将终止本次循环，执行下一次循环
        continue;
      }
    }
    //遍历完成之后要保证栈内要为空
    return arr.length === 0;
  }

从输入URL到页面呈现发生了什么？
一网络请求：
1.1 构建请求：浏览器会构建请求行（请求方法，请求路径，请求协议版本）
1.2 查找强缓存：先查找强缓存，如果命中，直接使用，否则进行下一步。
1.3 DNS解析：
由于我们输入的是域名，数据包是通过地址传递给对方的。因此我们需要得到这个域名对应的IP地址。DNS域名解析系统（域名和IP一一映射）；浏览器提供了DBS缓存功能，如果一个域名已经解析过，会把解析的结果缓存下来，下次处理直接拿走，不需要经过DNS解析(不指定端口，默认采用IP地址的80端口)
1.4 建立TCP连接：
Chrom在同一域名下要求有同时最多6个TCP连接，超过6个的话，剩下的请求就得等待。
TCP面向连接，可靠的，基于字节流的传输层通讯协议。
建立TCP连接经历下面三个阶段
通过三次握手（总共发送三个数据包确认已经建立连接）建立客户端和服务器端之间的连接；
进行数据传输，重要机制：接收方接受到数据包后必须要向发送方确认，如果发送方没有接到这个确认消息，就判断为数据包丢失，并重新发送该数据包。优化策略：大的数据包拆成一个个小包，一次传输到接收方，接收方按照小包的顺序，把他们组装成完整数据包。
断开连接的阶段。数据传输完成，现在要断开连接了，通过四次挥手来断开连接
TCP保证数据传输的可靠性：三次握手确认连接，数据包校验保证数据到达接收方，四次挥手断开连接。
1.5 发送HTTP请求
TCP建立完成，浏览器可以和服务器进行通讯，即发送HTTP请求。
HTTP请求携带：请求行（请求方法，请求路径，请求协议版本），请求头，请求体。
网络相应：相应行（HTTP协议版本，状态码，状态描述），相应头，相应体。
判断Connect字段，如果请求头或者相应头中包含Connect：keep-alive，表示建立了持久连接，TCP连接会一直保持，之后请求会复用这个资源。
否则断开TCP连接，请求-相应流程结束。
二解析算法
完成了网络请求和相应，接下来就是浏览器的解析和渲染工作
2.1 构建DOM树

2.2 样式计算
CSS样式来源：link标签引入，style标签中的样式，元素内嵌style属性
2.3 生成布局树
生成DOM树和DOM样式后，要做的是通过浏览器的布局系统确定元素的位置，生成一个布局树
注意：布局树包含了可见元素，对于head标签和display none的元素，不会放入其中。

问答题

说下http缓存
简答：
强缓存：expires和cache-control；
协商缓存：
last-modified和if-modified-since; Etag和If-none-match
详解：
强缓存：不会向服务器发送请求，直接从缓存中读取资源

对比	expires	cache-control
出现时间	http 1.0	http 1.1
时间格式	GMT	单位秒
优先级	较低	较高
缺点	受限于本地时间，可以通过修改本地时间使其失效	兼容性较差
优点	兼容性好	不受限于本地时间修改
其他		除去设置过期时间，还可以设置其他的比如no-store 所有内容不会被缓存；no-cache 根据协商缓存是否需要缓存客户端；public 所有内容都将被缓存包括客户端和代理服务器；private所有内容只有可以客户端缓存

协商缓存：协商缓存生效时，返回304 未修改；协商缓存失效时，浏览器携带缓存标志向服务器发起请求，由服务器决定是否需要使用缓存

对比	last-modified和if-modified-since	Etag和If-none-match
概念	资源在服务器上最后修改时间	表示资源的唯一标志
优先级	较低	较高
性能	较高（只记录时间）	较低（服务器通过算法计算出一个hash值）
精确度	较低（单位是秒，单位秒内修改，体现不出来）	较高（文件发生改变，标志就会改变）

异步请求方法
Promise ， async/await
Promise：
对象状态不受外部影响，有三种状态，pending进行中，resolved已成功，rejected已失败。只有异步操作的结果才能决定是哪种状态
一旦状态改变，就不会在变，状态改变只有两种： pending到resolved，pending到rejected
async/await：
async是generator函数的语法糖
await后面接一个promise返回并执行（await放在try catch中接受promise的rejected状态）
优点：方便级联调用，同步代码编写方式
前端性能优化
降低请求量：合并资源，减少HTTP请求数，minify/gzip压缩
加快请求速度：预解析DNS，CDN分发
缓存：HTTP协议缓存请求，离线数据存储localStorage
渲染：JS/CSS优化，加载顺序，服务器端渲染
event loop流程？微任务和宏任务
执行顺序：
一开始整个脚本作为一个宏任务执行
执行过程中，同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
当前宏任务执行完出队，检查微任务列表，有则依次执行，知道全部执行完
执行浏览器UI渲染的线程工作
检查是否有web work，有则执行
执行完本轮的宏任务，回到2，依次执行，直到宏任务和微任务队列为空
微任务：Promise.then,
宏任务：script, settimeout, setinterval, setimdiate,I/O, UI render
Node 与浏览器的 Event Loop 差异
微任务队列的执行时机不同：
浏览器端：微任务在事件循环的宏任务执行完之后执行
node端：微任务在事件循环的各个阶段之间执行
图片优化方式
图片懒加载：在页面未可见区域，添加一个滚动条事件，判断图片位置和浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载
如果为幻灯片还是相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
如果图片为CSS图片，可以使用css雪碧图，svg雪碧图，base64等技术
如果图片过大，可以使用特殊编码格式的图片，加载时会先加载一张压缩的缩略图，以提高用户体验
如果图片展示区域小于图片真实大小，先进行图片压缩，压缩到和展示区域一样大小
XSS攻击
浏览器中执行恶意脚本，拿到用户信息进行操作：窃取cookie；监听用户行为
三种方式：存储型，反射型，文档型
防范措施：对输入内容进行转码或者过滤；利用白名单，利用cookie的httponlys属性
CSRF攻击
跨站请求伪造，黑客诱导用户点击连接，打开黑客网站，黑客利用用户目前的登录状态发起跨站请求
三种方式：自动get请求；自动post请求；诱导点击发送get请求
防范措施：利用cookie的samesite，验证来源站点，增加token
script标签的async和defer区别