|
携程
一面
? 1. 常用的语义化标签
优点
- 使代码结构清晰，有利于团队开发。
- 便于各种设备解析，如屏幕阅读器等，以语义的方式渲染页面
- 利用搜索引擎优化
常见的语义化标签
- <title>：页面主体内容。
- <hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
- <header>：页面。通常包括网站标志、主导航、全站链接、搜索框。
- <nav>：标记导航。仅对页面中重要的链接群使用。
- <main>：页面主要内容，一个页面只能使用一次。如果是web服务应用，
- <article>：定义外部的内容，其中的内容独立于文档的其余部分。
- <section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
- <aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
- <footer>：页脚，只有当父级是body时，才是整个页面的页脚。
? 2. 垂直居中
- 设置line-height 等于height
- position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center- （父）display:table+ （子）display:table-cell + vertical-align: middle
?3. 清除浮动
设置伪类：clear: both- overflow:hidden
- 父级设置高度
? 4. meta的作用
<meta>?标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
meta的必需属性和可选属性
必需属性content
meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明。例如：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
这里面content里的属性就是对keywords进行的说明，所以呢也可以理解成一个键值对吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
可选属性
http-equiv
http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。在上面的meta作用中也有简单的说明，那么现在再举个例子。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在页面中加入这个后，5秒钟后就会跳转到指定页面啦
name
第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。还是举个例子吧:
<meta name="renderer" content="webkit">
这个meta标签的意思就是告诉浏览器，用webkit内核进行解析，当然前提是浏览器有webkit内核才可以
常用meta标签大总结
接下来就是常用的meta标签大总结啦，我会尽可能的做到全
charset
charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。
charset有两种写法
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
两个都是等效的。
百度禁止转码
百度会自动对网页进行转码，这个标签是禁止百度的自动转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 优化部分
<!-- 页面标题<title>标签(head 头部必须) -->
<title>your title</title>
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用
英文逗号「,」分割的值，通常有如下几
种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">
viewport
viewport主要是影响移动端页面布局的，例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
content 参数：
- width viewport 宽度(数值/device-width)
- height viewport 高度(数值/device-height)
- initial-scale 初始缩放比例
- maximum-scale 最大缩放比例
- minimum-scale 最小缩放比例
- user-scalable 是否允许用户缩放(yes/no)
https://blog.csdn.net/weixin_37657720/article/details/80548223
? 5. display和visible
display隐藏后，div不会占用位置
而使用visibility隐藏的div还是占用位置的
? 6. 单例模式和工厂模式的设计模式
? 7. rem
? 8. 一万个请求，后一个请求依赖前一个请求的结果
? 9. promise.all和promise.allSettled，使用promise.all拿到无论是成功还是失败的结果，怎么处理
allSettled的特性与使用：
与Promise.all一样，参数是一组包含Promise实例的数组，返回值是一个新的Promise实例，其实例在调用then方法中的回调函数的参数仍是一个数组。不同之处在于无论参数实例resolve还是reject，Promise.allSettled都会执行then方法的第一个回调函数（意思就是不会catch到参数实例的reject状态），其回调函数的参数返回的数组的每一项是一个包含status和value或者reason的一组对象。status代表对应的参数实例状态值，取值只有fulfilled（resolve状态）和rejected（reject状态），当status的值为rejected，对应的另一个对象属性就是reason了，也就是被reject的原因，而成功返回的status的值则是fulfilled，对应的另一个对象属性便是value，对应的值就是resolve的任意值。
var promise1 = new Promise(function(resolve,reject){
setTimeout(function(){
reject('promise1')
},2000)
})
var promise2 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('promise2')
},3000)
})
var promise3 = Promise.resolve('promise3')
var promise4 = Promise.reject('promise4')
Promise.allSettled([promise1,promise2,promise3,promise4]).then(function(args){
console.log(args);
/*
result:
[
{"status":"rejected","reason":"promise1"},
{"status":"fulfilled","value":"promise2"},
{"status":"fulfilled","value":"promise3"},
{"status":"rejected","reason":"promise4"}
]*/
})
? 10. sessionStorage和localStorage，同个页面能不能拿到sessionStorage
每个页面都有自己独立保存了一份sessionStorage，就算是几个窗口打开同一个页面，每个页面的sessionStorage互不影响。
? 11. http和https的区别
HTTPS和HTTP的主要区别
https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。
http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
客户端在使用HTTPS方式与Web服务器通信时的步骤
客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。
Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端。
客户端的浏览器与Web服务器开始协商SSL/TLS连接的安全等级，也就是信息加密的等级。
客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站。
Web服务器利用自己的私钥解密出会话密钥。
Web服务器利用会话密钥加密与客户端之间的通信。
es6的模块化好处，为什么commonjs不适合用于前端
好处就是可以配合webpack配置左tree shaking做性能优化
因为commonjs是运行的时候才去导入的，没办法做按需引入，也就不能做tree shaking和scope hosting，而且commonjs是同步加载的，对前端页面渲染会有很大的影响，比如白屏时间会变长等
dom什么时候分配内存
? 12. react的生命周期
? 13. redux和state的区别
? 14. redux的action要传第三个参数怎么办
? 15. redux要有异步放在action里面还是reducer里面，为什么
? 16. 项目优化可以从哪几个方向入手？
二面三面：
1.说下你现在在做的项目，用的技术栈，有什么功能
2.原型链和作用域链的区别，他们的终点分别是什么
3.react如何绑定多个事件
4.你常用es6属性
5.对闭包的理解
6.三次握手过程，websoket有三次握手阶段吗
7.react生命周期
8.hook怎么实现class的生命周期函数
9.深拷贝几种方式
10.水平居中几种方式
11.盒子模型
12.react优缺点
13.react为什么不做双向数据绑定
15.排序算法题，前后补上
16.实现一下Array.reduce
17.react为什么要废弃一些生命周期函数
18.合成事件相关
19.虚拟dom优势
20.react怎么绑定监听，如屏幕滚动
21.为什么要用redux
22.怎么实现点击选中列表项
23.你做过哪些react项目上的优化
?
|