面试准备--

_Plain
518 阅读6分钟

html面试题

  1. script标签的defer和async区别

    2151798436-59da4801c6772.png

    • defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
    • 两者区别在于何时执行脚本，async是下载完后立即执行，执行的同时阻断了html的解析；defer是 下载完成后，等待html解析完成后，DOMContentLoaded之前执行,所以不存在阻断html解析的情况。
    • async的脚本执行是乱序的，即加载完就执行，不管声明顺序如何；defer的脚本是按照加载顺序执行脚本的
    • 在现实中， 延迟 脚本 并不 一定 会 按照 顺序 执行， 也不 一定 会在 DOMContentLoaded 事件 触发 前 执行， 因此 最好 只 包含 一个 延迟 脚本

  2. h5新增的特性有哪些

    • canvans api
    • Geolocation API
    • audio video标签
    • webworker
    • websocket
    • 语义化标签：nav、header、footer、section等

js面试题

  1. js的事件循环eventloop

    事件循环就是浏览器为了解决js单线程运行阻塞问题的一种机制，我们知道js是同步执行代码，如果遇到耗时的任务就会阻塞后续代码的执行，因此js分为同步和异步任务，同步任务会在主线程中依次执行，异步任务会在有结果后推入任务队列中等待主线程空闲时候读取执行，先进先出.如此循环往复就是事件循环。 2.宏任务和微任务 任务队列中又分为宏任务和微任务，执行宏任务过程中遇到微任务会丢到微任务队列，等待此次宏任务执行完会清空此次执行产生的微任务。

  2. 数组方法

  3. 深拷贝的几种方式

  4. promise了解多少

  5. async await

  6. es6

  7. 说一下对闭包的理解

  8. this指向问题

  9. 继承的几种方式

  10. 数组的去重

  11. js的垃圾回收机制

  12. new操作符都做了什么

vue面试题

  1. vue的diff算法
  2. vue的响应式原理
  3. vue模版编译原理
  4. vue父子组件生命周期顺序
  5. nextTick原理
  6. watch和computed区别
  7. 路由钩子执行顺序

react面试题

  1. react的事件处理、批量更新机制
  2. react的fiber更新机制
  3. react hooks的原理
  4. react函数组件如何保证类组件的生命周期函数
  5. useEffect 和 useLayoutEffect有什么不同

浏览器以及http网络协议

  1. 浏览器渲染流程

    • 解析html建立dom树
    • 解析css构建css树
    • 生成render树
    • 计算元素的位置 尺寸
    • 绘制render树

  2. 浏览器输入url后发生了什么

    • 查询本地缓存、系统缓存、路由缓存、host记录
    • 如果没有缓存，则去查询dns服务器，解析服务器ip
    • 建立tcp的链接，三次握手以保证双方正常通信
    • 构建http请求，判断是否命中缓存，如果命中缓存直接读取缓存，如果没有则发起http请求
    • 拿到html，浏览器解析html，加载资源，渲染页面

  3. 浏览器的缓存机制

    • 强缓存：http1.0中使用Expires设置过期时间，例如：Expires: Wed, 22 Nov 2019 08:41:00 GMT，但是客户端和服务器时间可能不一致。http1.1中使用Cache-Control来设置过期时间，Cache-Control有很多值：public(代表客户端和服务器都缓存)、private(只有浏览器能缓存了，中间的代理服务器不能缓存)、no-cache(跳过强制缓存直接进入协商缓存)、no-store(不进行任何形式的缓存)、s-maxage(这和max-age长得比较像，但是区别在于s-maxage是针对代理服务器的缓存时间)
    • 协商缓存： 当强缓存失效后，浏览器会在请求头中携带相应的tag向服务器发送请求，服务器根据tag决定是否使用缓存。http1.0中协商缓存由两个字段控制：Last-modified：客户端第一次请求时，服务器会响应该字段标记资源最后的修改时间，浏览器再次请求时会携带If-Modified-Since字段也就是服务器传来的资源最后修改时间，服务器拿到请求头该字段后会做对比，如果小于请求头最后修改时间就返回新的资源，否则返回304，告诉浏览器直接用缓存，只能精确到秒。http1.1中If-None-Match/E-tag，只要文件内容改变E-tag就会改变，没有精确到秒的限制，相比http1.0的If-Modified-Since/Last-modified更加精确。

  4. 浏览器进程与线程的理解

    首先浏览器是多进程多线程的，进程与线程是包含关系，一个进程可以有多个线程

    • 进程：

  5. http1和2的区别

  6. https是如何保证安全的

  7. tcp的三次握手和四次挥手

  8. 如何突破浏览器并发限制

  9. 浏览器的重绘和回流，如何避免

  10. http缓存是哪些字段控制的

  11. get、post请求的区别

  12. cookie、session、local的区别

  13. 浏览器不同标签页之间如何通信

  • shareworker
  • localstorage、cookie

node面试题

  1. 常见的node内置模块
  2. node的事件循环机制
  3. node如何查找解析路径

webpack面试题

  1. webpack打包流程
  2. webpack打包原理
  3. webpack如何解析依赖关系
  4. 常见的配置都有哪些
  5. 如何提升构建速度

ts面试题

关于前端性能优化、兼容问题

  1. 如何解决白屏
  2. 如何提升首屏渲染速度
  3. 如何兼容ios底部滚动条
  4. 安卓黄色边框如何去除
  5. 移动端如何画出1px的线
  6. 移动端如何解决滚动卡顿
  7. 大文件切片上传

前端安全策略

  1. xss攻击
  2. csrf攻击
  3. sql注入

其他关注

  1. fetch与ajax的区别
  2. 你了解的浏览器通信方式
  3. 常见的设计模式
  4. 项目中遇到的难点，你是如何解决的

抽象问题

  1. 上家公司离职的原因？
  2. 如何保证自己代码质量？
  3. 你最擅长的是什么？
  4. 你是如何处理工作中的协调的？
  5. 假如项目开发周期很紧，需求无法完成，你会怎么做？
  6. 如何看待加班？
  7. 你觉得与同事关系怎么样？
avatar
文章
阅读
粉丝