五指山市网站建设_网站建设公司_Vue_seo优化
2026/1/17 1:36:49 网站建设 项目流程

一、面试经历与个人感悟

面试形式:远程视频面试
影响:省去奔波但缺乏面对面交流的代入感,容易紧张

关键教训:

  1. 重视基础:不要轻视通用业务、项目经历、价值观和软技能的考察

  2. 代码习惯:过度依赖IDE提示可能导致手写代码能力下降,需做到“手到心到”

  3. 面试重点:简历熟悉度 + 底层原理考察

今日感悟:

  • CI/CD概念已深度融入工具和框架

  • 程序员高频操作:Ctrl+C / Cmd+C 与 Ctrl+V / Cmd+V

  • 开发重点从语言本身转向工具链使用(Git→Sourcetree,语言→框架)

  • 高级语言的核心价值是提升开发者效率


二、CSS核心知识点

1. display常用属性
属性值说明
none元素不显示,不占位
block块级元素,前后有换行符
inline内联元素(默认),前后无换行符
inline-block行内块元素(CSS2.1新增)
2. position定位属性
属性值说明
absolute绝对定位,相对于最近的非static父元素
fixed固定定位,相对于浏览器窗口
relative相对定位,相对于自身正常位置
static默认值,无定位,正常文档流
3. margin与padding区别
特性margin(外边距)padding(内边距)
作用对象容器外距离(自身边框到另一个容器)容器内距离(自身边框到内部内容)
取值可为负值不能为负值
典型场景兄弟元素间距父子元素内间距

示例:

html

<!-- margin: box1与box2之间的间距 --> <div class="box1"></div> <div class="box2"></div> <!-- padding: box1内部到box2的间距 --> <div class="box1"> <div class="box2"></div> </div>
4. 纯CSS实现三角形

原理:利用border属性,将元素宽高设为0,设置不同边框颜色与透明度

实现步骤:

  1. 创建带边框的div

  2. 将内部div宽高设为0

  3. 保留一个边框颜色,其他设置为透明

代码示例:

css

.triangle { width: 0; height: 0; border-width: 40px; border-style: solid; border-color: red transparent transparent transparent; }
5. rpx与px换算

在小程序开发中,rpx(responsive pixel)是响应式像素单位,换算关系与屏幕宽度相关:

  • 设计稿通常以750rpx为基准

  • 换算公式:px = rpx * (屏幕宽度 / 750)

  • 物理像素关系取决于设备像素比(DPR)

6. 垂直水平居中方案

推荐方案:Flex布局(最简单直观)

html

<div id="app"> <div class="center">hello world</div> </div> <style> #app { height: 100vh; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } #app .center { width: 300px; height: 300px; } </style>

三、HTTP与网络相关

7. GET与POST深度辨析

表层区别:

特性GETPOST
缓存可缓存不缓存
历史记录保留不保留
书签可收藏不可收藏
数据长度有限制(URL长度)无限制
安全性较低(数据在URL中)相对较高
用途获取数据提交数据

底层本质:

  • GET和POST都是基于TCP的HTTP请求,本质无差别

  • 关键差异在于HTTP协议和浏览器/服务器的实现:

    • GET:浏览器一次性发送header和data,服务器响应200

    • POST:浏览器先发header,服务器响应100 continue,再发data,服务器响应200

  • 虽然GET理论上性能稍优,但实际差异微乎其微,推荐根据语义选择

8. 跨域问题解决方案

开发推荐:本地NGINX反向代理

  • 避免修改后端代码或使用JSONP等复杂方案

  • 配置灵活,模拟生产环境

  • 上线后同域部署自然解决跨域


四、JavaScript核心概念

9. 闭包(Closure)

本质:函数与其词法环境的组合

特性:

  1. 创建私有变量

  2. 延长变量生命周期

  3. 避免全局污染

核心:内部函数可访问外部函数作用域,即使外部函数已执行完毕

10. 前端存储方案对比
特性cookielocalStoragesessionStorage
生命周期可设置过期时间永久(手动清除)会话结束(标签页关闭)
存储位置浏览器+服务器浏览器本地浏览器本地
请求携带每次HTTP请求自动携带不自动携带不自动携带
存储大小~4KB~5-10MB~5-10MB
APIdocument.cookiesetItem/getItemsetItem/getItem

localStorage使用示例:

javascript

const db = window.localStorage; db.setItem('name', '李四'); db.setItem('age', 22); // 存储数字会自动转为字符串 console.log(db.getItem('name')); // '李四' console.log(db.getItem('age')); // '22' // 存储对象需序列化 const obj = { key: 'value' }; localStorage.setItem('obj', JSON.stringify(obj)); const retrieved = JSON.parse(localStorage.getItem('obj'));
11. 箭头函数 vs 普通函数
特性箭头函数普通函数
this绑定继承上下文this(不可改变)动态绑定(调用者决定)
构造函数不可用作构造函数(无new)可用作构造函数
arguments不绑定,使用rest参数(...args)绑定arguments对象
原型无prototype属性有prototype属性
yield不能用作Generator函数可用作Generator函数
简洁性语法更简洁语法相对冗长

关键记忆点:箭头函数的this在定义时确定且永不改变,普通函数的this由调用方式决定。

12. var、let、const区别
特性varletconst
作用域函数作用域块级作用域块级作用域
变量提升提升且初始化undefined提升但不初始化(暂时性死区)提升但不初始化
重复声明允许不允许不允许
值修改可修改可修改不可修改(引用类型可修改属性)
13. call、apply、bind方法比较

共同点:改变函数执行时的this指向

区别:

  • callfunc.call(thisArg, arg1, arg2, ...)- 参数逐个传递

  • applyfunc.apply(thisArg, [argsArray])- 参数以数组传递

  • bindfunc.bind(thisArg, arg1, arg2, ...)- 返回新函数,不立即执行

使用场景:

  • call:参数数量明确时

  • apply:参数为数组或伪数组时

  • bind:需要延迟执行或创建偏函数时


五、总结与建议

面试准备重点:

  1. 基础扎实:CSS盒模型、定位、布局必须熟练掌握

  2. 原理深入:不要只记表面区别(如GET/POST),理解底层机制

  3. 手写能力:减少对IDE提示的依赖,能徒手实现常见功能

  4. 项目清晰:对简历上的项目经历要了如指掌

  5. 工具链:熟悉现代前端开发工具和流程(CI/CD、Git等)

心态调整:

  • 视频面试需提前熟悉技术环境

  • 紧张时深呼吸,将问题拆解回答

  • 诚实面对不懂的问题,展示学习能力

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询