H5C3面试（一）

目录

1.div水平垂直居中的方法

2.常见定位方案，BFC概念

3.opacity、visibility、display优劣

4.覆盖元素宽度的方法

5.移动端 1px 边框问题

6.[‘1’, ‘2’, ‘3’].map(parseInt)

7.防抖节流

8.javascript 执行机制

9.cookie 和 token

10.CSS3新特性？HTML5新特性？语义化？

11.知道 css 的 content 属性吗？有什么应用？清除浮动方法列举一下

12.Quirks 模式是什么？它和 Standards 模式有什么区别？

13.渐进增强？优雅降级？为什么用多域名存储网站资源更有效？

14.src / href 区别？Webp图片格式？微格式？Sass、Less 是什么？ 

15.刷新网页，一次 js请求哪些地方会缓存？

16.优化图片加载速度？做好 SEO 需要考虑什么？

17.rgba() 和 opacity 的透明效果有什么不同？z-index？

18.盒子模型？水平垂直居中？css 中 link 和 @import 的区别？

19.圣杯布局？双飞翼布局？（两栏等宽，中间自适应）

20.怎么实现对象深拷贝

21.数组去重

22.剩余参数 与 扩展运算符

23.如何判断数组与对象

---

1.div水平垂直居中的方法

1. // 不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%)，当前div的父级添加相对定位（position: relative;）
2. // 确定当前div的宽度，margin值为当前div宽度一半的负值
3. // 绝对定位下top left right bottom 都设置0
4. // flex布局方法：当前div的父级添加flex css样式

// 不确定当前div的宽度和高度
// 采用 transform: translate(-50%,-50%)
// 当前div的父级添加相对定位（position: relative;）
div{
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}
// 确定了当前div的宽度，margin值为当前div宽度一半的负值
div{
    width:600px;
    height: 600px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-300px;
}
// 绝对定位下top left right bottom 都设置0
div.child{
    width: 600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
// flex布局方法：当前div的父级添加flex css样式
.box{
    height:800px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ccc;
}

2.常见定位方案，BFC概念

• 
• BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流
• 可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部
• 触发 BFC 特性如下：

1. body 根元素
2. 浮动元素：float 除 none 以外的值
3. 绝对定位元素：position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)

• BFC 特性及应用（非常重要）：

1. 同一个 BFC 下 外边距 会发生折叠，避免外边距的重叠，可以将其放在不同的 BFC 容器中
2. BFC 可以包含浮动的元素，给父级添加 overflow: hidden 触发 BFC，防止子元素浮动导致的父元素不被撑开
3. BFC 可以阻止元素被浮动元素覆盖，文字环绕效果文字本身不会被遮挡，但是他的div会被遮挡，给被遮挡的div添加 overflow: hidden，就能防止遮挡  这个方法可以用来实现两列自适应布局，给左边的宽度固定浮动，右边的内容 overflow: hidden

3.opacity、visibility、display优劣

• 

4.覆盖元素宽度的方法

• 在不改变当前代码的情况下，使这张图片的宽度为300px？代码如下：
• 

1. 设置最大宽度：max-width: 300px
2. 进行缩放：transform: scale(0.625, 1)
3. 样式覆盖：width:300px!important
4. js方法：document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")

5.移动端 1px 边框问题

• 边框变粗的原因：css中的1px并不等于移动设备的1px，不同手机不同像素密度
• 在window对象中有一个 devicePixelRatio 属性， devicePixelRatio = 物理像素 / 独立像素
• https://www.cpengx.cn/p/461.html

6.[‘1’, ‘2’, ‘3’].map(parseInt)

• 

 

7.防抖节流

• 通过闭包保存一个标记来保存 setTimeout 返回的值，每当用户输入的时候把前一个 setTimeout clear 掉，然后又创建一个新的 setTimeout，这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数了

function debounce(fn, interval = 300) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    };
}

8.javascript 执行机制

• 第一轮事件循环流程分析如下：
• 整体 script 作为 第一个宏任务 进入主线程，遇到console.log，输出1
• 遇到 setTimeout，被分发到 宏任务Event Queue中，记为setTimeout1
• 遇到 process.nextTick()，被分发到 微任务Event Queue中，记为process1
• 遇到 Promise，new Promise直接执行，输出7，then 被分发到 微任务Event Queue中，记为then1。
• 遇到setTimeout，被分发到 宏任务Event Queue中，记为setTimeout2

宏任务Event Queue	微任务Event Queue
setTimeout1	process1
setTimeout2	then1

• 上表是第一轮事件循环宏任务结束时各 Event Queue 的情况，此时已经输出 1 和 7
• 我们发现了 process1 和 then1 两个微任务
• 执行 process1，输出 6
• 执行 then1，输出 8
• 第一轮事件循环正式结束，这一轮的结果是输出1，7，6，8
• 第二轮时间循环从 setTimeout1 宏任务开始：
• 首先输出 2
• 接下来遇到了 process.nextTick()，将其分发到 微任务 Event Queue 中，记为 process2
• new Promise立即执行输出 4，then分发到 微任务 Event Queue 中，记为 then2

