前言
昨天有幸去字节面试了，顺便拿到了offer，把还记得的东西写下来，供大家参考一下。
CSS 篇
link 与 @import 的区别
link是HTML方式，@import是CSS方式link最大限度支持并行下载，@import过多嵌套导致串行下载，出现 FOUC (文档样式短暂失效)link可以通过rel="alternate stylesheet"指定候选样式- 浏览器对
link支持早于@import，可以使用@import对老浏览器隐藏样式 @import必须在样式规则之前，可以在css文件中引用其他文件- 总体来说：
link优于@import，link优先级也更高
BFC 有什么用
- 创建规则：
- 根元素
- 浮动元素（
float不取值为none） - 绝对定位元素（
position取值为absolute或fixed） display取值为inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex之一的元素overflow不取值为visible的元素
- 作用
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的
margin折叠
清除浮动的几种方式
- 父级
div定义height - 结尾处加空
div标签clear:both - 父级
div定义伪类:after和zoom - 父级
div定义overflow:hidden - 父级
div也浮动，需要定义宽度 - 结尾处加
br标签clear:both
Css3 新增伪类 - 伪元素
p:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。p:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。p:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。p:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。:enabled已启用的表单元素。:disabled已禁用的表单元素。:checked单选框或复选框被选中。::before在元素之前添加内容。::after在元素之后添加内容,也可以用来做清除浮动。::first-line添加一行特殊样式到首行。-
::first-letter添加一个特殊的样式到文本的首字母。 - 伪类语法一个：，它是为了弥补css常规类选择器的不足
- 伪元素语法两个：，它是凭空创建的一个虚拟容器生成的元素
IE盒子模型 、W3C盒子模型
- W3C盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；
box-sizing: content-box- width = content width;
- IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去;
box-sizing: border-box- width = border + padding + content width
display:inline-block 什么时候不会显示间隙？
- 移除空格
- 使用
margin负值 - 使用
font-size:0 letter-spacingword-spacing
行内元素float:left后是否变为块级元素？
行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置 成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60*1000ms ＝ 16.7ms
stylus/sass/less区别
- 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Sass和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Sass和Stylus可以通过缩进表示层次与嵌套关系Sass无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；这也是为什么安装Sass的时候有时候会报错，需要安装python脚本
优点：就不用我多说了，谁用谁知道，真香。
rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，- 而
rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
水平居中的方法
- 元素为行内元素，设置父元素
text-align:center - 如果元素宽度固定，可以设置左右
margin 为 auto; - 如果元素为绝对定位，设置父元素
position 为 relative，元素设left:0;right:0;margin:auto; - 使用
flex-box布局，指定justify-content属性为center display设置为tabel-ceil
垂直居中的方法
- 将显示方式设置为表格，
display:table-cell,同时设置vertial-align：middle - 使用
flex布局，设置为align-item：center - 绝对定位中设置
bottom:0,top:0,并设置margin:auto - 绝对定位中固定高度时设置
top:50%，margin-top值为高度一半的负值 - 文本垂直居中设置
line-height为height值
浏览器 篇
浏览器内核的理解
- 主要分两个部分：
渲染引擎、js引擎 渲染引擎：负责取得网页的内容（html css img ...），以及计算网页的显示方式，然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同，所以渲染的效果也不一样js引擎：解析和执行javascript 来实现网页的动态效果- 最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向于只值渲染引擎
IE : trident内核Firefox ： gecko内核Safari : webkit内核Opera:以前是presto内核，Opera现已改用Google - Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发)
HTTP 的请求方式场景
Get方法：获取数据通常(查看数据)-查看POST方法：向服务器提交数据通常(创建数据)-createPUT方法：向服务器提交数据通常(更新数据)-update，与POST方法很像，也是提交数据，但PUT制定了资源在服务器上的位置，常用在修改数据HEAD方法：只请求页面的首部信息DELETE方法：删除服务器上的资源OPTIONS方法：用于获取当前URL支持的请求方式TRACE方法：用于激活一个远程的应用层请求消息回路CONNECT方法：把请求链接转换到透明的TCP/IP的通道
HTTP状态码
1XX：信息状态码100 continue继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX：成功状态码200 ok正常返回信息201 created请求成功并且服务器创建了新资源202 accepted服务器已经接收请求，但尚未处理
3XX：重定向301 move per请求的网页已经永久重定向302 found临时重定向303 see other临时冲重定向，且总是使用get请求新的url304 not modified自从上次请求后，请求的网页未修改过
4XX：客户端错误400 bad request服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求401 unauthorized请求未授权403 forbidden禁止访问
404 not found找不到如何与url匹配的资源5XX：服务器错误500 internal server error最常见的服务器端的错误503 service unacailable服务器端暂时无法处理请求（可能是过载活维护）
文末
逆水行舟不进则退，所以大家要有危机意识。
同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
