前端3+1-34、35、36_前端1 3-1 = 2 5-2= 3 7-3 =4 9-4 =5-优快云博客

本文链接：https://blog.youkuaiyun.com/a037777777/article/details/122695870

本文介绍了前端开发中的关键技巧，包括HTML与XHTML的区别、CSS布局实现、JavaScript常见问题及解决方案，同时也深入探讨了前端性能优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

34 html

题目：standards模式和quirks模式有何区别
答案：
1、standards模式；标准模式；width = content；box-sizing = content-box；一般浏览器默认这个
2、quirks模式；怪异模式；width = content + padding + border；box-sizing = border-box；

css

题目：浏览器如何判断元素是否和某个css选择器匹配
答案：

原理
首先，与最右边选择器匹配的元素生成一个初始集合》然后从右往左匹配，若该集合中元素的父元素没有跟右2匹配，则删除该元素；否则保留该元素》继续向右匹配，直至完全匹配》这时留在集合中的元素就是与css选择器匹配的元素。
例子
div.ready #wrapper > .bg-red
先把所有元素 class 中有 bg-red 的元素拿出来组成一个集合》然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去》再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 div 且 class 中有 ready 的元素，就把原来的元素从集合中删去》至此这个选择器匹配结束，所有还在集合中的元素满足。大体就是这样，不过浏览器还会有一些奇怪的优化。

js

题目：用canvas实现520表白
答案：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas画爱心</title>
</head>

