每日3+3前端面试题（2020.12.22）

古城微笑少年丶 2021-07-24 20:08 287阅读 0赞

# HTML #

## 切页面时，每次都动手刷新看效果很麻烦，如果要让你写一个实时刷新预览的工具你该怎么写 ##

window.onfocus = function() { 
    	window.location.reload();
    }

# CSS #

## background-repeat的新属性值：round和space的作用是 ##

space：图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间  
round：随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]

# JS #

## 1.为什么要用纯函数 ##

函数式编程  
函数的功能单一，比较好维护和重构而不会产生什么副作用

## 2.使用js实现一个图片剪裁的功能 ##

/** * 裁切图片 * @param imgUrl 原始图片路径 * @param x,y,width,height 从点[x, y]开始，将宽度width,高度height的区域裁切下来 * tips：需要运行于服务器环境下切图片为同域 */
    function clipImage(imgUrl, x, y, width, height) { 
        return new Promise((resolve, reject) => { 
            let cvs = document.createElement("canvas");
            cvs.width = width;
            cvs.height = height;
    
            var ctx = cvs.getContext('2d');
            let _img = new Image();
    		_img.setAttribute('crossOrigin', 'anonymous'); // 设置了CORS跨域配置，Access-Control-Allow-Origin
            _img.src = imgUrl;
            _img.onload = () => { 
                ctx.drawImage(_img, 0 - x, 0 - y);
                resolve(cvs.toDataURL());
            }
        })
    }
    
    clipImage("https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg", 150, 100, 400, 400).then(res => { 
        let __img = document.createElement("img");
        __img.src = res;
        document.body.appendChild(__img);
    })

# Vue #

## watch的属性用箭头函数定义结果会怎么样？ ##

拿不到this的vue实例是undefined

## 在vue事件中传入$event，使用e.target和e.currentTarget有什么区别 ##

e.currentTarget指向事件所绑定的元素，而e.target始终指向事件发生时的元素。  
**e.target经常是用来做事件委托**

# 网络 #

## TCP和UDP分别对应的常见应用层协议 ##

1). TCP对应的应用层协议

FTP：定义了文件传输协议，使用21端口。常说某某计算机开了FTP服务便是启动了文件传输服务。下载文件，上传主页，都要用到FTP服务。

Telnet：它是一种用于远程登陆的端口，用户可以以自己的身份远程连接到计算机上，通过这种端口可以提供一种基于DOS模式下的通信服务。如以前的BBS是-纯字符界面的，支持BBS的服务器将23端口打开，对外提供服务。

SMTP：定义了简单邮件传送协议，现在很多邮件服务器都用的是这个协议，用于发送邮件。如常见的免费邮件服务中用的就是这个邮件服务端口，所以在电子邮件设置-中常看到有这么SMTP端口设置这个栏，服务器开放的是25号端口。

POP3：它是和SMTP对应，POP3用于接收邮件。通常情况下，POP3协议所用的是110端口。也是说，只要你有相应的使用POP3协议的程序（例如Fo-xmail或Outlook），就可以不以Web方式登陆进邮箱界面，直接用邮件程序就可以收到邮件（如是163邮箱就没有必要先进入网易网站，再进入自己的邮-箱来收信）。

HTTP：从Web服务器传输超文本到本地浏览器的传送协议。

2). UDP对应的应用层协议

DNS：用于域名解析服务，将域名地址转换为IP地址。DNS用的是53号端口。

SNMP：简单网络管理协议，使用161号端口，是用来管理网络设备的。由于网络设备很多，无连接的服务就体现出其优势。

TFTP(Trival File Transfer Protocal)：简单文件传输协议，该协议在熟知端口69上使用UDP服务。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]

# NodeJs #

## pm2的cluster和fork两种模块有什么区别？如何选择? ##

fork模式，单实例多进程，常用于多语言混编，比如php、python等，不支持端口复用，需要自己做应用的端口分配和负载均衡的子进程业务代码。  
缺点就是单服务器实例容易由于异常会导致服务器实例崩溃。

cluster模式，多实例多进程，但是只支持node，端口可以复用，不需要额外的端口配置，0代码实现负载均衡。  
优点就是由于多实例机制，可以保证服务器的容错性，就算出现异常也不会使多个服务器实例同时崩溃。

共同点，由于都是多进程，都需要消息机制或数据持久化来实现数据共享。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: /images/20210724/8cdffe211a6d452cb5600bb939f0c65b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]: /images/20210724/32ce8c1fd752485b87cee038c4ce4cf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]: /images/20210724/8fa507b7542e4a4d8a65e9b8a0cc1a23.png

每日3+3前端面试题（2020.12.22）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读