宏任务Event Queue	微任务Event Queue
setTimeout2	process2
	then2

• 第二轮事件循环宏任务结束，有 process2 和 then2 两个微任务
• 输出 3，输出 5
• 第二轮事件循环结束，输出 2，4，3，5
• 第三轮事件循环开始，此时只剩 setTimeout2 了，输出 9
• 将 process.nextTick() 分发到 微任务 Event Queue 中，记为 process3
• 直接执行 new Promise，输出 11
• 将 then 分发到 微任务 Event Queue 中，记为 then3

宏任务Event Queue	微任务Event Queue
	process3
	then3

• 第三轮事件循环宏任务执行结束，执行两个微任务 process3 和 then3
• 输出 10，输出 12
• 第三轮事件循环结束，第三轮输出 9，11，10，12
• 整段代码，共进行了三次事件循环，完整的输出为 1，7，6，8，2，4，3，5，9，11，10，12

console.log('1');
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

• https://www.cpengx.cn/p/478.html

9.cookie 和 token

• cookie：登陆后后端生成一个sessionid放在cookie中返回给客户端，并且服务端一直记录着这个sessionid，客户端以后每次请求都会带上这个sessionid，服务端通过这个sessionid来验证身份之类的操作。所以别人拿到了cookie拿到了sessionid后，就可以完全替代你
• token：登陆后后端不返回一个token给客户端，客户端将这个token存储起来，然后每次客户端请求都需要开发者手动将token放在header中带过去，服务端每次只需要对这个token进行验证就能使用token中的信息来进行下一步操作

 

• 如果被xss攻击了，不管是token还是cookie，都能被拿到，所以对于xss攻击来说，cookie和token没有什么区别。但是对于csrf来说就有区别了：

1. cookie：用户点击了链接，cookie未失效，导致发起请求后后端以为是用户正常操作，于是进行扣款操作
2. token：用户点击链接，由于浏览器不会自动带上token，所以即使发了请求，后端的token验证不会通过，所以不会进行扣款操作

10.CSS3新特性？HTML5新特性？语义化？

• CSS3新特性：
• 圆角、阴影、旋转、媒体查询、transform
  新增伪类标签：p:nth-child(2)
  :enabled、:disabled 控制表单控件的禁用状态
  :checked，单选框或复选框被选中
• HTML5新特性：
• 音频视频、语义化更好的内容标签（header,nav,footer,aside,article,section）
  画布（Canvas）、本地离线存储（localStorage、sessionStorage）
  表单控件，calendar、date、time、email、url、search、地理API
• 语义化：

1. 一个段落， 应该用

   标签来修饰， 标题就应该用 标签等。符合文档语义的标签

2. 页面样式加载失败后，依旧能呈现出清晰地结构，有利于SEO优化、解析、维护

11.知道 css 的 content 属性吗？有什么应用？清除浮动方法列举一下

• content 属性用在 before/after 伪元素上，用来插入生成内容，最常见的应用是 清除浮动

.clearfix:after { 
    content:""; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:both; } 
.clearfix { *zoom:1; }

12.Quirks 模式是什么？它和 Standards 模式有什么区别？

• 怪异模式 / 标准模式：

1. 给元素设置宽高：标准模式指 元素内容的宽高，怪异模式包含了 padding / border
2. 设置行内元素宽高：标准模式设置宽高不生效，怪异模式生效
3. margin:0 auto设置水平居中：标准模式下生效，怪异模式失效
4. 设置百分比高度：标准模式父元素高度由内容决定，父子元素都得设置，只设置子元素不可以

13.渐进增强？优雅降级？为什么用多域名存储网站资源更有效？

• 渐进增强：先写低版本浏览器，保证最基本的功能，再逐渐增加样式交互追加功能等提高用户体验
• 优雅降级：先写完整功能，然后开始针对低版本浏览器进行兼容处理
• 节约主域名的连接数，优化页面响应速度，节约 cookie 带宽，防止安全问题

14.src / href 区别？Webp图片格式？微格式？Sass、Less 是什么？ 

• src：解析到src，浏览器会 暂停 其他资源的下载，所以 js脚本要放在底部
• href：建立当前文档和外部资源的联系，解析到href，浏览器会 并行 下载资源，不影响剩余文档加载

 

• Webp图片格式：谷歌开发，质量相同的情况下，Webp格式的体积是JPEG格式的 2/3（互联网新事物）
• 微格式：利用 html/class/rel 等标签给传统的 HTML标签增加语义，方便人和机器一起阅读

 

• Sass、Less：CSS预处理器，动态样式语言，给css赋予了变量、继承等概念，可在客户端运行，也可在服务器端（node）
• 使用目的：结构清晰，便于扩展，屏蔽了浏览器的语法差异

15.刷新网页，一次 js请求哪些地方会缓存？

