「查缺补漏」我的网易前端秘籍-如何准备面试

前言

开门见山，这篇文章，适合「初级前端」，如果你还在校招的话，或者还在求职的话，可以看看本文，找一找灵感，希望对你们有帮助呀。

先说一下最近个人情况：2020年8月底已经拿到网易有道offer, 这算是我的第一份web前端工作吧，一直以来都是自学前端的，走过很多的弯路，之前的技术栈是Vue.js,目前往react方向走。

这是我的网易面经????「面经」你可能需要的三轮网易面经

我的感受就是，自己一边梳理知识点，一边总结归纳，收获可能更大，所以打算把我梳理的部分分享出来，篇幅有点长，大家见谅呀。

覆盖的点不是很全，分享给你们，希望你们秋招一切顺利，offer收割机❤️❤️❤️

HTML系列

你是如何理解 HTML 语义化的？

让页面内容结构化，它有如下优点

1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
2、有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
3、方便其他设备解析，如盲人阅读器根据语义渲染网页
4、有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐

如：

代表头部
代表超链接区域
定义文档主要内容
可以表示文章、博客等内容
通常表示侧边栏或嵌入内容
代表尾部

可以跟面试官讲的更具体一点????

• 第一个是荒野阶段，那时候前端的代码主要是后台来写的，所以那个时候写的代码主要是用table来布局的。

• 第二阶段---美工阶段，这个时候就有专门的人来前端代码了，这个阶段的布局主要是DIV+CSS布局，但是呢有一个问题，就是不够语义化。

• 第三个阶段-->> 前端阶段，也就是利用具有语义的标签，比如p,h1,h2,article，header，nav，main，aside，footer这些标签，使用这些正确的标签，可以表达正确的内容，也利于开发和维护。

meta viewport 是做什么用的，怎么写？

通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口

meta有两个属性name 和 http-equiv

name

• keywords(关键字)   告诉搜索引擎，你网页的关键字

• description(网站内容描述)   用于告诉搜索引擎，你网站的主要内容。

• viewport(移动端的窗口)  后面介绍

• robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引

• author(作者)

• generator(网页制作软件）

• copyright(版权)

http-equiv

❝

http-equiv顾名思义，相当于http的文件头作用。

❞

有以下参数：

• content-Type 设定网页字符集

  //旧的HTML，不推荐 //HTML5设定网页字符集的方式，推荐使用UTF-8

• X-UA-Compatible(浏览器采用哪种版本来渲染页面)

  //指定IE和Chrome使用最新版本渲染当前页面

• cache-control（请求和响应遵循的缓存机制）

• expires(网页到期时间)

你用过哪些 HTML 5 标签？

有
、
、
、
、

「canvas画布」

const ctx = canvas.getContext('2d');  // 获取它的2d上下文
ctx.fillStyle = 'green';    // 设置笔刷的填充色
ctx.fillRect(10, 10, 100, 100);  //  利用画笔范围,矩形，比如圆

video

autoplay 布尔属性；视频马上自动开始播放，不会停下来等着数据载入结束。

「controls」   提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

「loop」 布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方。

「track」标签表示的是字幕

「poster」 表示的是封面

H5 是什么？-->>移动端页面

h5一般指的是开一个WebView来加载页面吧，

「WebView是一种控件，它基于webkit引擎，因此具备渲染Web页面的功能。」

基于Webview的混合开发，就是在 Anddroid (安卓)/(苹果)原生APP里，通过WebView控件嵌入Web页面。

很多APP都是外边套原生APP的壳，内容是H5页面(基于html+css+js的Web页面)。现在的移动端混合开发软件，如果对于交互渲染要求不是特别高的项目，基本都是这么玩的。

「WebView作用」

• 显示和渲染Web页面

• 直接使用html文件（网络上或本地assets中）作布局

• 可和JavaScript交互调用

HTML5新特性：

1. 本地存储特性

2. 设备兼容特性 HTML5提供了前所未有的数据与应用接入开放接口

3. 连接特性 WebSockets

4. 网页多媒体特性 支持Audio Video SVG Canvas WebGL CSS3

5. CSS3特性

增加拖放API、地理定位、SVG绘图、canvas绘图、Web Worker、WebSocket

区分普通显示屏和高清屏

• 当devicePixelRatio值等于1时（也就是最小值），那么它普通显示屏。

• 当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏。

• 不同像素的图利用媒体查询结合 devicePixelRatio 可以区分普通显示屏和高清显示屏

并给出了如下CSS设计方案：

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    background-image: url(img_2x.png);
  }
}

「服务端用nginx对图片进行处理」

想要什么样尺寸的图片自己裁切,我们提供了按比例缩放和自定尺寸的裁切方法，地址后拼接字符串就行。

「使用更小更快更强，新一代图片格式 WebP」

在实测中，webp 格式比 jpg 格式减小约 20%。这对优化用户体验，减少CDN带宽消耗有很好的效果。

「如何判断呢」

我想到一个解决的方案，就是通过User-Agent信息，可以拿到你的浏览器信息，通过对你的浏览器分类，支持webp放在白名单里，不支持的则为黑名单。判断为白名单，则直接调用，返回webp格式图片；反之，则显示原图。

---

DOM

事件冒泡

事件会从最内层的元素开始发生，一直向上传播，直到document对象。

    Click me!

