记第一次面试

Posted 2021-01-19 zerohero

今天第一次面试，被问到表单中的get和post的区别。一时之间只记得post是安全性更高的，忘记了其他方面。还有延时加载的问题也回答得不是太好，回来马上查资料补充一下知识。

 

get和post区别：

• 　　get参数通过url传递（即HTTP协议头上），post放在request body（HTTP的包体）中。
• 　　get比post不安全，因为参数直接暴露在url中。
• 　　get请求在url中有长度限制（get提交的数据最大是2K），而post理论上没有限制。
• 　　get产生一个TCP数据包（浏览器会把http header和data一并发送出去，服务器响应200），而post产生两个TCP数据包（浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok）。
• 　　get在浏览器回退时是无害的，post会再次提交请求。
• 　　get请求会被浏览器主动cache，而post不会，除非手动设置。　　
• 　　get请求只能进行url编码，而post支持多种编码方式。
• 　　get请求参数会被完整保留在浏览器历史记录里，而post中的参数不会被保留。
• 　　get只接受ASCII字符的参数的数据类型，而post没有限制。

 

综上所述，post时间上消耗的要多一点，看起来GET比POST更有效更高效率。其实get和post是HTTP协议中两种发送请求的方法，本质上就是TCP链接，并无差别。但是：

　　1. GET与POST都有自己的语义，不能随便混用。

　　2. 据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。

　　3. 并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

 

Web性能优化之延时加载（懒加载）和预加载

　　延时加载：

　　1、原因　　

对于一些图片多，页面长的网页来说，如果每次打开页面加载全部的网页内容，页面加载速度势必会受到影响，如果每次打开网页只将网页可视区域的内容加载给用户 ，将大大提高网页浏览速度，同时也减轻服务器负载，我们可以使用lazyload.js来实现对图片的延迟加载，当网页图片进入到浏览器可视区域时，才会去请求服务器加载图片。

 

　　2、原理

 

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置

 

 

　　3、方法

1. 1. 　　第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
   2. 　　第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
   3. 　　第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

 

　　预加载：

　　1、原因

图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

 

　　2、原理

 

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

 

 

　　3、方法（详见：http://web.jobbole.com/86785/）

1. 1. 　　　　方法一：用CSS和JavaScript实现预加载
   2. 　　　　方法二：仅使用JavaScript实现预加载
   3. 　　　　方法三：使用Ajax实现预加载
   4. 　　　　常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

小白从设计一直自学前端，第一次面试前端工作，藉此补充下知识。(侵权请通知立删除)