我是靠谱客的博主 谦让花卷,最近开发中收集的这篇文章主要介绍前端常见难点面试题,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

1.跨域,同源策略

同源策略:同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。同源:就是协议、域名和端口号相同。
• 降域 document.domain
同源策略认为域和子域属于不同的域,如:
child1.a.com 与 a.com,
child1.a.com 与 child2.a.com,
xxx.child1.a.com 与 child1.a.com
两两不同源,可以通过设置 document.damain=‘a.com’,浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信,两个页面必须都设置documen.damain=‘a.com’。
此方式的特点:

1.只能在父域名与子域名之间使用,且将 xxx.child1.a.com域名设置为a.com后,不能再设置成child1.a.com。
2. 存在安全性问题,当一个站点被攻击后,另一个站点会引起安全漏洞。
3. 这种方法只适用于 Cookie 和 iframe 窗口。
• JSONP跨域
JSONP和JSON并没有什么关系!
JSONP的原理:(举例:a.com/jsonp.html想得到b.com/main.js中的数据)在a.com的jsonp.html里创建一个回调函数xxx,动态添加

//b.com/main.js中的代码
foo({name:“hl”})
这样便实现了跨域的参数传递。

采用jsonp跨域也存在问题:

  1. 使用这种方法,只要是个网站都可以拿到b.com里的数据,存在安全性问题。需要网站双方商议基础token的身份验证,这里不详述。
  2. 只能是GET,不能POST。
  3. 可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。

• CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
刚才的例子中,在b.com里面添加响应头声明允许a.com的访问,代码:
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax获取b.com里的数据了。
注意:此方法IE8以下完全不支持,IE8-10部分支持。详见caniuse-CORS
详细内容请参考:跨域资源共享 CORS 详解

• 其它方法

  1. HTML5的postMessage方法
  2. window.name
  3. location.hash

2.前端性能优化,CDN

内容分发网络(Content delivery network或Content distribution network,缩写:CDN)。简单来说它主要的工作是把我们需要被分发的内容分发到世界各地的各个节点上,让世界各地的人都可以在距离最近的网络节点拿到想要拿到的内容,减少网络传输距离从而达到加速的目的(需要提过资源绝对地址告诉cdn厂商,让厂商去智能拉取)。
知道了cdn是怎么一回事儿之后,咱们再聊聊前端如何利用cdn来优化网站性能。前端需要被加速的文件大致包括 js、css、图片、视频、和页面等文件,页面文件比较特殊(有动态和静态之分)我们稍后再聊,先聊聊js、css、图片和视频文件。这些文件和页面(htmljspaspx等)最大的区别是:这些文件都是静态的,改动较小,了解上面cdn工作原理之后我们就可以发现这类静态文件最适合做cdn加速。我们把这些静态文件通过cdn分发到全国乃至世界的各个节点,用户就可以在距离最近的边缘节点拿到所需要的内容,从而提升内容下载速度加快网页打开速度达到性能优化的目的。接下来我们聊聊页面,页面分动态页面(如:jsp等)和静态页面(html)。

最后

以上就是谦让花卷为你收集整理的前端常见难点面试题的全部内容,希望文章能够帮你解决前端常见难点面试题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(50)

评论列表共有 0 条评论

立即
投稿
返回
顶部