<body>
  <canvas id="heart"></canvas>
  <script>
    const Heart = function (ctx, x, y, a) {
      this.ctx = ctx;
      this.x = x;
      this.y = y;
      this.a = a;
      this.vertices = [];
      for (let i = 0; i < 50; i++) {
        var step = i / 50 * (Math.PI * 2); //设置心上面两点之间的角度，具体分成多少份，好像需要去试。
        var vector = {
          x: this.a * (16 * Math.pow(Math.sin(step), 3)),
          y: this.a * (13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
        }
        this.vertices.push(vector);
      }
    }
    Heart.prototype.draw = function () {
      this.ctx.beginPath();
      this.ctx.translate(this.x, this.y);
      this.ctx.rotate(Math.PI);
      for (let i = 0; i < 50; i++) {
        const {
          x,
          y
        } = this.vertices[i];
        this.ctx.lineTo(x, y);
      }
      this.ctx.fillStyle = 'lightBlue';
      this.ctx.fill();
    }

    const c = document.getElementById('heart');
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    ctx = c.getContext('2d');
    c.onmousedown = function (e) {
      const x = e.offsetX;
      const y = e.offsetY;
      const heart = new Heart(ctx, x, y, 6);
      heart.draw();
    }
  </script>
</body>

</html>

其它

题目：啥是技术债务
答案：代码写好就提交，测试不足，后续可能会引发许多问题‘债务’。
【代码写好就提交，意味着欠债的开始。稍微欠点儿技术债的确可以加速开发速度，但前提是事后及时重写代码。如果只借不还，后果很危险。在不准确的代码上所花的每一分钟，都算是技术债的应付利息。不稳固、脆弱的代码实现所引发的债务负担，会使整个工程组织陷入裹足不前的艰难境地。】

35 html

题目：用div模拟实现textarea
答案：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用div模拟实现textarea</title>
  <style>
    .edit-box {
      width: 100px;
      height: 70px;
      padding: 10px;
      border: 1px solid black;
      border-radius: 10px;
      resize: both;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div class="edit-box" contenteditable></div>
</body>

</html>

css

题目：用flex实现三栏布局-两边固定，中间自适应
答案：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex实现三栏布局，两边固定，中间自适应</title>
  <style>
    /* 重置 */
    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      margin: 0;
    }

    .box {
      display: flex;
      width: 100%;
      height: 100%;
    }

    .left,
    .right {
      height: 100%;
      flex-basis: 50px;
      background-color: lightblue;
    }

    .middle {
      height: 100%;
      flex-grow: 1;
      background-color: lightseagreen;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</body>

</html>

js

题目：解释10.toFixed(10)为啥报错
答案：js把 . 解析成了小数点，而不是对函数的调用，所以报错了；》

(10).toFixed(10);
10..toFixed(10);
10 .toFixed(10);
10.0.toFixed(10);

其它

题目：谈谈前端性能优化方案
答案：

前端性能定义
1、加载性能
白屏时间；从输入网址到页面开始显示的时间
首屏时间；从输入网址到页面完全渲染显示的时间

<script>
// 获取首屏时间 or 白屏时间？
window.onload = function(){
  // 法一
  new Date() - performance.timing.navigationStart
  // 法二
  performance.timing.domLoading - performance.timing.navigationStart
}
</script>

2、运行性能
打开网站，按f12，点击性能，点击左上角圆点，开始录制。模仿用户在网站上进行一些操作，然后回到f12-性能页面，点击中止，这时就可以看到运行时的性能变化。红色-有掉帧，绿色-FPS很好

优化方案
加载优化
1、减少http请求
2、使用http2
3、使用服务端渲染
4、静态资源使用CDN-内容分发网络
5、将css放在文件头部，js放在文件底部
6、使用字体图标代替图片图标
7、善用缓存，不重复加载相同的资源
8、压缩文件
9、图片优化：图片延迟加载、响应式图片、调整图片大小、降低图片质量、尽量用css3代替图片、使用webp图片
10、通过webpack按需加载代码，提取第三方库代码，减少es6转为es5都冗余代码
运行优化
11、减少重绘重排
12、使用事件委托
13、注意程序局部性
14、合理使用switch
15、查找表
16、避免页面卡顿
17、使用requestAnimationFrame 实现视觉优化
18、使用web worker
19、使用位操作
20、不要覆盖原生方法
21、降低css选择器的复杂性
22、使用flexbox而不是早期的布局模型

36 html

题目：HTML和XHTML有何区别
答案：XHTML更严格，比如它的标签必须闭合，它的标签名必须小写，它的标签必须正确嵌套，它的标签必须被包裹在根元素上

css

题目：写出主流浏览器内核私有属性前缀
答案：
1、chrome、safari、新版Opera：内核webkit；前缀-webkit-
2、firefox：内核Gecko；前缀-moz-
3、旧版opera：内核Presto；前缀-o-
4、ie、edge：内核Trident；前缀-ms-

js

题目：手写幻灯片效果
答案：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手写幻灯片效果</title>
  <style>
    /* js实现 */
    .box {
      width: 100px;
      height: 70px;
    }

    #img {
      width: 100%;
      height: 100%;
    }

    /* css3实现 */
    @keyframes loop {
      0% {
        background-image: url('./imgs/1.jpg');
      }

      50% {
        background-image: url('./imgs/2.jpg');
      }

      100% {
        background-image: url('./imgs/3.jpg');
      }
    }

    .img {
      width: 100px;
      height: 70px;
      animation: loop 3s infinite;
      background-size: 100% 100%;
    }
  </style>
</head>

<body>
  <h3>js实现</h3>
  <div class="box">
    <img id="img" src="./imgs/1.jpg" alt="">
  </div>
  <script>
    const img = document.getElementById('img');
    const imgs = [
      './imgs/1.jpg',
      './imgs/2.jpg',
      './imgs/3.jpg',
    ];
    let times = 0;
    setInterval(() => {
      img.src = imgs[times];
      times++;
      if (times === 3) {
        times = 0;
      }
    }, 1000);
  </script>
  <!-- ********************* -->
  <h3>css3实现</h3>
  <div class="img"></div>
</body>

</html>

其它：

题目：对前端安全有啥了解，说说XSS和CSRF
答案：
常见的2种前端安全问题：

XSS
定义：跨站脚本攻击。通过向网页注入恶意脚本。
例子：比如，攻击者在博客网站发布一篇文章，在输入的内容中输入了一段非法脚本代码，当文章发布后，其它用户访问这篇文章时，这段非法脚本就会执行。这段非法脚本可能会使页面错乱，也可能去强制获取cookie而造成用户数据泄露等。
危害：
1、通过document.cookie盗取cookie。
2、使用js或css破坏页面正常结构样式。
3、流量劫持-通过点击某段代码强制跳转到某个页面。
4、Dos攻击-通过伪造合理的客户端请求来占据服务器资源，从而使用户拿不到服务器的响应。
5、利用iframe等方式，伪造用户身份去执行一些操作。
6、利用可被攻击的域受到其它域信任的特点，以受信任的身份去执行一些操作。
解决：【原理-不能直接将用户输入传到服务器，需要先过滤处理一些数据】
1、设置HttpOnly
设置后，浏览器会禁止页面的js访问带有HttpOnly属性的cookie
2、CSP内容安全策略
设置后，浏览器只允许某些内容被这个页面加载和运行
3、对用户输入进行编码、解码、过滤
即对用户输入，传到服务器前进行编码，接收响应后展示前进行解码；同时要过滤一些非法字符，比如对<、>、script这种进行转码
4、对用户输入设置一些限制检查
5、验证码
CSRF
定义：跨站请求伪造。网站b通过伪造网站a用户，向网站a服务器发送非法请求。
例子：用户在浏览器上登录了网站a，网站a产生cookie并保存在浏览器》用户在网站a点击了一个恶意连接，打开了一个非法网站》非法网站伪造用向网站a的服务器发送了请求》由于是向网站a发送的请求，所以会携带网站a的cookie，它在服务器就拥有了用户的权限去非法操作一些数据
危害：用户登录状态被盗用，冒充用户去操作修改数据
解决：
1、验证码
2、验证refer - http请求头有个refer字段，值=请求来源，服务器可以对这个进行验证，判断是否非法来源；但是请求头也容易伪造
3、cookie设置sameSite - 设置后，只有同源网站请求才会带上cookie
4、添加token验证 - 服务器响应浏览器时会返回一个token，浏览器每次请求都要加上token和cookie，服务器通过token来判断是否非法请求，因为token是无法伪造的