2023前端面试题持续更新中

2023前端面试题持续更新中

• 浏览器从输入url渲染的整个过程

1. 浏览器输入url
2. 浏览器先查浏览器缓存，如果缓存中有，会直接在屏幕中显示内容，如果没有则跳到第三步操作
3. 在发送HTTP请求前，需要域名解析（DNS解析），解析获取相应的IP地址
4. 浏览器向服务器发送tcp连接，与服务器建立tcp三次握手
5. 握手成功后，浏览器向服务器发送http请求，请求数据包
6. 服务器处理收到的请求，将数据返回至浏览器
7. 浏览器收到http响应
8. 读取页面内容，浏览器渲染解析html源码

• 网站性能优化

1. http请求方面，减少请求数量，对项目资源进行压缩
2. 压缩资源，提取公共资源压缩，提取css，js公共方法
3. 不要缩放图片，使用雪碧图，使用字体图标
4. 使用CDN，抛开无用的cookie
5. 减少重绘重排，css属性读写分离，最好不要用js修改样式
6. js代码层面的优化，减少对字符串的计算，合理使用闭包，首屏的js资源加载放到最底部

• get和post的区别

1. get请求有缓存，post没有
2. post相对get安全一点，因为get请求都包含在url里，且会被浏览器保存历史记录，post不会，但是在抓包的情况下都是一样的
3. post可以用过request body来传输比get更多的数据
4. url有长度限制，会影响get请求，但是这个长度限制是浏览器规定的，不是RFC规定的
5. post支持更多的编码类型且不对数据类型限制

• link和@import的区别
  两者都是外部引入css的方式，但是存在一定的区别：
  1. link是XHTML标签，除了能够加载css,还可以定义RSS等其他事务；而@import属于css范畴，只能加载css
  2. link引用css时，在页面载入同时加载；@import需要页面完全载入以后再加载
  3. link没有兼容性问题，@import是css2.1提出的，低版本浏览器不支持
  4. link支持通过js控制DOM改变样式，@import不支持
• http和https的区别
  http是HTTP协议运行在TCP之上，所有传输的内容都是明文的，客户端和服务器端都无法验证对方的身份；
  https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上，所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份；
• css样式优先级
  ！important > 内联样式 > ID选择器 > 类，伪类，属性选择器 > 标签，伪元素选择器 >通配符，子类选择器，兄弟选择器 >继承的样式
• vue组件通讯方式有哪些方法

1. props和$emit 父组件向子组件传递数据通过props传递，子组件传递数据给父组件通过$emit触发事件来传递
2. $parent和$children 获取当前组件的父组件和当前组件的子组件
3. $arrt 和 $listeners
4. $refs获取组件实例
5. envetBus兄弟组件数据传递
6. vueX状态管理

• vue响应原理
  整体思路是数据劫持+观察者模式
  对象内部通过defineReactive方法，使用Object.defindProperty将属性进行劫持（只会劫持已经存在的属性），数组则是通过重写数组方法来实现。当页面使用对应属性时，每个属性都拥有自己的dep属性，存放他所依赖的watcher（依赖收集），当属性变化后会通知自己对应的watcher去更新（派发更新）

• 为什么data是一个函数
  因为Vue组件的data属性是一个可复用的选项，它需要在每个组件实例中都是独立的。如果将data属性定义为一个对象，那么所有的组件实例将共享同一个数据对象，这样会导致一个组件的数据变化会影响到其他组件的数据。

• watch和computed的区别及使用场景
  computed计算属性，他依赖其他属性值，有缓存，只有依赖的值发生变化才会去重新计算，但是不能异步；(购物车商品结算的时候)
  watch监听，监听数据的变化，无缓存，数据变化就会执行回调，可以异步；(搜索）