2021-04-15

html

1.你如何理解HTML结构的语义化

更符合W3C统一的规范标准，是技术趋势。

没有样式时浏览器的默认样式也能让页面结构很清晰。

对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。

对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。 对SEO友好。

2.说说 title 和 alt

两个属性都是当鼠标滑动到元素上的时候显示

alt 是 img 的特有属性，是图片内容的等价描述，图片无法正常显示时候的替代文字。

title 属性是对dom元素的一种类似注释说明，

3. Html5 有哪些新特性

新增元素：

绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，

浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后自动删除

语义化更好的内容元素，比如 article 、footer、header、nav、section

表单控件 ， calendar 、 date 、 time 、 email 、 url 、 search

新的技术 webworker 、 websocket 、 Geolocation

4. Label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

CSS

1.水平居中的方法

元素为行内元素，设置父元素 text-align:center

如果元素宽度固定，可以设置左右 margin 为 auto ;

如果元素为绝对定位，设置父元素 position 为 relative ，元素设 left:0;right:0;margin:auto;

使用 flex-box 布局，指定 justify-content 属性为 center

display 设置为 tabel-ceil

2.BFC 有什么用

可以包含浮动元素

不被浮动元素覆盖

阻止父子元素的 margin 折叠

3.清除浮动的几种方式

父级 div 定义 height

结尾处加空 div 标签 clear:both

父级 div 定义伪类 :after 和 zoom

父级 div 定义 overflow:hidden

结尾处加 br 标签 clear:both

4.标准盒模型

内容(content)、填充( padding )、边界( margin )、 边框( border )；

5.rgba() 和 opacity 的透明效果有什么不同？

rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的 所有内容的透明度， 而 rgba() 只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效 果！）

6.display 与 opacity 和 visibility的区别

1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

7.px和em，rem的区别

px和em都是长度单位，区别是：

px值固定，容易计算。

em值不固定，是相对单位，其相对应父级元素的字体大小会调整

rem值不固定，是相对单位，其相对应html根元素的字体大小会调整

8.什么情况会触发重排和重绘？

1）添加、删除、更新 DOM 节点

2）通过 display: none 隐藏一个 DOM 节点-触发重排和重绘

3）通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化

4）移动或者给页面中的 DOM 节点添加动画

5）添加一个样式表，调整样式属性

6）用户行为，例如调整窗口大小，改变字号，或者滚动

9.定位

static 默认值

relative 相对定位，定位原点是元素的默认位置，脱离文档流，还是占用原来的空间

absolute，绝对定位。定位原点是父元素，如果父元素没有定位，则相对于html文档，脱离文档流，所占空间为零

fixed 固定定位 定位原点是浏览器窗口，不随屏幕滚动而滚动。

10.回调地狱

在js异步中有很多回调函数，造成回调地狱问题

解决：

1.Promise

• Promise有三种状态：pending/reslove/reject 。pending就是未决，resolve可以理解为成功，reject可以理解为拒绝。同时Promise常用的三种方法 then 表示异步成功执行后的数据状态变为reslove catch 表示异步失败后执行的数据状态变为reject all表示把多个没有关系的Promise封装成一个Promise对象使用then返回一个数组数据

2.async/await

JavaScript

1.说几条JavaScript的基本规范

不要在同一行声明多个变量

请用 =/! 来比较 true/false 或者数值

使用对象字面量替代 new Array 这种形式

不要使用全局函数

Switch 语句必须带有 default 分支

If 语句必须使用大括号

for-in 循环中的变量 应该使用 let 关键字明确限定作用域，从而避免作用域污染

2.闭包

闭包就是能够读取其他函数内部变量的函数

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个 函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域

闭包的特性： 函数内再嵌套函数 内部函数可以引用外层的参数和变量 参数和变量不会被垃圾回收机制回收

优点：能够实现封装和缓存等 缺点：消耗内存、使用不当会内存溢出， 解决方法：在退出函数之前，将不使用的局部变量全部删除

3.作用域

作用域其实可理解为该上下文中声 明的 变量和声明的作用范围。

可分为 块级作用域 和 函数作用域

4.·JavaScript原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是 prototype (原型)，当我们访问一个对象的属性时, 如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个 prototype 又会有自己的 prototype ，于是就这样一直找下去，也就是我们平时所说的原型链的概念 关系： instance.constructor.prototype = instance.proto 特点： JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己 的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变当我们需要一个属性的时， Javascript 引擎会先看当前对象中是否有这个属性， 如果没有的,就会查找他的 Prototype 对 象是否有这个属性，如此递推下去，一直检索到 Object 内建对象

5.谈谈This对象的理解

this 总是指向函数的直接调用者（而非间接调用者）

