前端编程面试题：HTML、CSS 与 JS 综合

xiaoshi 05-30 57 抢沙发

默认

摘要： ...

前端面试必备：HTML、CSS与JS综合实战题解析

前端开发岗位的面试中，HTML、CSS和JavaScript的综合应用能力是考察重点。本文将分享几道典型的前端面试题，帮助你全面准备技术面试。

响应式布局实现方案

现代前端开发中，响应式设计已成为标配。面试官常会考察候选人实现响应式布局的能力。

一个常见的题目是："如何实现一个三栏布局，左右两栏宽度固定为200px，中间栏自适应宽度，并且在屏幕宽度小于600px时变为上下堆叠布局？"

解决方案可以结合Flexbox和媒体查询：

.container {
  display: flex;
  min-height: 100px;
}
.left, .right {
  flex: 0 0 200px;
  background: #ccc;
}
.middle {
  flex: 1;
  background: #eee;
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .left, .right, .middle {
    flex: 1;
    width: 100%;
  }
}

DOM操作与事件处理

JavaScript的DOM操作能力是前端基础。典型问题如："实现一个按钮，点击后动态添加列表项，并且每个列表项都有删除功能。"

完整实现代码如下：

<button id="addBtn">添加项目</button>
<ul id="list"></ul>

<script>
  const addBtn = document.getElementById('addBtn');
  const list = document.getElementById('list');
  let count = 1;

  addBtn.addEventListener('click', () => {
    const li = document.createElement('li');
    li.textContent = `项目 ${count++}`;

    const delBtn = document.createElement('button');
    delBtn.textContent = '删除';
    delBtn.addEventListener('click', () => {
      li.remove();
    });

    li.appendChild(delBtn);
    list.appendChild(li);
  });
</script>

CSS选择器优先级问题

理解CSS选择器优先级对解决样式冲突至关重要。面试题可能问："以下选择器的优先级顺序是什么？"

示例选择器：

#header .nav li a:hover
div#header ul.nav > li > a
.nav li a.active
a

优先级从高到低依次是：

div#header ul.nav > li > a (1ID+2类+3元素)
#header .nav li a:hover (1ID+1类+3元素+伪类)
.nav li a.active (2类+2元素)
a (1元素)

闭包的实际应用

JavaScript闭包是面试高频考点。实际问题可能是："利用闭包实现一个计数器函数，每次调用返回递增的数字。"

解决方案：

function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

跨域问题解决方案

前端开发中跨域问题是必考点。面试官可能问："列举你知道的跨域解决方案并简要说明原理。"

常见方案包括：

JSONP - 利用<script>标签不受同源策略限制的特性
CORS - 服务器设置Access-Control-Allow-Origin响应头
代理服务器 - 后端转发请求绕过浏览器限制
postMessage - 跨文档通信API
WebSocket - 不受同源策略限制的全双工通信协议

CSS动画性能优化

前端性能优化中，CSS动画是重点。面试问题可能是："如何优化CSS动画性能？"

关键优化点：

使用transform和opacity属性，它们不会触发重排
避免在动画中使用height、width、margin等会触发重排的属性
使用will-change属性预先告知浏览器哪些元素会变化
减少动画元素的数量和复杂度
使用requestAnimationFrame替代setTimeout/setInterval

ES6+新特性应用

现代JavaScript特性是考察重点。典型题目："使用ES6+语法重构以下代码..."

原始代码可能是：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  console.log('Hello, ' + this.name);
};

重构后：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

前端安全防护措施

安全问题不容忽视。面试可能问："如何防范XSS攻击？"

主要防护措施：

对所有用户输入进行转义处理
使用CSP(内容安全策略)限制脚本执行
避免使用innerHTML，优先使用textContent
对特殊字符进行编码
使用HttpOnly标记cookie防止JavaScript访问

综合实战题目

最后来看一个综合题目："实现一个图片懒加载组件，要求：

初始只加载视口内的图片
滚动时动态加载进入视口的图片
图片加载时显示占位图
支持响应式图片"

解决方案核心代码：

class LazyLoad {
  constructor(selector) {
    this.images = document.querySelectorAll(selector);
    this.init();
    this.addScrollListener();
  }

  init() {
    this.images.forEach(img => {
      img.setAttribute('data-src', img.src);
      img.src = 'placeholder.jpg';
      if (this.isInViewport(img)) {
        this.loadImage(img);
      }
    });
  }

  isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top <= window.innerHeight &&
      rect.bottom >= 0
    );
  }

  loadImage(img) {
    img.src = img.getAttribute('data-src');
    img.onload = () => {
      img.removeAttribute('data-src');
    };
  }

  addScrollListener() {
    window.addEventListener('scroll', () => {
      this.images.forEach(img => {
        if (img.hasAttribute('data-src') && this.isInViewport(img)) {
          this.loadImage(img);
        }
      });
    });
  }
}

new LazyLoad('img.lazy');