前端面试题 浏览器相关

浏览器的同源策略及规避方法

  1. 同源策略

    • 三同:协议相同、域名相同、端口相同
    • 限制:Cookie、LocalStorage和IndexDB 无法读取、DOM 无法获得、AJAX 请求不能发送。
  2. 不同源窗口规避方法

    • 二级域名Cookie共享:设置document.domain为一级域名,或者设置Cookie,指定domain为二级域名
    • 片段识别符(#),http://a.com/index.html#fragment,可以通过`hashchange`事件监听变化
    • window.name,监听window.name影响性能
    • 跨文档通讯API(Cross-document messaging),window.postMessage,父子窗口监听message事件,HTML5支持
  3. Ajax同源规避方法

    • 代理服务器,中转数据(开发阶段常用)
    • JSONP,最常规的方法,利用script标签不受同源策略限制,需服务器支持,只能通过GET
    • WebSocket,Origin字段告知服务器来源,保证安全
    • CORS(Cross-origin resource sharing),通过Origin字段保证安全,简单方式(仅限于HEAD,GET,POST)直接请求,非简单方式预检

参考1:阮一峰-浏览器同源政策及其规避方法
参考2:阮一峰-跨域资源共享

PC移动浏览器适配

  1. 跳转适配,为每种设备提供不同的代码,http重定向到相应的页面

  2. 代码适配,服务器端针对ua生成不同版本的HTML

  3. 自适应,根据屏幕大小以不同方式呈现,适合页面内容不多情况,自适应的步骤如下

    • 代码头部添加viewport元标签,width=device-width initial-scale=1
    • 不使用绝对宽度
    • 相对大小的字体,不用px,而用em
    • 流动布局,而不是固定不变的,宽度太小,则换行,不会水平溢出
    • 选择加载css,<link media=’screenand(max-device-width:400px)’ href=’’)
    • css的@media规则
    • 图片自适应,width:100%即可
gzdaijie            updated 2018-05-04 01:47:18

results matching ""

    No results matching ""