最后
在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
-
HTML5新特性,语义化
-
浏览器的标准模式和怪异模式
-
xhtml和html的区别
-
使用data-的好处
-
meta标签
-
canvas
-
HTML废弃的标签
-
IE6 bug,和一些定位写法
-
css js放置位置和原因
-
什么是渐进式渲染
-
html模板语言
-
meta viewport原理
视频地址:https://www.bilibili.com/video/BV1sA411n7us/
79.3D视频立方体特效
视频地址:https://www.bilibili.com/video/BV1eZ4y1K7o3/
80.3D背景动画效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ntBm3xDe-1611533633639)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6cccc3c8ad74824a74ba861dda684be~tplv-k3u1fbpfcp-zoom-1.image)]
视频地址:https://www.bilibili.com/video/BV1tK4y1Y771/
81.滑块百分比的有趣应用
视频地址:https://www.bilibili.com/video/BV1V5411h7iZ/
82.纯CSS液体加载特效
视频地址:https://www.bilibili.com/video/BV1Dh41197Lf/
83.CSS悬停效果(只是为了好玩)
视频地址:https://www.bilibili.com/video/BV145411b7RJ/
84.CSS 3D波浪加载特效
视频播放地址:https://www.bilibili.com/video/BV15D4y1m7JG/
85.CSS水波背景动画特效
视频演示地址:https://www.bilibili.com/video/BV1Lf4y1X7Bm/
86.CSS加载文本动画特效
视频地址:https://www.bilibili.com/video/BV1YA411n7xu/
87.服务条款的一种展示特效
视频地址:https://www.bilibili.com/video/BV1vA411E77W/
88.幽灵文字特效
视频地址:https://www.bilibili.com/video/BV17T4y1A7Vg/
89.破碎的玻璃横幅
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2sgPimf1-1611533633646)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/826c56ca089c40678e282013aacc7603~tplv-k3u1fbpfcp-zoom-1.image)]
视频地址:https://www.bilibili.com/video/BV1s5411b78Q/
90.CSS列表项悬停特效
视频地址:https://www.bilibili.com/video/BV1KZ4y1N7nr/
91.方向感应卡悬停效果
视频地址:https://www.bilibili.com/video/BV1Jf4y1D7Lm/
92.发光文字加载特效
视频地址:https://www.bilibili.com/video/BV17A411J7RL/
93.砖石旋转背景动画特效
视频地址:https://www.bilibili.com/video/BV1yv411C7NJ/
94.文字悬停分割特效
视频地址:https://www.bilibili.com/video/BV1RV411m7LQ/
95.按钮涟漪特效
视频地址:https://member.bilibili.com/v2#/upload-manager/article
96.魔幻的滚动视差特效
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1E2yG0mI-1611533633650)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3bdb7460cfb14f70b149d08b61ae5a94~tplv-k3u1fbpfcp-zoom-1.image)]
视频地址:https://www.bilibili.com/video/BV1LK411A7X2/
97.炫酷加载特效(模拟手机信号)
视频地址:https://www.ixigua.com/6882247186009031181/
98.炫酷发光特效
视频地址:https://www.ixigua.com/6882247186009031181/
99.仙境特效
视频地址:https://www.ixigua.com/6883784380632793611/
100.模拟播放暂时特效
视频地址:https://www.ixigua.com/6885309534483513859/
101.新拟物渐变加载特效
视频地址:https://www.ixigua.com/6886389124811457032/
102.使用Vanilla lift.js实现3D视差倾斜效果
视频地址:https://www.ixigua.com/6887878632572715532/
103.3D书籍模型
视频地址:https://www.ixigua.com/6888608009556230667/
104.打工人的撕裂方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1NTfvPtq-1611533633657)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf16e0a8751c484b8a81186d292e63ca~tplv-k3u1fbpfcp-zoom-1.image)]
视频地址:https://www.ixigua.com/6890835336868397572/
105.液体流加载特效
视频地址:https://www.ixigua.com/6891580915374359043/
106.创意视频球特效
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EqPyi1HB-1611533633661)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81b6a79150ba4ba9a7e72512999d7b96~tplv-k3u1fbpfcp-zoom-1.image)]
视频地址: https://www.ixigua.com/6893066211257483784/
107.CSS响应卡片悬停特效
视频地址:https://www.ixigua.com/6893808422605554183/
108.使用Grade.Js自动生成渐变背景颜色
视频地址:https://www.ixigua.com/6894533882432094728/
109.现代CSS按钮悬停效果
视频地址:https://www.ixigua.com/6897449872975200780/
110.无限叠卡特效
视频地址:https://www.ixigua.com/6897450763094753800/
111.使用CSS进行彩色烟雾视频和文本处理
视频地址:https://www.ixigua.com/6898262151455048199/
112.使用 sketch.js 实现彗星特效
视频地址:https://www.ixigua.com/6899588911862022660/
113.文字肖像特效
视频地址:https://www.ixigua.com/6901230535520027143/
114.使用SVG filter创建粘糊糊效果
视频地址:https://www.ixigua.com/6902344348986262024/
115.滑动菜单指示器特效
视频地址:https://www.ixigua.com/6903449899006689804/
117.纯CSS 和 JS 实现泡泡特效
视频地址:https://www.ixigua.com/6904504548409213454/
118.CSS3按钮悬停闪亮特效
视频地址:https://www.ixigua.com/6906066035506414084/
119.css按钮边框渐变发光特效
视频地址:https://www.ixigua.com/6906796258489270788/
120.如何使用 JS 动态更新CSS变量
视频地址:https://www.ixigua.com/6907873173098889731/?&wid_try=1
121.使用gsap scrollTrigger滚动触发CSS动画
最后
中年危机是真实存在的,即便有技术傍身,还是难免对自己的生存能力产生质疑和焦虑,这些年职业发展,一直在寻求消除焦虑的依靠。
-
技术要深入到什么程度?
-
做久了技术总要转型管理?
-
我能做什么,我想做什么?
-
一技之长,就是深耕你的专业技能,你的专业技术。(重点)
-
独立做事,当你的一技之长达到一定深度的时候,需要开始思考如何独立做事。(创业)
-
拥有事业,选择一份使命,带领团队实现它。(创业)
一技之长分五个层次
-
栈内技术 - 是指你的前端专业领域技术
-
栈外技术 - 是指栈内技术的上下游,领域外的相关专业知识
-
工程经验 - 是建设专业技术体系的“解决方案”
-
带人做事 - 是对团队协作能力的要求
-
业界发声 - 工作经验总结对外分享,与他人交流
永远不要放弃一技之长,它值得你长期
信仰持有
。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。