面试总结

最新推荐文章于 2023-03-07 00:33:46 发布

底层打工仔

最新推荐文章于 2023-03-07 00:33:46 发布

阅读量207

点赞数

分类专栏：前端面试题目

本文链接：https://blog.csdn.net/echo750/article/details/89456790

版权

前端面试题目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

中汽研前端面试

4.22号曹庄地铁站附近，新城市中心B座
首先笔试：
1、标准的css盒模型，低版本IE盒子模型有什么不同？
标准的CSS盒子模型的宽指的是内容区的宽。
低版本IE盒子模型的宽指的是内容区宽+填充宽+边界宽
2、cookie和session的区别？面试中还问到webstorage与cookie和session的区别?
在这里插入图片描述

Cookie以文本文件格式存储在浏览器中，而session存储在服务器端。
Cookie的存储限制了数据量，只允许4KB，而session是无限量的。
可以轻松访问cookie值但是无法访问session会话值，因此session更安全。
设置cookie时间可以使cookie过期，但是使用session-destory()，将会销毁会话。

3、简单描述JS原型和原型链？面试中问到项目中有无遇到原型链的问题?
4、常用的web性能优化方案？
5、简单描述下xss和csrf两种网站攻击
6、http和https有什么区别
7、近期学习了哪些js、css、html新知识。
面试问题：
1、介绍项目，项目中用到的技术，对各大浏览器的兼容情况。
2、如何高度还原给定psd设计稿，针对不同浏览器页面的还原情况如何，如果psd设计稿不能高度还原，该如何解决？
3、接到设计稿，如何与设计进行沟通。
4、后台接触什么语言，前后端分离还是混合式开发？
5、画圆的几种方式
6、h5能兼容到ie哪个版本？
7、ajax内部实现原理，请求方法，post和get的区别
get是最常见的请求，常用于向服务器查询某些信息，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器，对于XHR而言，位于传入open()方法的url末尾查询字符串必须经过正确的编码，即查询字符串的每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到url末尾，而且所有的名-值对都必须由&号分隔；

xhr.open("GET","example.php?name=value1&age=24",true);

POST请求通常用于向服务器发送应该被保存的数据。请求必须设置Content-Type值为application/x-form-www-urlencoded;POST发送请求使用send()方法时，需赋予其参数；
两者的区别：

使用get请求时，参数在url中显示出来，post请求不会；
POST传输的数据量大，可以达到2M，GET请求由于受到url长度限制，只能传递大约1024字节；
GET请求需注意缓存问题，POST请求不需要；

8、跨域的理解
9、会封装方法吗
10、期望薪资
11、家是哪的，有对象吗，未来规划，为什么选择天津，加班能接受吗？
12、多个项目同时进行，如何安排时间。
13、两家公司，一家有很多项目，但是不会对项目进行深入，在规定周期内交付任务即可；另一家只有一个项目，但是对项目挖得很深，对两家公司该如何选择？
14、接触过什么新的框架？

字节跳动面试

4.20号北京
1、实现三行布局的方式有哪些？
方式一：

<head>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			display: flex;
			flex-direction:column;
			height:100vh;
		}
		header,footer{
			line-height: 100px;
			height:100px;
			border:1px solid red;
		}
		.container{
			flex:1;
			border:1px solid green;
		}
	</style>		
</head>
<body>
	<header>head</header>
	<div class="container">container</div>
	<footer>footer</footer>
</body>

方式二：

body,html{
			position: absolute;
			height: 100vh;
			width:100%;
		}
		header{
			position:absolute;
			top:0;
			width:100%;
			height: 10vh;
			border:1px solid red;
		}
		.container{
			position: absolute;
			top:10vh;
			width:100%;
			height:80vh;
			border:1px solid green;
		}
		footer{
			position: absolute;
			bottom:0px;
			width:100%;
			border:1px solid red;
			height: 10vh;
		}

补充：根据CSS3规范，视口单位主要包括以下4个：

  1.vw：1vw等于视口宽度的1%。

  2.vh：1vh等于视口高度的1%。

  3.vmin：选取vw和vh中最小的那个。

  4.vmax：选取vw和vh中最大的那个。

2、http状态码 206 301 302 304 405

206：设置请求Range字段，指定请求的起始字节，
```
get /down.zip http/1.0
User-Agent: netfox
Range: bytes=2000070-
```
服务器收到请求之后的响应信息如下：
```
HTTP/1.1 206 Partial Content
content-length=106786028
content-range=bytes 2000070-106786027/106786028
```
http1.1支持断点传输。206就是响应请求的部分内容。
301：永久重定向，请求的资源已被永久移动到新的URI
302：临时移动，请求资源只是临时移动，客户端应继续使用原URI
304：客户端通常会缓存访问过的资源，当请求资源未修改，服务器返回此状态码时，不会返回任何资源。
403：服务端理解客户端的请求，但是拒绝执行此请求。
405：客户端请求中的方法被禁止。

3、https与http的区别，对称秘钥和非对称秘钥

https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

4、手机号正则实现

var tel="/^1(3|4|5|8|7)d{9}$/";

5、跨域实现方式 cors跨域如何对服务器和浏览器端进行设置
jsonp
cors:在服务器端配置如下：

"Access-Control-Allow-Origin":"*"'
"Acess-Control-Allow-Headers":"Content-Type,Content-length,Authorization,Accept,X-requested-With";
"Access-Control-Allow-Methods":"PUT,POST,GET,DELETE,OPTIONS";
"Content-Type":"applicaiton/json;charset=utf-8";

6、websocket实现原理
建立在TCP连接之上的全双工实时通信协议，在websocket API中只需一次握手，就可以创建持久链接，并进行双向数据传输。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当获取 Web Socket 连接后，可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
7、new的实例化过程
创建一个新对象；var obj=new Object();
将构造函数的作用域指向新对象;构造函数.call(obj);
执行构造函数的代码;obj.proto=构造函数.prototype;
返回新对象.return obj
8、最少代码实现数组[0,5,10,15,20,…1000],reduce实现map

var i=0;
	var result=[0];
	while(i<1000){
		i+=5;
		result.push(i);
	}
	console.log(result);

9、如何用reduce实现map
10、animation实现动态加载进度条的效果
HTML代码如下：

<div class="animation">
		<div class="progress-outer">
			<div class="progress-enter">
				<div class="progress-bg" style="width:50%"></div>
			</div>
		</div>
	</div>

css代码如下：

.animation{
			width:500px;
			padding:80px 0;
			display:flex;
			flex-wrap:wrap;
			justify-content:space-around;
		}
		.progress-outer{
			width:60%;
			height:14px;
			border-radius:8px;
			overflow:hidden;
			position:relative;
		}
		.progress-enter{
			height:inherit;
			background:rgba(180,160,120,.1)
		}
		.progress-bg{
			height:inherit;
			border-radius:6px;
			background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
			background-size:16px 16px;
			animation:panoramic 15s linear infinite;
		}
		@keyframes panoramic{
			to{
				background-position:200% 0
			}
		}

牵扯到的几个主要属性：
border-radius:
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, …);
animation:
background-position:
background-size:

底层打工仔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
面试总结

中汽研前端面试4.22号曹庄地铁站附近，新城市中心B座首先笔试：1、标准的css盒模型，低版本IE盒子模型有什么不同？2、cookie和session的区别？面试中还问到webstorage与cookie和session的区别3、简单描述JS原型和原型链？面试中问到项目中有无遇到原型链的问题4、常用的web性能优化方案？5、简单描述下xss和csrf两种网站攻击6、http和ht...
复制链接

扫一扫

专栏目录