时长：半小时，平台：腾讯会议
自我介绍
输入URL到页面呈现经历了什么
- 浏览器中输入网址。
- 通过DNS解析域名的实际IP地址
- 检查浏览器是否有缓存
- 与 WEB 服务器建立 TCP 连接。
- 若协议是https则会做加密
- 浏览器发送请求获取页面html
- 服务器响应html
- 浏览器解析 HTML
- 浏览器渲染页面
- 浏览器解析执行js脚本
- 浏览器发起网络请求
- 服务器响应ajax请求
- 浏览器处理事件循环等异步逻辑。
JS文件执行顺序和页面渲染有什么关系吗
通常JS代码会改变DOM树的结构，所以浏览器在解析HTML时如果遇到JS则会停下来先去执行JS文件再继续解析HTML，这就可能会导致加载白屏。
HTTP常见状态码
推荐看这篇文章XSS、CSRF介绍一下
XSS全称cross-site scripting（跨站点脚本），是一种代码注入攻击，是当前 web 应用中最危险和最普遍的漏洞之一。攻击者向网页中注入恶意脚本，当用户浏览网页时，脚本就会执行，进而影响用户，比如关不完的网站、盗取用户的 cookie 信息从而伪装成用户去操作，危害数据安全。
CSRF 跨站请求伪造（英语：Cross-site request forgery），是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。如：
攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
Vue有哪些生命周期
beforeCreate()在实例创建之间执行，数据未加载状态created()在实例创建、数据加载后，能初始化数据，dom渲染之前执行beforeMount()虚拟dom已创建完成，在数据渲染前最后一次更改数据mounted()页面、数据渲染完成，真实dom挂载完成beforeUpadate()重新渲染之前触发updated()数据已经更改完成，dom也重新render完成,更改数据会陷入死循环beforeDestory()和destoryed()前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行一般在哪个生命周期请求异步数据
异步请求在哪个阶段都可以调用，因为会先执行完生命周期的钩子函数之后，才会执行异步函数，但如果考虑用户体验方面的话，在created中调用异步请求最佳，用户就越早感知页面的已加载，毕竟越早获取数据，在mounted实例挂载的时候就越及时。
v-if和v-show的差别
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。当v-show赋值为false时，元素被隐藏，此时查看代码时，该元素上会多一个内联样式style=“display:none”一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。vue的next.tick有什么用？
手撕代码
实现一个简单的观察者模式
let o = new Observer(); //添加监听 o.listen('eventName',(param1,param2) => {}); //触发 o.trigger('eventName','param1','param2'); //删除监听 o.remove('eventName',() => {});实现三列布局
1. 父元素flex，中间元素`flex:1` <style> .main { display: flex; } .left{ width: 300px; } .center{ flex-grow: 1; flex-shrink: 1; } .right{ width: 300px; } </style> <body class="main"> <div class="left">左</div> <div class="center">中</div> <div class="right">右</div> </body>
2.float 使用float实现三列左右固定宽高，中间自适应宽度
<section class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<!-- center如果在中间，则right会被中间block的元素挤到下一行 -->
</section>
<style>
.wrapper div { height: 300px; }
.left {
float: left;
width: 100px;
}
.center {
margin-left: 100px;
margin-right: 100px;
}
.right {
float: right;
width: 100px;
}
</style>
3.position
<style>
.left{
position: absolute;
left: 0;
width: 300px;
background-color: red;
}
.center{
position: absolute;
left: 300px;
right: 300px;
background-color: blue;
}
.right{
position: absolute;
right: 0;
width: 300px;
background-color: #3A2CAC;
}
</style>
<body>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</body>
```没有反问，部门未知。
全部评论
(5) 回帖