前端面试题ajax_前端性能优化面试题

前端面试题ajax_前端性能优化面试题AJAX1,Ajax是什么?如何创建一个Ajax?ajax的全称:AsynchronousJavascriptAndXML。异步传输+js+xml。所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验(1)创建XMLHttpRequest对象…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

AJAX

1,Ajax 是什么? 如何创建一个Ajax?
ajax的全称:Asynchronous Javascript And XML。异步传输+js+xml
所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScriptDOM实现局部刷新
ajax是一种创建交互式网页的计算

2,同步和异步的区别?
同步:浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作。
异步:浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容

3,如何解决跨域问题?
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

4,http状态码有那些?分别代表是什么意思?
100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求,但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后,请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

5,一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
1、浏览器会开启一个线程来处理这个请求,对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法,比如 WebView 中的 loadUrl 方法;
3、通过DNS解析获取网址的IP地址,设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话,客户端发送报头(请求报头);
5、进入到web服务器上的 Web Server,如 Apache、Tomcat、Node.JS 等服务器;
6、进入部署好的后端应用,如 PHP、Java、JavaScript、Python 等,找到对应的请求处理;
7、处理结束回馈报头,此处如果浏览器访问过,缓存上有对应资源,会与服务器最后修改时间对比,一致则返回304;
8、浏览器开始下载html文档(响应报头,状态码200),同时使用缓存;
9、文档树建立,根据标记请求所需指定MIME类型的文件(比如css、js),同时设置了cookie;
10、页面开始渲染DOM,JS根据DOM API操作DOM,执行事件绑定等,页面显示完成。

8,请解释 JSONP 的工作原理,以及它为什么不是真正的 AJAX。
jsonp的工作原理是,动态的创建了一个全局方法,并且动态生成script标签,将script标签的src属性变为(接口地址?callback=动态生成方法的方法名)请求数据,而后台则需要将接收到的callback值与数据一同返回,呈现出执行js方法的语句(方法名(数据)),其实就是在请求回来的数据中是执行请求是动态生成的js方法,生成了假象的ajax,所以jsonp只能做get类型请求

9,请解释一下 JavaScript 的同源策略。
同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。
它的精髓很简单:它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。

这里的同源指的是:同协议,同域名和同端口

10,为什么要有同源限制?
我们举例说明:比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

11,创建ajax过程
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScriptDOM实现局部刷新.

var xmlHttp = new XMLHttpRequest(); 
xmlHttp.open('GET','demo.php','true'); 
xmlHttp.send() 
xmlHttp.onreadystatechange = function(){ 
   if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ 
   } 
} 

11、XSS与CSRF有什么区别吗?
XSS是获取信息,不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作,需要知道其他用户页面的代码和数据包
要完成一次CSRF攻击,受害者必须依次完成两个步骤:
登录受信任网站A,并在本地生成Cookie。
在不登出A的情况下,访问危险网站B。
CSRF的防御
服务端的CSRF方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数。
通过验证码的方法

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

13、为什么HTTPS安全
https之所以比http安全,是因为他利用ssl/tls协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性

14、GET和POST的区别,何时使用POST?
GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制。

GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值,也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。

然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POSTGET 更稳定也更可靠

15、前端需要注意哪些SEO
合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;description把页面内容高度概括,长度合适,不可 过分堆砌关键词,不同页面description有所不同;keywords列举出重要关键词即可
语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取
重要内容不要用js输出:爬虫不会执行js获取内容
少用iframe:搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度:网站速度是搜索引擎排序的一个重要指标

16、什么是Ajax和JSON,它们的优缺点
Ajax是异步JavaScriptXML,用于在Web页面中实现异步数据交互。
优点
可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量
避免用户不断刷新或者跳转页面,提高用户体验
缺点
对搜索引擎不友好(
要实现ajax下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制
JSON是一种轻量级的数据交换格式,ECMA的一个子集
优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)

