• 面试复习整理的笔记


    一、通信类

    1、什么是同源策略及限制

    从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

    源包括协议、域名、端口(默认端口80),这三方面有一个不一样就表示跨域了

    cookie,localstorage,indexDB无法获取

    DOM无法获取

    AJAX请求不能发送

    2、前后端如何通信

    ajax

    websocket不受跨域限制

    cors支持跨域、同源

    3、如何创建Ajax

    借助第三方框架:VUE,Jquery

    XMLHttpRequest对象的工作流程

    兼容性处理

    事件的触发条件

    事件的触发顺序

    ajax五部曲

    4、跨域通信的几种方式

    JSONP

    Hash

    postMessage

    WebSocket

    CORS

    fetch('/some/url',{    method:'get'

    }).then(function(response){}).catch(function(err){})


    CORS怎样实现跨域的?浏览器会拦截跨域的ajax请求,CORS会在http中加一个origin

    二、安全类

    CSRF:cross-site request forgery跨站请求伪造,利用本身漏洞执行接口

    防御措施

    Token验证

    Referer验证

    隐藏令牌

    XSS

    cross-site scripting跨域脚本攻击,往页面注入js运行

    攻击原理

    防御措施

    三、算法

    1、排序

    快速排序https://segmentfault.com/a/1190000009426421

    选择排序https://segmentfault.com/a/1190000009366805

    希尔排序https://segmentfault.com/a/1190000009461832

    2、堆栈、队列、链表

    3、递归

    希尔排序https://segmentfault.com/a/1190000009857470

    4、波兰式和逆波兰式

    四、渲染机制

    1、什么是DOCTYPE及作用

    DTD文档类型定义,告诉浏览器文档类型,决定使用何种协议解析以及切换浏览器模式;

    DOCTYPE用来声明文档类型和DTD规范的

    H5 <!DOCTYPE html>

    H4有严格模式和宽松模式,严格模式不包括展示性的和弃用的元素

    2、浏览器渲染过程

    预解析 DOM tree cssom render tree,layout计算位置,

    重排reflow

    重绘repaint

    布局layout

    五、js运行机制

    js引擎、js与浏览器怎么实现交互

    测试1

    console.log(1);
    setTimeout(function () {
    console.log(2);
    },0);
    console.log(3);结果为1、3、2

    js是单线程的,同一时间只能做一件事,setTimeout是异步任务,异步任务执行时先挂起,等同步任务完成后,才去响应异步任务

    测试2

    console.log('A');
    while(1){};
    console.log('B');结果为A
    执行while会卡住

    测试3
    for(var i=0;i<4;i++){
    setTimeout(function () {
    console.log(i);
    },1000);
    }
    结果为4个4

    循环时把setTimeout交给定时器模块,达到1000的时间后,才放到异步队列
    通行栈放的同步队列,异步任务到时间了就放入异步任务队列,等同步任务执行完后去异步队列取异步任务到通行栈,通行栈的异步任务执行完后又去取异步任务,这个循环称之为event loop
    异步任务
    setTimeout
    DOM事件
    ES6 promise

    六、页面性能

    提升页面性能的方法有哪些?

    1、资源压缩合并,减少HTTP请求

    2、非核心代码异步加载——异步加载的方式——异步加载的区别

    异步加载的方式:动态脚本加载(说白了就是动态创造节点)、defer、async,在异步加载时的script标签上加上defer、async属性

    异步加载的区别:defer是在HTML解析完后才会执行,如果是多个,按照加载顺序执行

    async是在加载完后立即执行,如果是多个,执行顺序和加载顺序无关,先执行完的先出结果

    3、利用浏览器缓存——缓存的分类——缓存的原理

    缓存是请求的资源文件在本地的备份

    缓存分类

    强缓存:不请求直接从本地获取资源(通过时间限制,EXPIRES和CACHE-CONTROL)

    Expires表示过期时间,绝对时间以服务器为准

    Cache-Control表示相对时间,以客户端时间为准

    如果两个时间都有以后者为准

    协商缓存:浏览器和服务器协商是否用本地缓存

    Last-Modified响应头拿到资源的时间。当强缓存失效了,协商缓存发生请求时,请求头会通过if-modified-since携带Last-Modified的值告诉服务器,服务器再做对比。

    ETag服务器下发资源时的hash值。协商缓存可能只是时间变了但是内容没变化,这种可以还是从缓存获取资源,通过if-none-match携带ETag的值告诉服务器

    4、使用CDN,CDN加速资源非常快

    5、预解析DNS

    dns-prefetch预解析

    <meta http-equiv="x-dns-prefetch-control" content="on">

    页面中的a标签在高级浏览器中是默认打开了预解析的,而一般https协议的浏览器是关闭了a标签的预解析的,所以需要上面这个把a标签的预解析打开

    <link rel="dns-prefetch" href="//host_name_to_prefetch.com">

    预解析把这句放在head中

    七、错误监控

    代码质量体系,线上环境错误收集

    1、前端错误分类

    及时运行错误:代码错误

    资源加载错误

    2、错误的捕获分类

    及时运行错误:try catch; window.onerror不能捕获资源加载错误

    资源加载错误:这种错误不会冒泡,所以window.onerror无法捕获错误。

    三种:object.onerror;performance.getEntries;Error事件捕获

    performance.getEntries返回数组

    performance.getEntries.forEach((item)=>{console.log(item.name)})表示加载的资源个数

    document.getElementByTagName('img')

    延伸:跨域的JS运行错误也可以捕获,错误提示是什么?怎样处理?

    处理的方法

    1、客户端:在script标签增加crossorigin属性

    2、服务端:设置js资源响应头Access-Control-Allow-Origin:*

    通过以上设置就能拿到错误信息了

    3、上报错误的基本原理

    采用Ajax通信方式上报,利用Image对象上报,一行代码,也不借助第三方库

    script标签内容(new Image()).src='url'会发出请求

    八、面试技巧

    描述演练:架构、技术、人员组织、难点攻克

    态度谦虚、回答灵活、学会赞美

    业务能力:做过什么业务、业务的业绩、技术方案、技术难点、收获

    思考能力:同一件事从不同角度思考

    学习能力

    职业规划:目标、近阶段目标、长期目标、方式方法

    团队协作能力

  • 相关阅读:
    从dump看硬件问题
    Pycharm----【Mac】设置默认模板
    python----装饰器(几种常见方式的使用与理解)
    【Mac】打开配置文件,添加/修改环境变量
    Airtest---UI自动化测试项目
    python----PySnooper获取打印日志
    学习类网站
    unittest----assert断言的使用
    Mac---使用tree生成目录结构
    python request 留位置7
  • 原文地址:https://www.cnblogs.com/sxly/p/9332368.html
Copyright © 2020-2023  润新知