web前端面试题

1、预加载和懒加载的区别？

1. 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
   作用：
   图片预先加载到浏览器中，享受极快的加载速度。这对图片画廊及图片占据很大比例的网站十分有利，它保证了图片快速、无缝的发布，页也可以帮助用户在浏览网站内容时获得更好的用户体验。
   实现方法：
   方法一：用CSS和JavaScript实现预加载
   方法二：仅使用JavaScript实现预加载
   方法三：使用Ajax实现预加载

   2.懒加载: 懒加载也就是延迟加载。(当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。)
   实现方法：
   1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
   2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
   3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

---

2、http协议，原理，网络协议？

     HTTP协议永远都是客户端发起请求，服务器回送响应。
1. 利用DNS协议进行域名解析
2. 建立tcp协议三次握手过程
3. 客户端发出访问网站相应页面请求（发出http协议请求报文）
4. 系统架构部署情况
5. 服务端发出响应访问页面的请求信息（发出http协议响应报文）
6.断开tcp协议四次挥手过程

---

4、ajax请求返回的状态码？

状态代码	详细描述说明
200～OK	服务器成功返回网页，这是成功的http请求，返回的标准状态码
301-Moved Permanently	永久跳转，所有请求的网页将永久跳转到被设定的新的位置，例如：从baidu.com跳转到www.baidu.com
403-Forbidden	禁止访问，这个请求是合法的，但是服务器端因为匹配了预先设置的规则而拒绝响应客户端的请求，此类问题一般为服务器或服务权限配置不当所致
404-Not Found	服务器找不到客户端请求的指定页面，可能是客户端请求了服务器上不存在的资源导致
500-Internal Server Error	内部服务器错误，服务器遇到了意料不到的情况，不能完成客户的请求。这是一个较为笼统地报错，一般为服务器的设置或者内部程序问题导致。例如SElinux开启，而又没有为http设置规则许可，客户端访问就是500。
502-Bad Gateway	坏的网关，一般是代理服务器请求后端服务时，后端服务不可用或没有完成响应网关服务器。一般为反向代理服务器下面的节点出问题导致。
503-Service Unavailable	服务当前不可用，可能因为服务器超载或停机维护导致，或者是反向代理服务器后面没有可以提供服务的节点
504-Gateway Timeout	网关超时，一般是网关代理服务器请求后端服务时，后端服务没有在特定的时间内完成处理请求，一般是服务器过载导致没有在指定的时间内返回数据给前端代理服务器。

5、cookie与loacalStorage sessionStorage的区别？

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中

---