如果有 new 关键字， this 指向 new 出来的那个对象 在事件中， this 指向触发这个事件的对象，

特殊的是， IE 中的 attachEvent 中的this 总是指 向全局对象 Window

6.new操作符具体干了什么呢?

创建一个空对象，

将this指向该对象，

为创建的对象添加成员属性

最后隐式的返回 this

7.如何解决跨域问题?

通过 jsonp 跨域

nginx 代理跨域

通过 CORS解决跨域

通过修改document.domain来跨子域

8. js的7种基本数据类型

Undefined 、 Null 、Boolean 、Number 、String 、Bigint 、Symbol

9.null，undefined 的区别

首先他俩是不一样的，通过===来区别

undefined 表示不存在这个值。 声明了，但没有赋值

null ，表示为空值 null

10.谈谈你对ES6的理解

新增模板字符串（为 JavaScript 提供了简单的字符串插值功能）

箭头函数 for-of （用来遍历数据—例如数组中的值。）

arguments 对象可被不定参数和默认参数完美代替。

ES6 将 promise 对象纳入规范，提供了原生的 Promise 对象。

增加了 let 和 const 命令，用来声明变量。

还有就是引入 module 模块的概念

11.深拷贝、浅拷贝

深拷贝：基本数据类型，数据放在栈里

浅拷贝：引用数据类型，数据放在堆里，地址指向栈

12.节流防抖

防抖：一段时间内连续触发，不执行，直到超出限定时间执行最后一次。–如： input 模糊搜索

节流：每隔一段时间执行一次，通常用在高频率触发的地方，降低频率。–如：鼠标滑动 拖拽

13 this

函数执行的上下文，可以通过 apply ， call ， bind 改变 this 的指向。对于匿名函 数或者直接调用的函数来说，this指向全局上下文（浏览 器为 window，NodeJS为 global ），剩 下的函数调用，那就是谁调用它， this 就指向谁。当然还有 es6 的箭头函数，箭头函数的指向取 决于该箭头函 数声明的位置，在哪里声明， this 就指向哪里

14 apply call bind

三者都是改变this指向问题，

call()接收2个参数，第一个参数改变this指向，第二个参数是一个参数列表，只改变一次this指向，立即执行。

apply()接收2个参数，第一个参数改变this指向，第二个参数是一个数组形式的参数，只改变一次this指向，立即执行。

bind()接收2个参数，第一个参数改变this指向，第二个参数是参数列表，只改变一次this指向，但是不会立即执行，而是返回一个函数需要调用才能执行。

15.数组 字符串方法

数组：pop push indexOf slice splice map sort foreach

字符串：charAt() concat indexOF toString toLowerCase() toUpperCase trim

浏览器

1.浏览器存储的方式有哪些

cookie 数据存储大小只有4k，由服务器设置过期时间，存储在服务器端

localStorage 数据存储大小5M,不清除浏览器一直存在，存储在本地

sessionStorage数据存储大小5M,不关闭页面就清除了，存储在本地

2.从浏览器地址栏输入URL后发生了什么？

浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，给服务器发起请求；

服务器处理完成后返回数据，浏览器接收文件 （ HTML、JS、CSS 、图象等） ；

浏览器对接收到的数据进行解析，（DOM树，Style Rules）

根据解析出来的文件渲染到页面。

3.GET 和 POST 请求的区别

GET 参数通过 url 传递，POST 放在 body 中

GET 请求在 url 中传递的参数是有长度限制的，而 POST 没有

GET 在浏览器回退时是无害的，而 POST 会再次提交请求

GET 比 POST 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息

对参数的数据类型，GET 只接受 ASCII字符，而 POST 没有限制

4.常见的协议（http）

TCP

http

IP

ARP

5.IE9以下浏览器不支持的东西

Date.now()

Array.isArray()

indexOf()

flex布局

性能优化

SEO优化

减少不必要的请求（使用cdn）

css优化(使用link,压缩css,禁止使用gif)

js优化（外部js,eslint语法检测）

webpack优化点

页面渲染优化（文档层次不要嵌套太多）

图片优化（webp,使用canvas代替图片，精灵图）

脚本优化（减少重绘和回流，使用选择器）

2.为什么利用多个域名来存储网站资源会更有效？

CDN 缓存更方便

突破浏览器并发限制

节约 cookie 带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

VUE

vue生命周期

beforeCreate

created

beforeMount

mounted （发送ajax请求, 启动定时器等异步任务）

beforeUpdate

updated

beforeDestroy （清除定时器）

destroyed

作者：CalvinXie
链接：https://www.jianshu.com/p/410b6099be69
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vue-router2种方式

hash模式

history模式

网络安全

xss 跨站脚本攻击

crsf 跨站点请求伪造

欢迎访问我的博客 https://sundestiny.github.io/myblog/