前端学习笔记（问题总结）(2)

admin管理员组

文章数量:1547503

1.是否可以在html中写 标签？是否可以用？如何让它正常显示？怎么创建自定义标签？
实例化元素
自定义元素：在HTML中定义新元素
创建元素的常用技术仍然适用于自定义元素。与任何标准元素一样，它们可以用HTML声明或使用JavaScript在DOM中创建。实例化自定义标签
2.引用样式的方式有哪几种？他们的优先级排序怎么样？
1、内联（行内样式） - 在标签内直接写样式，style=""
2、内嵌（内部样式） - 在head标签里，加一个style标签，在style里写样式
3、外联（外部样式） - 新建一个.css文件，通过link来引入样式
4、导入（导入样式） - 在head标签里，加一个style标签，再写@import url()，跟用link的方式差不多

1、就近原则

• 2.理论上：内联>内嵌>外联>导入

• 3.实际上：内嵌、外联、导入在同一个文件头部，在CSS选择器权值相同的情况下，谁离相应的代码近，谁的优先级高。权值计算可参考https://blog.csdn/qq_39090575/article/details/110703916
  3.CSS选择器的优先级排序，怎么计算权值？
  css选择器的权值不同时，权值高的选择器优先；

• css选择器的权值相同时，后定义的选择器优先；

• css属性后面加!important时，无条件绝对优先；

• 总结：

• !important > 行内样式 > id选择器 > 类选择器 || 伪类选择器 || 属性选择器 > 标签选择器 || 伪元素选择器 > 通配符选择器 || 子选择器 || 相邻选择器 > 继承样式
  4. CSS的继承选择器，.one. two和.one > .two的区别？两个同级类选择器连着一起写有什么作用？(权值相加)
  .one .two，匹配.one下所有包含.two的标签，包含子孙元素

.one>.two，匹配.one下所有包含.two的标签，只包含子元素
**5.是否熟悉使用开发者工具？有没有使用过断点调试？
**
断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点？（我们先看一个断点截图，以chrome浏览器的断点为例）

用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下
6.v-if和v-show的作用相似，它们的区别？
以上两者在元素展示的效果其实是相同的，只是在隐藏元素的时候效果会有区别
7.display：none和visibility：hidden的区别
作用不同 visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。 display: none----将元素的显示设为无,即在网页中不占任何的位置。
8.link和@import的区别
link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。
9.null和undefined的区别？
Null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

Undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。
10.浏览器如何实现不同标签页的通信？
第一种——调用localStorage
在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；
在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值，实现不同标签页之间的通信。
第二种——调用cookie+setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
11.iframe的优缺点
frame 创建包含另外一个文档的内联框架(即行内框架)，简而言之，iframe标签是框架的一种形式，一般用来包含别的页面。
优点:

1.iframe能够把嵌入的网页原样展现出来；

2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；

6.方便制作导航栏。

缺点:

1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；

2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；

3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；

4.链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去；

5.产生多个页面，不易管理；

6.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
12.eval是什么？
eval（）的作用：

把字符串参数解析成JS代码并运行，并返回执行的结果；
13.GET和POST的区别？何时使用POST
(1) get是从服务器上获取数据，post是向服 务器传送数据。Get请求返回request-URL 所指出的任意信息

POST请求用来发送电子邮件、新闻或发送 能由交互用户填写的表格。这是唯一需要 在请求中发送body的请求。使用post请 求时需要在报文首部content-length字段 中指出body的长度

(2) get是把参数数据队列加到提交表单的 ACTION属性所指的URL中，值和表单内 各个字段一一对应，在URL中可以看到。 Post是通过HTTP post机制，将表单内各 个字段与其内容放置在HTML HEADER内 一起　　传送到ACTION属性所指的URL地址， 用户看不到这个过程

(3) 对应get方式，服务器端用 request.queryString获取变量的值，对于 post方式服务器端用request.form获取提 交的数据

(4) Get传送的数据量小，不能大于2KB。Post 传送的数据量较大，一般被默认为不受限 制。但理论上，IIS4中最大量为80KB，IIS5 中为100KB。用IIS过滤器的只接受get参 数，所以一般大型搜索引擎都是用get方 　　式

(5) Get安全性非常低，post安全性相对较高。 如果这些数据是中文数据而且是非敏感 数据，那么get；如果用户输入的数据不 是中文字符而且包含敏感数据，那么还是 使用post为好
14.js深度克隆的代码实现？
浅度克隆：原始类型为值传递，对象类型仍为引用传递。

深度克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。
浅克隆
var a = 1;
var b = a;
a = 10;
console.log(b); // 1

    var a = 'hello';
    var b = a;
    a = 'world';
    console.log(b); // hello

    var a = true;
    var b = a;
    a = false;
    console.log(b); // true