因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是

「p -> div -> body -> html -> document」

「事件捕获」

与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

上面的例子在事件捕获的概念下发生click事件的顺序应该是

「document -> html -> body -> div -> p」

所以从上面的图片来看????1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段

addEventListener

addEventListener方法用来为一个特定的元素绑定一个事件处理函数，是JavaScript中的常用方法。

 element.addEventListener(event, function, useCapture)

重点来看看第三个参数useCapture

• true - 事件句柄在捕获阶段执行（即在事件捕获阶段调用处理函数）

• false- false- 默认。事件句柄在冒泡阶段执行（即表示在事件冒泡的阶段调用事件处理函数）

所以我们通常来说，默认第三个参数不写的话，是按照事件句柄在冒泡执行的。

attachEvent

兼容IE的写法，默认是事件冒泡阶段调用处理函数，写事件名时候要加上"on"前缀（"onload"、"onclick"等）。

object.attachEvent(event, function)

事件代理

利用事件流的特性，我们可以使用一种叫做事件代理的方法，其实利用的就是事件冒泡的机制。

下面的内容是子元素1
        
li内容>>>  这是span内容123
        下面的内容是子元素2
        
li内容>>>  这是span内容123
        下面的内容是子元素3
        
li内容>>>  这是span内容123

js代码

xxx.addEventListener('click', function (e) {
            console.log(e,e.target)
            if (e.target.tagName.toLowerCase() === 'li') {
                console.log('打印')
            }
})

更加规范的写法????

  function delegate(element, eventType, selector, fn) {
            element.addEventListener(eventType, e => {
                let el = e.target
                while (!el.matches(selector)) {
                    if (element === el) {
                        el = null
                        break
                    }
                    el = el.parentNode
                }
                el && fn.call(el, e, el)
            },true)
            return element
        }

阻止事件冒泡和默认事件

event.preventDefault()   // 阻止默认事件
event.stopPropagation() //阻止冒泡

实现一个可以拖拽的DIV

分割线-—---

var dragging = false
var position = null

xxx.addEventListener('mousedown',function(e){
  dragging = true
  position = [e.clientX, e.clientY]
})


document.addEventListener('mousemove', function(e){
  if(dragging === false) return null
  console.log('hi')
  const x = e.clientX
  const y = e.clientY
  const deltaX = x - position[0]
  const deltaY = y - position[1]
  const left = parseInt(xxx.style.left || 0)
  const top = parseInt(xxx.style.top || 0)
  xxx.style.left = left + deltaX + 'px'
  xxx.style.top = top + deltaY + 'px'
  position = [x, y]
})
document.addEventListener('mouseup', function(e){
  dragging = false
})

CSS系列

两种盒模型分别说一下

也就是标准盒模型写起来更方便，也更规范吧。

盒模型分为标准盒模型和怪异盒模型(IE模型)

box-sizing：content-box   //标准盒模型
box-sizing：border-box    //怪异盒模型

「content-box」

❝

默认值，标准盒子模型。width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。

❞

尺寸计算公式：

width = 内容的宽度

height = 内容的高度

宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

「border-box」

❝

width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

❞

尺寸计算公式：

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

注意：如果你在设计页面中，发现内容区被撑爆了，那么就先检查一下border-sizing是什么，最好在引用reset.css的时候，就对border-sizing进行统一设置，方便管理

如何垂直居中？

16种方法实现水平居中垂直居中

水平局中

「内联元素」，「宽度默认就是内容的宽度」，只需要给父级添加text-align

.wrapper{text-align: center;}

「块级元素」，将它的margin-left和margin-right设置为auto，并且块级元素一定要设置宽度，否则元素默认为100%宽度，不需要居中。

.inner{
            display: block;
            width: 150px;
            margin: 0 auto;
        }
// 一定要设置宽度，不然就不需要局中了

两个以上的水平局中，可以将其设置为display:inline-block，在设置父级text-align

垂直局中

「内联元素」，第一种实用的是flex布局，这里局中的值得是相对于父盒子

.wrapper{
            display: flex;
            align-items: center;
        }

第二种，这里面指的局中是相对于自身而言的

.inner{
            height:100px;
            line-height:100px;
}

「块级元素」

宽高确定情况下，实用 「position absolute + 负margin」

宽高不确定的情况下，实用「position absolute + transform」

垂直水平局中

子元素宽高确定的情况下，使用「position absolute + 负margin」

子元素宽高不确定的，使用「position absolute + transform」

.inner{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: blue;
        }

当然了flex布局也是可以解决问题的，下面就介绍????

---

两列布局

左列定宽,右列自适应

「float+margin」

.left{
            float: left;
            width: 100px;
            height: 100%;
            background: rebeccapurple;
        }
        .rigth{
            height: 100%;
            margin-left: 100px; /*大于等于#left的宽度*/
            background: blue;
        }

左列自适应,右列定宽

「float+overflow」

        

css代码????

.rigth {
            margin-left: 10px;
            /*margin需要定义在#right中*/
            float: right;
            width: 100px;
            height: 100%;
            background-color: #0f0;
        }

        .left {
            overflow: hidden;
            /*触发bfc*/
            height: 100%;
            background-color: blue;
        }

---

三列布局

两列定宽,一列自适应

使用float+margin实现