• dns 缓存，cdn 缓存，浏览器缓存，服务器缓存

1. 域名系统 / DNS缓存：当DNS 返回正确IP地址，系统会把结果暂时存储，并且设置失效时间，减少对 DNS服务器的访问，但是如果 DNS服务器修改了，失效时间又没过，需要手动清理本地DNS缓存
2. CDN缓存：为了解决网络延迟，原服务器→CDN节点→用户，用户从CDN节点缓存中读取数据，此时浏览器缓存资源过期，就会访问CDN缓存，而不是服务器缓存
3. 浏览器缓存：浏览器在第一次访问时，会从服务器获得全部资源，根据响应头决定是否缓存到本地，第二次在访问的时候就不需要重新访问服务器，缺点是：无法及时更新得到服务器最新资源
4. 服务器缓存：第一个用户访问，将资源存储在硬盘上，第二个用户访问就从缓存寻找资源对应的硬盘位置，而不是要和数据库进行交互，浪费时间

16.优化图片加载速度？做好 SEO 需要考虑什么？

• 优化图片加载速度：

1. 图片懒加载：设置滚动事件，需要的时候再下载
2. 图片预加载：PPT/相册，优先下载前一张后一张
3. CSS Sprite：图片精灵技术

• 做好 SEO 需要考虑什么：

1. mate标签优化：主题、描述等，关键词一般设置 5个上下，SEO最重要的工作之一就是关键词分析
2. 链接数目：网站外部链接越多，会被浏览器认为越重要，越靠前
3. 个别搜索引擎排名机制：比如百度竞价排名，雅虎收录网站付费展示

17.rgba() 和 opacity 的透明效果有什么不同？z-index？

• rgba()：仅设置元素本身透明度，不可继承（比如背景透明）
• opacity：作用于元素及元素内部元素
• 浏览器默认的 inline-block 元素（拥有内在尺寸，可设置高宽，不会自动换行）： 、 、 、 、
• 外边距合并：相邻的盒子（兄弟关系/祖先关系）的外边距可以合成一个外边距
• 让DOM元素不显示：display：none，宽高0，透明度0，z-index：-1000
• 被点击访问过的超链接样式不在具有 hover 和 active 了（link,visited,hover,active）
• !important > id > class > tag，important 比 内联优先级高
• z-index问题：给父级添加 position:relative，相对定位 z-index才会生效

18.盒子模型？水平垂直居中？css 中 link 和 @import 的区别？

• 盒子模型：
• 水平垂直居中（主要是绝对定位法）：

1. 不确定宽高：子绝父相，left:50%,transform:translate(-50%,-50%)
2. 确定宽高：子绝父相，left：50%，margin-left/margin-top：-100px
3. margin：子绝父相，left/bottom 都设置为0 margin：auto
4. flex布局：给父元素设置：display：flex / align-items：center / justify-content：center

• link 和 @import 的区别：

1. link：html标签，无兼容性问题，引入文件和文档同时加载，优先级高于@import（并行加载，优先级高）
2. @import：css标签，ie5以上才识别，引入文件加载完成后，才会继续向下加载文档（阻塞加载）

• display:none 与 visibility:hidden 的区别：
• visibility:hidden：使用之后元素所占的空间仍然存在，display:none：完全隐藏

19.圣杯布局？双飞翼布局？（两栏等宽，中间自适应）

• 三栏务必先写中间盒子：width:100%，两边盒子：width: 200px
• 给出每个盒子的样式：父盒子：overflow:hidden，左中右子盒子：float:left;
• 利用负边距布局让所有盒子上去：左盒子：margin-left:-100%，右盒子：margin-left：-200px
• 中间盒子内容被压住了：父盒子：.container{ padding: 0 200px;}
• 子盒子：相对定位+左右移动 .left{ position: relative; left: -200px;}
• .right{position: relative;right: -210px;

20.怎么实现对象深拷贝

let o1 = {a:{b:1}}
let o2 = JSON.parse(JSON.stringify(o1))

function deepCopy(s) {
    const d = {}
    for (let k in s) {
        if (typeof s[k] == 'object') {
            d[k] = deepCopy(s[k])
        } else {
            d[k] = s[k]
        }}
    return d
}

21.数组去重

// ES5
function unique(arry) {
    const temp = []
    arry.forEach(e => {
        if (temp.indexOf(e) == -1) {
            temp.push(e)
        }
    })
    return temp
}
// ES6
function unique (arr) {
   return Array.from(new Set(arr))
}

22.剩余参数 与 扩展运算符

• 剩余参数 将一个不定数量的参数表示为一个数组
• 扩展运算符 将数组或对象转为逗号分隔的参数序列

23.如何判断数组与对象

Array.isArray([]) // true
Array.isArray({}) // false
typeof [] // "object"
typeof {} // "object"
Object.prototype == [].__proto__ // false
Object.prototype == {}.__proto__ // true
Array.prototype == [].__proto__ // true
Array.prototype == {}.__proto__ // false