15.做node用了什么框架
Express
16.浏览器存储
Cookie LocalStorage SessionStorage
17.同源策略，跨域，后台如何解决跨域，html有哪些标签可以跨域
同源
两个url地址的协议、域名、端口号三者都相同。
同源策略
1、DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。

2、XMLHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
跨域
不同源的地址进行访问、请求，就是跨域
后台如何解决跨域
1、CORS（跨域资源共享）

CORS（Cross-origin resource sharing，跨域资源共享）是一个W3C标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。

CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。

对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

优点：

CORS通信与同源的AJAX通信没有差别，代码完全一样，容易维护。

支持所有类型的HTTP请求。

缺点：

存在兼容性问题，特别是IE10以下的浏览器。

第一次发送非简单请求时会多一次请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2、JSONP跨域

由于script标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建script标签，然后利用src属性进行跨域，这也就是JSONP跨域的基本原理。

优点：

使用简便，没有兼容性问题，目前最流行的一种跨域方法。

缺点：

只支持GET请求。

由于是从其它域中加载代码执行，因此如果其他域不安全，很可能会在响应中夹带一些恶意代码。

要确定JSONP请求是否失败并不容易。虽然HTML5给script标签新增了一个onerror事件处理程序，但是存在兼容性问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
//1、定义一个回调函数handleResponse用来接收返回的数据
function handleResponse(data) {
console.log(data);
};

//2、动态创建一个script标签，并且告诉后端回调函数名叫handleResponse
var body = document.getElementsByTagName(‘body’)[0];
var script = document.createElement(‘script’);
script.src = ‘http://?callback=handleResponse’;
body.appendChild(script);

//3、通过script.src请求http://?callback=handleResponse，
//4、后端能够识别这样的URL格式并处理该请求，然后返回handleResponse({“key”: “value”}) 给浏览器
//5、浏览器在接收到handleResponse({“key”: “value”}) 之后立即执行 ，也就是执行handleResponse方法，获得后端返回的数据，这样就完成一次跨域请求了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
3、图像 Ping 跨域

由于img标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过img标签的src属性进行跨域，这也就是图像Ping跨域的基本原理。

优点：

用于实现跟踪用户点击页面或动态广告曝光次数有较大的优势。

缺点：

只支持GET请求。

只能浏览器与服务器的单向通信，因为浏览器不能访问服务器的响应文本。

1
2
3
4
5
6
7
8
9
10
11
var img = new Image();

//通过onload及onerror事件可以知道响应是什么时候接收到的，但是不能获取响应文本
img.onload = img.onerror = function () {
console.log(“Done!”);
};

//请求数据通过查询字符串形式发送
img.src = ‘http://?name=xxx’;
1
2
3
4
5
6
7
8
9
4、服务器代理

浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。服务器代理是万能的。
1
5、document.domain跨域

对于主域名相同，而子域名不同的情况，可以使用document.domain来跨域。这种方式非常适用于iframe跨域的情况。
1
6、window.name跨域

window对象有个name属性，该属性有个特征：即在一个窗口（window）的生命周期内，窗口载入的所有的页面（不管是相同域的页面还是不同域的页面）都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
1
7、location.hash跨域

location.hash方式跨域，是子框架具有修改父框架src的hash值，通过这个属性进行传递数据，且更改hash值，页面不会刷新。但是传递的数据的字节数是有限的。
1
8、postMessage跨域

window.postMessage(message, targetOrigin)方法是HTML5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。这个应该就是以后解决dom跨域通用方法了。

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符*。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。
1
2
3
4
5
html有哪些标签可以跨域
script、img、link
18.http状态码
HTTP状态码
当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。

HTTP状态码的英文为HTTP Status Code。

下面是常见的HTTP状态码：

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
19.用mongodb做过什么
MongoDB是一款为web应用程序和互联网基础设施设计的数据库管理系统。没错MongoDB就是数据库，是NoSQL类型的数据库
20.node.js
Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时。
21.v-model双向绑定原理
有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性
传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性
但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值
所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可

作者：在路上phper
链接：https://www.jianshu/p/cf91da3c4a77
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
22.jq的语法
jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
23.react的生命周期?
componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
24.用过vue的哪些组件？
v-html v-text v-if v-show v-for v-model
25.数据库
MS SQL Server 或者 Oracle 用于高流量的数据库驱动型网站。

MySQL用于低成本的数据库访问。

MS Access 用于低流量的网站。
26.d-flex和d-block有什么冲突？
冲突的产生：

比如有个dispaly: flex;的弹性盒，要求它能够隐藏和显示。

