34岁程序员年薪50w，前端面试题总结（js，带你轻松理解前端-Hook机制

7.匹配ip地址

8.匹配用尖括号括起来的以a开头的字符串

9.分割数字每三个以一个逗号划分

10.判断字符串是否包含数字

11.判断电话号码

12.判断是否符合指定格式

13.判断是否符合USD格式

14.JS实现千位分隔符

15.获取 url 参数

16.验证邮箱

17.验证身份证号码

18.匹配汉字

19.去除首尾的’/’

20.判断日期格式是否符合 '2017-05-11’的形式，简单判断，只判断格式

21.判断日期格式是否符合 '2017-05-11’的形式，严格判断（比较复杂）

22.IPv4地址正则

23.十六进制颜色正则

24.车牌号正则

25.过滤HTML标签

26.密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符

27.URL正则

28.匹配浮点数

浏览器/html/css面试题

===============

1.什么是盒模型

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

3.简述src和href的区别

4.什么是css Hack

5.什么叫优雅降级和渐进增强

6.px和em的区别

7.HTML5 为什么只写

8.Http的状态码有哪些

9.一次完整的HTTP事务是怎么一个过程

10.HTTPS是如何实现加密

11.浏览器是如何渲染页面的

12.浏览器的内核有哪些？分别有什么代表的浏览器

13.页面导入时，使用link和@import有什么区别

14.如何优化图像，图像格式的区别

15.列举你了解Html5. Css3 新特性

16.可以通过哪些方法优化css3 animation渲染

17.列举几个前端性能方面的优化

18.如何实现同一个浏览器多个标签页之间的通信

19.浏览器的存储技术有哪些

20.css定位方式

21.尽可能多的写出浏览器兼容性问题

22.垂直上下居中的方法

23.响应式布局原理

25.清除浮动的方法

26.http协议和tcp协议

27.刷新页面，js请求一般会有哪些地方有缓存处理

28.如何对网站的文件和资源进行优化

29.你对网页标准和W3C重要性的理解

30.Http和https的区别

31.data-属性的作用

32.如何让Chrome浏览器显示小于12px的文字

33.哪些操作会引起页面回流（Reflow）

34.CSS预处理器的比较less sass

35.如何实现页面每次打开时清除本页缓存

36.什么是Virtual DOM,为何要用Virtual DOM

37.伪元素和伪类的区别

38.http的几种请求方法和区别

39.前端需要注意哪些SEO

40.的title和alt有什么区别

41.从浏览器地址栏输入url到显示页面的步骤

42.如何进行网站性能优化

43.语义化的理解

44.HTML5的离线储存怎么使用，工作原理能不能解释一下？

45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

46.iframe有那些缺点？

47.WEB标准以及W3C标准是什么?

48.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

49.HTML全局属性(global attribute)有哪些

50.Canvas和SVG有什么区别？

51.如何在页面上实现一个圆形的可点击区域？

52.网页验证码是干嘛的，是为了解决什么安全问题

53.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

54. CSS选择器有哪些？哪些属性可以继承？

55.CSS优先级算法如何计算？

56.CSS3有哪些新特性？

57.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

58.用纯CSS创建一个三角形的原理是什么？

59.常见的兼容性问题？

60.为什么要初始化CSS样式

61.absolute的containing block计算方式跟正常流有什么不同？

62.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

63.display:none与visibility：hidden的区别？

64.position跟display、overflow、float这些特性相互叠加后会怎么样？

65.对BFC规范(块级格式化上下文：block formatting context)的理解？

66.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

67.上下margin重合的问题

68. 设置元素浮动后，该元素的display值是多少？

69.移动端的布局用过媒体查询吗？

70.CSS优化、提高性能的方法有哪些？

71.浏览器是怎样解析CSS选择器的？

72.在网页中的应该使用奇数还是偶数的字体？为什么呢？

73.margin和padding分别适合什么场景使用？

74.元素竖向的百分比设定是相对于容器的高度吗？

75.全屏滚动的原理是什么？用到了CSS的哪些属性？

76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

77. 视差滚动效果？

78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

79.让页面里的字体变清晰，变细用CSS怎么做？

80. position:fixed;在android下无效怎么处理？

81.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

82.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

83.display:inline-block 什么时候会显示间隙？

84. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

85.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

86.style标签写在body后与body前有什么区别？

87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

88.阐述一下CSS Sprites

89. 一行或多行文本超出隐藏

微信小程序开发（持续更新）

=============

​

初识小程序

---

1.注册小程序

2.微信开发者工具

3.小程序与普通网页开发的区别

4.小程序尺寸单位rpx

5.样式导入（WeUI for）

6.选择器

7.小程序image高度自适应及裁剪问题

8.微信小程序长按识别二维码

9.给页面加背景色

10.微信小程序获取用户信息

11.代码审核和发布

12.小程序微信认证

13.小程序申请微信支付

14.小程序的目录解构及四种文件类型

15.小程序文件的作用域

16.小程序常用组件

1.view

2.scroll-view

3.swiper组件

4.movable-view

5.cover-view

6.cover-image

小程序基础

---

17.授权得到用户信息

18.数据绑定

19.列表渲染

20.条件渲染

21.公共模板建立

22.事件及事件绑定

23.引用

24.页面跳转

1.wx.switchTab

2.wx.reLaunch

3.wx.redirectTo

4.wx.navigateTo

5.wx.navigateBack

25.设置tabBar

26.页面生命周期

27.转发分享

小程序高级

---

28.request请求后台接口

29.http-promise 封装

30.webview

31.获取用户收货地址

32.获取地里位置

33.自定义组件

34.微信小程序支付问题

小程序项目实战

---

35.微信小程序本地数据缓存

36.下拉刷新和下拉加载

37.列表页向详情页跳转（动态修改title）

38.客服电话

39.星级评分组件

40.小程序插槽的使用slot

41.模糊查询

42.wxs过滤

43.小程序动画

44.列表根据索引值渲染

45.小程序动态修改class

46.小程序常用框架

47.参数传值的方法

48.提高小程序的应用速度

49.微信小程序的优劣势

50.小程序的双向绑定和vue的区别

51.微信小程序给按钮添加动画

52.微信小程序的tab按钮的转换

53.微信小程序引进echarts

54.APP打开小程序流程

55.小程序解析富文本编辑器

小程序常见bug

---

1.域名必须是HTTPS

2. input组件placeholder字体颜色

3. wx.navigateTo无法跳转到带tabbar的页面

4. tabbar在切换时页面数据无法刷新

5.如何去掉自定义button灰色的圆角边框

6.input textarea是APP的原生组件，z-index层级最高

7.一段文字如何换行

8.设置最外层标签的margin-bottom在IOS下不生效

9.小程序中canvas的图片不支持base64格式

10.回到页面顶部

11.wx.setStorageSync和wx.getStorageSync报错问题

12.如何获取微信群名称？

13.new Date跨平台兼容性问题

14.wx.getSystemInfoSync获取windowHeight不准确

15.图片本地资源名称，尽量使用小写命名

移动端热点问题

=======

1. 1px border问题

2.2X图 3X图适配

3.图片在安卓上，有些设备模糊问题

4.固定定位布局 键盘挡住输入框内容

5.click的300ms延迟问题和点击穿透问题

6.phone及ipad下输入框默认内阴影

7.防止手机中页面放大和缩小

8.flex布局

9.px、em、rem、%、vw、vh、vm这些单位的区别

10. 移动端适配- dpr浅析

11.移动端扩展点击区域

12 上下拉动滚动条时卡顿、慢

13 长时间按住页面出现闪退

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

前端资料汇总

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算

界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算