【学习方法】-【css+html】-【浏览器渲染】-【跨域】-【事件循环】-【v8引擎】-【内存原理】-【原型、原型链】-【this、Proxy、Reflect、WeakMap】-【js异步编程方案】-CSDN博客

本文链接：https://blog.csdn.net/CaraYQ/article/details/141780814

文章目录

学习方法
css+html
浏览器渲染
跨域访问原理——解决方案
事件循环v8引擎
v8引擎和内存原理
javascript运行原理
原型链
this、Proxy、Reflect、WeakMap
javascript异步编程方案

学习方法

请添加图片描述
说明：

准备去面试时，复习八股文主要复习与你简历相关的部分
用自己的话术整理八股文
结合自己的经验回答八股文
回答八股文流利
每次复习时，看到问题，就当作面试官现在在问你这个问题，自己先回答再看答案

css+html

seo

请添加图片描述

seo优化操作

请添加图片描述

说明：

h1标签一定要有，搜索引擎会检索网页里面的h1标题。
tdk：页面中对应配置的title、description、keywords
知乎的robots文件

script标签

请添加图片描述

defer属性作用

请添加图片描述

async属性作用

请添加图片描述

面试回答

请添加图片描述
总之，如果这个东西的执行是完全独立的，他不需要依赖dom，也不需要依赖于我们前面的js代码，这种东西我们可以手动加上async，并且将这个东西放在dom最后比较好，也就是说将async所在script标签放在body标签里的最后面

css

css中增加了哪些新特性

请添加图片描述

物理、逻辑、css像素、dpr、ppi、dpi

请添加图片描述
设置100px其实是设置这个东西由100个像素组成

物理像素、逻辑像素

请添加图片描述
假如现在有两个设备，他们大小一样，分辨率分别为320414和640828，那么在生产设备时，前者每英寸的物理像素更少，后者显示的画面更细腻，假如我们现在想写一个100px100px的div，那么这个div在前者设备上展示更大一点，在后者展示更小一点，但是我们希望同样的100px100px的div在不同设备展示的大小是一样的，只是分辨率高的展示的更细腻一点，否则我们需要根据不同的分辨率写不同的代码，根本没法开发，针对这这一问题，浏览器帮我们抽象出来了一个单位——逻辑像素。

dpr: device pixel ratio

请添加图片描述

css像素——dpi、ppi

请添加图片描述

物理像素、逻辑像素面试回答

请添加图片描述

@2x、@3x图像的作用和代码

请添加图片描述
说明：

假如我有一张分辨率为132171的原图片，如果将其放在132171分辨率的手机设备上，可以清楚的展示，没有问题，但是如果手机的分辨率很高，那么显示这张图片时就能看图片上面的像素点，图片展示很粗糙，所以，为了适应不同设备的像素，需要ui提供多个版本的图像资源，这些图像资源分别用@1、@2、@3作为标识，有时候@1不会标识，在ios和安卓中，会自动识别这些图片资源，不需要指定，但是用网页开发的时候不会识别，需要我们手动指定。
如果1个逻辑像素对应1个物理像素，那么设置基本尺寸@1的图像即可；如果1个逻辑像素对应2个物理像素，设置@2；如果个逻辑像素对应3个物理像素，设置@3
pc端是1个逻辑像素对应1个物理像素，所以用@1
使用媒体查询在不同设备上展示不同图像：
（1）使用device-pixel-radio属性进行查询，如果满足device-pixel-radio:2则展示@2，如果为3则暂时@3，但是这不是标准的写法，因此它存在兼容性问题，以下代码仅为兼容谷歌浏览器，兼容其余浏览器的代码见上一张图。（注：only是为了让旧设备不执行这个代码）

【如果面试的时候问你为浏览器兼容性做过哪些事，你也可以回答这个：之前针对不同分辨率设置不同图片，需要进行媒体查询，最开始使用的是dpr，我发现在某些设备上它不能进行媒体查询，媒体查询是有问题的，后来找到了一个办法就是给他加上浏览器前缀，但是后来又发现即使加上浏览器前缀在某些设备上依然有问题，我就去查了一下对应的mdn文档，我发现使用dpr进行媒体查询这种方式是一种非标准的特性，不建议在生产环境使用】
solution特性使用
1dppx：1个逻辑像素对应1个物理像素
2dppx：1个逻辑像素对应2个物理像素
3dppx：1个逻辑像素对应3个物理像素

1px问题原因、解决方案、代码演练

请添加图片描述
在京东的官网上我们可以看到【每满300-30】的边框是根据伪类+transform实现的，他先将边框放大1倍（width:200%;height:200%;），然后使用scale进行缩小

说明：

还可以在文字的外层包裹一层div，或者在文字的上面写一个div标签，然后通过定位使其包裹文字，或者将div标签写在文字所在标签里，使用绝对定位使div包裹文字
此处用的before，用after也是一样的，因为我们用的绝对定位，不管原来位于哪里，都left:0;right:0;

bfc的理解和作用——面试回答

一、什么是bfc
请添加图片描述

浮动、绝对定位（absolute、fixed）的元素、非block boxes的块级容器（如inline- blocks，table- cells，table- captions）、overflow部位visible得block boxes会创建bfc

div是block box，是不会创建bfc的，但是如果给div设置inline-box，他就会创建div，block boxes的特点是独占一行（如div、p、h1），所以inline-box不是block boxes，而是个block container element，block container element里面可以放其他的元素，可以包裹其他的元素

二、bfc的作用
请添加图片描述
在bfc中，（内部）盒子从包含块（父级容器）顶部开始，在垂直方向一个挨着另一个摆放，两个（内部）盒子在垂直方向的距离由margin决定。同一个bfc中的两个相邻的块级盒子会折叠，这就是为什么垂直方向上两个相邻的div，一个margin-bottom为100px，另一个margin-bottom为50px，而它们之间的实际距离为100px而非150px。
三、面试时的回答
请添加图片描述

bfc解决折叠问题的本质

请添加图片描述

bfc解决高度塌陷问题的本质

一、高度塌陷问题演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
     
      background-color: #a3c;
      overflow: auto;
    }

    .item {
     
      width: 200px;
      height: 200px;
      background-color: #18f;
      border: 1px solid #f81;
      float: left;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>

</body>
</html>

高度塌陷问题：3个浮动的元素没有撑起父元素的高度，所以看不见container了
请添加图片描述
绝对定位的元素也存在这个问题

二、如何解决浮动高度塌陷问题：

清除浮动
为父元素（container）设置bfc

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
     
      background-color: #a3c;
      overflow: auto;
      height: auto;/* 不给元素设置高度，元素的高度就是auto */
      /* position: relative; */
    }

    .item {
     
      width: 200px;
      height: 200px;
      background-color: #18f;
      border: 1px solid #f81;
      float: left;
      /* position: absolute; */
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>

</body>
</html>