正常我们都是display: none;隐藏，display: block;显示出来，对于正常的元素来说，这没有什么问题，但对于弹性盒来说也可以使用block显示出来，但同时也会破坏flex的机制，即显示出来后不在具有弹性盒的功能。

2、解决办法：

使用none隐藏元素后，直接使用flex代替block让元素显示，因为flex元素默认就是block元素。

27.bootstrap的grid-system?
1、bootstrap总共分为12份

2、class=“col-xs-6 col-sm-8 col-md-9 col-lg-10” 表示 在极小尺寸占6份，小尺寸 8份，中等 9份， 大型10份

3、

col-md-push 表示往右移动3份位置

4、

col-md-push 表示往左移动9份位置 3、4 的效果就是左右调换了位置
28.axios的withCredential? intercepter,
表示跨域请求时是否需要使用凭证

开启withCredentials后，服务器才能拿到你的cookie，当然后端服务器也要设置允许你获取你开启了才有用

axios.interceptors的使用：
* 请求拦截
* 使用场景：在请求时在请求参数上统一添加参数
* 返回拦截
* 使用场景：验证token是否过期

• 注意：
  • withCredentials的情况下，后端要设置Access-Control-Allow-Origin为你的源地址，例如http://localhost:8080，
  • 不能是*，而且还要设置header(‘Access-Control-Allow-Credentials: true’);
    29.vue-router 的模式有？
    实际上存在三种模式：

Hash: 使用URL的hash值来作为路由。支持所有浏览器。

History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式

Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。
　　30.webpack中在production下怎么禁止console.log和alert？
　　减少性能影响：控制台打印大量数据会影响浏览器性能，见console.log和垃圾回收，未测试，但影响一定会有。
避免过多信息泄露：主要针对非普通用户而言
31.Sass写一个数组？
32.Mongodb的update有几个参数？
query：update的查询条件，类似sql update查询内where后面的。
update：update的对象和一些更新的操作符（如 ， ， ，inc…）等，也可以理解为sql update查询内set后面的
upsert：可选，这个参数的意思是，如果不存在update的记录，是否插入objNew，true为插入，默认是false，不插入。
multi：可选，mongodb默认是false，只更新找到的第一条记录，如果这个参数为true，就把按条件查出来多条记录全部更新。
writeConcern：可选，抛出异常的级别。
33.rem出现很小的小数手机上会发生什么，
34.head标签里面有个什么vue(发音一样我不知道是什么)方法还是啥东西？
35.触摸有几个事件？
click事件bai
touch类事件
touchstart：手指触摸到屏du幕会触发zhi
touchmove：当手dao指在屏幕上移动zhuan时，会触发
touchend：当手指离开屏幕时，会触发
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
tap类事件
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
滑动事件
swipe：手指在屏幕上滑动时会触发
swipeLeft：手指在屏幕上向左滑动时会触发
swipeRight：手指在屏幕上向右滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
swipeDown：手指在屏幕上向下滑动时会触发
36.传统网站、响应式、vue、小程序的区别？
37.watch的作用？为什么要用它？
主要的场景就是：监听对象，异步操作（请求，计算）
38.什么时候用less
39.匿名函数
(){}
40.This指向问题
41.JQ，JS，vue 三者的区别
1.从jquery到vue的转变是一个思想想的转变，就是将原有的直接操作dom的思想转变到操作数据上去。

2.传统前端开发模式中是以jq为核心的，而vue是现在一个兴起的前端js库，是一个精简的MVVM。

3.jQuery是使用选择器（ ） 选 取 D O M 对 象 ， 对 其 进 行 赋 值 、 取 值 、 事 件 绑 定 等 操 作 ， 他 和 原 生 的 H T M L 的 区 别 只 在 于 可 以 更 方 便 的 选 取 和 操 作 D O M 对 象 ， 而 数 据 和 界 面 是 在 一 起 的 。 比 如 需 要 获 取 l a b e l 标 签 的 内 容 ： ）选取DOM对象，对其进行赋值、取值、事件绑定等操作，他和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容： ）选取DOM对象，对其进行赋值、取值、事件绑定等操作，他和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：(“lable”).val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的

4.vue适用的场景：复杂数据操作的后台页面，表单填写页面

jquery适用的场景：一些html5的动画页面，一些需要js来操作页面样式的页面

二者也是可以结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求
42.用jq实现双向绑定！
$("#search").bind(“input propertychange”,function(){

var value=$(this).val();
if(value.length>10){
$("#aaa").html(value);
}else{
$("#aaa").html(-value);
}
});
43.说一说前端性能优化有哪些方法？
1.页面级优化
2.代码级优化
44.module.export和export？

本文标签： 学习笔记