17、Cookie和localstorage、session storage的区别
Cookie技术浏览器兼容性好,但操作比较复杂,需要程序员自己封装,源生的Cookie接口不友好, 存储的内容较小, cookie的数据会随着ajax的请求发送到服务端,一般情况主要用在用户登录的时候我们可以通过在 Cookie 中存入一段辨别用户身份的数据,用于后台判断。
WebStorage则不能超过8MB,操作简单;可以代替一些cookie的工作,一般主要是用于存储一些本地数据,购物车数据之类的在安全方面的话,都不安全,一般就是对数据进行一些简单的加密,如base64编码,加密约定之类的东西
localstoragesessionstorage一个是长期存储,一个是会话存储

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/175599.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【转】分区容错性「建议收藏」

    【转】分区容错性「建议收藏」http://book.51cto.com/art/201203/323908.htm1.6.3  分区容错性最为常见的系统部署方案之一就是在一台巨大的中央服务器上安装一个数据库供其他东西访问。这可以让你的系统具有一致性,但是扩展性又如何呢?分区容错性能让你的系统在部分断网的情况下仍然可以完全正常地运转。要实现完全分区容错,系统就必须在任何情况下都能正常运转,除非完全断网。分区容错性几乎…

    2022年7月25日
    11
  • 头文件string与string.h的区别_conio h是什么头文件

    头文件string与string.h的区别_conio h是什么头文件一般一个C++的老的带“.h”扩展名的库文件,比如iostream.h,在新标准后的标准库中都有一个不带“.h”扩展名的相对应,区别除了后者的好多改进之外,还有一点就是后者的东东都塞进了“std”名字空间中。  但唯独string特别。 问题在于C++要兼容C的标准库,而C的标准库里碰巧也已经有一个名字叫做“string.h”的头文件,包含一些常用的C字符串处理函数,比

    2022年9月12日
    0
  • C语言打印short、long、long long和unsigned类型整数[通俗易懂]

    C语言打印short、long、long long和unsigned类型整数[通俗易懂]要打印unsignedint数字,可以使用%u符号。打印long数值,可以使用%d格式说明符。如果系统的int和long类型具有同样的长度,使用%d就可以打印long数值,但是这会给程序移植到其他系统(这两种数据类型的长度不一样的系统)带来麻烦,所以建议使用%ld打印long数值。在x和o符号前也可以使用l前缀,因此%lx表示以十六进制格式打印长整数,%lo表示

    2022年6月5日
    215
  • webpack-ES6转ES5[通俗易懂]

    webpack-ES6转ES5[通俗易懂]@webpack-ES6转ES5的babel-loader安装babel-loader:npminstall–savedevbabel-loader@7babel-corebabel-preset-es2015用法:在webpack配置对象中,需要将babel-loader添加到module列表中module:{rules:[{test:/\.m?js$/,exclude:/(node_modules|bower_c

    2022年9月17日
    0
  • 电脑蓝屏0x000000f4解决步骤_win7蓝屏0x0000001a

    电脑蓝屏0x000000f4解决步骤_win7蓝屏0x0000001a各合作伙伴:当前出现部分用户电脑因win7操作系统服役期结束,更新操作系统补丁导致系统蓝屏,错误代码0X000000F4的现象。在此提醒广大伙伴及用户,可尝试按照以下方法进行处理并设置。1、开机按F8进入安全模式,设置操作系统进入干净启动状态。2、打开“开始”-“控制面板”-“系统和安全”-“已安装的更新”,拖到底部“当前已安装的更新”将已安装更新删除。3、点击开始菜单并…

    2022年10月8日
    0
  • 2021最新java详细学习路线及路线图(超详细)「建议收藏」

    2021最新java详细学习路线及路线图(超详细)「建议收藏」本文将告诉你学习Java的一些步骤,学习过程中可能遇到的问题,及学习路线。希望能够对你的学习有所帮助。文末给大家准备了惊喜,希望大家都能够坚持看完哦~一、Java基础二、Java学习七大阶段[阶段1、JavaSE基础][阶段2、WEB前端][阶段3、数据库][阶段4、JavaWeb][阶段5、JavaWeb项目][阶段…

    2022年6月16日
    20

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号