前端错题知识点

# form 元素的enctype属性

1. `enctype属性在get请求中会被忽略,在post请求中才有效`

2. `application/x-www-form-urlencoded表示会对特殊字符进行转义`

3. `text/plain 以文本的形式进行编码,不会对特殊字符进行编码`

4. `multipart/form-data向服务器发送二进制文件的时候有用,例如提交文件!!!`

HTML5 Canvas 性能优化的做法在大部分情况下,需要遵循的「最佳实践」

将渲染阶段的开销转嫁到计算阶段之上。

使用多个分层的 Canvas 绘制复杂场景。

不要频繁设置绘图上下文的 font 属性。

不在动画中使用 putImageData 方法。

通过计算和判断,避免无谓的绘制操作。

将固定的内容预先绘制在离屏 Canvas 上以提高性能。

使用 Worker 和拆分任务的方法避免复杂算法阻塞动画运行。

h5常用结构标签:

<header></header>

<nav></nav>

<section></section>

<aside></aside>

<footer></footer>

<article></article>


不换行也不省略 : 

word-break : keep-all;

white-space : nowrap;  

不换行,超出用省略号代替 : 

word-break : keep-all;

white-space : nowrap;

overflow : hidden;

text-overflow : ellipsis;

box-sizing有两个属性:

content-box,是默认值,width和height只包括内容的宽和高。

border-box,边框和内边距的值包含在width中,但不包括外边距。

display没有hidden的属性

补充 

display:none与visibility: hidden有什么区别?

都是看不见元素,但是display:none意思是不展示这个元素,该元素不占据空间,

而visibility: hidden只是将该元素隐藏了,只是用户不可见而已,占据页面空间

transform:旋转 div 元素;

translate:移动,是transform的一个方法;

PostCSS:转换CSS的工具

BEM:命名规范block-name__element-name--modifier-name,也就是模块名 + 元素名 + 修饰器名,以保证命名不会冲突

LESS、SASS都是CSS预处理器

异步执行问题 setTimeOut属于异步宏任务 要等同步任务执行完毕后再进行



下面哪一项技术不能将数据存储到用户本地()

正确答案: D   你的答案: C (错误)

localStorage

cookie

indexedDB

fetch  fetch是用来发送网络请求的,并不是用来存储数据的

var           let        const

函数作用域      块级作用域    块级作用域

变量提升          不存在提升    不存在提升

值可更改           值可更改        值不可更改

以下表达式值为 false 的是()

正确答案: B C D  

"abc" === "abc"

{x:1} === {x:1}             值同但是对象指针不同 

Symbol(1) === Symbol(1)        symbol创建的值都是唯一的,所以肯定不同

NaN === NaN      NaN与任何值都不相等,包括NaN本身

不稳定的算法:快(快速排序)、些(希尔排序)、选(选择排序)、队(堆排序)

平均时间复杂度为O(nlog2n):快速排序、归并排序、堆排序

首先不同数据类型储存方式不一样

数据类型分为简单数据类型和复杂数据类型,string,number,boolean,undefined,null是简单类型变量,对象是复杂类型变量;内存存储分为栈和堆,简单类型变量储存在栈中,而对象的内容储存在堆中,只是指向对象的内存地址储存在栈中。

数组ARR=[1,2,3,4,5],以下返回值为5的是( )

push() 在数组末尾添加元素,返回新数组长度,所以返回5

pop() 删除数组最后一位,返回所删除的元素,所以返回5

shift() 删除数组第一位,返回所删除的元素,所以返回1

unshift() 在数组开头添加元素,返回新数组长度,所以返回5

①为任意的数据类型+""即可将其转换成String字符串类型,

这是一种隐式类型转换,由浏览器自动完成,实际上也是调用String()函数。

②为任意的数据类型-0即可将其转换成Number数值类型。

js原型遵循5个规则:

 1、所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(除了“null”以外); 2、所有的引用类型(数组、对象、函数),都有一个__proto__(隐式原型)属性,属性值是一个普通的对象; 3、所有的函数,都有一个prototype(显式原型)属性,属性值也是一个普通对象; 4、所有的引用类型(数组、对象、函数),__proto__属性值指向(完全相等)它的构造函数的“prototype”属性值; 5、当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去__proto__(即它的构造函数的prototype中)寻找。

static 定位

HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位    元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动:

relative 定位

相对定位元素的定位是相对其正常位置。

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。

HTTP状态码

2XX 成功 2XX 的响应结果表明请求被正常处理了。 200 OK 204 No Content 该状态码代表服务器接收的请求已成功处理,但在返回的响应报文中不含实体的主体部分。另外,也不允许返回任何实体的主体。 206 Partial Content 该状态码表示客户端进行了范围请求,而服务器成功执行了这部分的GET 请求。响应报文中包含由 Content-Range 指定范围的实体内容。 3XX 重定向 3XX 响应结果表明浏览器需要执行某些特殊的处理以正确处理请求。 301 Moved Permanently 永久性重定向。 302 Found 临时性重定向。 ​4XX 客户端错误 4XX 的响应结果表明客户端是发生错误的原因所在。 400 Bad Request 该状态码表示请求报文中存在语法错误。当错误发生时,需修改请求的内容后再次发送请求。 403 Forbidden 该状态码表明对请求资源的访问被服务器拒绝了。 404 Not Found 该状态码表明服务器上无法找到请求的资源。除此之外,也可以在服务器端拒绝请求且不想说明理由时使用。 5XX 服务器错误 5XX 的响应结果表明服务器本身发生错误。 500 Internal Server Error 该状态码表明服务器端在执行请求时发生了错误。也有可能是 Web应用存在的 bug 或某些临时的故障。 503 Service Unavailable 该状态码表明服务器暂时处于超负载或正在进行停机维护,现在无法处理请求。

KMP为线性算法,处理主和匹配串的复杂度都为 O(n)

分支限界法:

分支限界法常以广度优先或以最小耗费(最大效益)优先的方式搜索问题的解空间树。

在分支限界法中,每一个活结点只有一次机会成为扩展结点。活结点一旦成为扩展结点,就一次性产生其所有儿子结点。在这些儿子结点中,导致不可行解或导致非最优解的儿子结点被舍弃,其余儿子结点被加入活结点表中。

此后,从活结点表中取下一结点成为当前扩展结点,并重复上述结点扩展过程。这个过程一直持续到找到所需的解或活结点表为空时为止。

回溯法:

不用多说了吧,一般先有一个bool型数组,标记每个记录是否被访问,在结束时,有一个恢复现场,即bool=false,代表这次访问结束,以后的dfs还可以继续访问这个结点。

Linux

/bin 存放普通用户可以使用的指令。

/usr这个目录中包含了命令库文件和在通常操作中不会修改的文件,其地位类似Windows上面的”Program Files”目录(安装程序的时候,默认就是安装在此文件内部某个子文件夹内。输入命令后系统默认执行/usr/bin下的程序。

/etc全局的配置文件存放目录。存放系统和软件的配置。

/boot引导程序,内核等存放的目录。

JavaScript实现继承共6种方式:

原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

websocket

是基于tcp的协议,websocket只需要服务端和客户端一次握手,就可以自由进行数据传送和接收,允许服务端主动发送数据,不需要使用轮询的方式

HTTP

A:HTTP是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。 B:HTTP是媒体独立的:意味着,只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。 D:HTTP是基于客户端/服务端(C/S)的架构模型,通过一个可靠的链接来交换信息,是一个无状态的请求/响应协议。

http协议处于tcp/ip协议体系的应用层

正则表达式里:

?出现0次或1次.  [0,1]

* 出现0次或多次.  [0,+∞]

+ 出现1次或多次  [1,+∞]

只有DOM2事件流包括三个阶段

事件捕获阶段

处于目标阶段

事件冒泡阶段

link和@import的区别:

1)link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

2)link可以加载CSS,Javascript;@import只能加载CSS。

3)link加载的内容是与页面同时加载;@import需要页面网页完全载入以后加载。

用法:

1)link的写法:

<link rel="stylesheet" href="index.css">

2)import的写法:

<style type=”text/css”>

    @import url(“index.css”);

</style>

插入排序是从后往前比的

直接选择排序:前面逐渐有序,每次从后面的无序数列中找最大或最小继续添加到前面有序数列中,两两交换需要一个辅助空间

直接插入排序:类似打斗地主,每次抓一张牌,从后往前比较,把新抓的牌放到合适大小的位置,两两交换需要一个辅助空间

冒泡排序:每次把当前无序数列中最大或最小的数交换到此无序数量的最后,两两交换需要一个辅助空间

归并排序:分治法把当前待排数组分成多个子序列,先使每个子序列有序,再使子序列段间有序,需要 O(n) 的辅助空间

已知一个由5个顶点8条边构成的有向图,以下说法正确的是(      )

正确答案: C   你的答案: D (错误)

各顶点的度之和为8

若以邻接表作为存储结构,邻接表中结点个数为16

各顶点的入度之和为8

若以邻接矩阵作为存储结构,矩阵中非0元素个数为16

A 有向图的度分出度和入度,这里说法有歧义

B 邻接表的节点数等于 节点数+边数 = 13

C 正确

D 有向图邻接矩阵非零个数等于边数 = 8

在BGP中,路由器对使用179端口的半永久TCP连接来交换选路信息。


调度算法:

   1.先来先服务:

   2.最短寻道时间有限(当前磁头所在磁道距离最近的请求作为下一次服务的对象)

   3.扫描算法或电梯调度(当前移动方向向上选择与当前磁头所在磁道距离最近的请求作为下一次服务的对象)

 4.循环扫描


A. concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

B. append() 方法在被选元素的结尾(仍然在内部)插入指定内容。

C. appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

1. append(content)方法

方法作用:向每个匹配的元素内部追加内容。

2. appendTo(expr)方法

方法作用:把所有匹配的元素追加到指定的元素元素集合中。

D. pop() 方法用于删除并返回数组的最后一个元素。


<abbr> 标签用来表示一个缩写词或者首字母缩略词,如"WWW"或者"NATO"。

通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

在某些浏览器中,当您把鼠标移至带有 标签的缩写词/首字母缩略词上时,<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。


表格标记的常用属性有9个: cellpadding:单元格边沿与其内容之间的空白 cellspacing:单元格之间的空白 border:表格边框的宽度(也可以理解我边框的粗细程度) height:表格高度 width:表格的宽度 bgcolor:表格背景颜色 align:表格相对周围元素的对齐方式(也可以理解为表格中的文字内容的对齐方式) frame:规定外侧边框哪些部分是可见的 rules:规定内侧边框哪些部分是可见的


堆(大顶堆,小顶堆),中序遍历,前序遍历,后续遍历序列
https://www.cnblogs.com/mww-NOTCOPY/p/12357402.html


前缀、中缀、后缀表达式转换详解https://blog.csdn.net/weixin_40867255/article/details/82992690


* `svg可以给每一个图形添加事件,canvas不可以`

* `svg的图形都是用xml标签画出来的,canvas是用js绘制的`

* `canvas绘制的是位图(标量图)也就是一个个像素绘制出来的,而svg是矢量图,也就是用几何特性会描述图像,并且可以无限制的自由组合`


push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。


以下关于OS的说法正确的是

正确答案: A B C   你的答案: B C D (错误)

多道批处理系统的特点:资源利用率高、系统吞吐量大、平均周转时间长、无交互能力

分时系统具有多路性、独立性、及时性、交互性

操作系统的基本特征:并发、共享、虚拟、异步

在OS中通过时分复用和码分复用实现“虚拟”   在OS中通过时分复用和空分复用实现“虚拟”


下面选项中属于Node定时器的是?

正确答案: A B C D   你的答案: A B (错误)

setTimeout()

setInterval()

setImmediate()

process.nextTick()


客户端发送一个HTTP请求到服务器的请求消息包括以下格式:请求行(request line)、请求头部(header)、空行和请求数据四个部分组成,


浮动元素使其父元素高度塌陷

1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来,保证子元素在父元素内,这样父元素就能自适应子元素的高度,但是此方法有一弊端,一定会影响父元素之后的元素排列,甚至影响布局。

2、给父元素一个固定高度,此方法适用于子元素高度已知并且固定的情况。

3、添加一个块级元素,并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法,新建一个空的div,为这个div设置clear:both;这样无疑是增加了无意义的标签,一个大型页面中,这种标签太多是不好的。

4、给父元素添加 overflow:hidden;【后有详解】

5、通过伪类::after清除浮动 【后有详解】


看了一遍排在前面的答案,类似”进程是资源分配的最小单位,线程是CPU调度的最小单位“这样的回答感觉太抽象,都不太容易让人理解。

做个简单的比喻:进程=火车,线程=车厢

线程在进程下行进(单纯的车厢无法运行)

一个进程可以包含多个线程(一辆火车可以有多个车厢)

不同进程间数据很难共享(一辆火车上的乘客很难换到另外一辆火车,比如站点换乘)

同一进程下不同线程间数据很易共享(A车厢换到B车厢很容易)

进程要比线程消耗更多的计算机资源(采用多列火车相比多个车厢更耗资源)

进程间不会相互影响,一个线程挂掉将导致整个进程挂掉(一列火车不会影响到另外一列火车,但是如果一列火车上中间的一节车厢着火了,将影响到所有车厢)

进程可以拓展到多机,进程最多适合多核(不同火车可以开在多个轨道上,同一火车的车厢不能在行进的不同的轨道上)

进程使用的内存地址可以上锁,即一个线程使用某些共享内存时,其他线程必须等它结束,才能使用这一块内存。(比如火车上的洗手间)-"互斥锁"

进程使用的内存地址可以限定使用量(比如火车上的餐厅,最多只允许多少人进入,如果满了需要在门口等,等有人出来了才能进去)-“信号量”


作为media queries的条件:设备像素比、设备类型、设备高度。

使用and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

tv设备类型,(min-width: 700px) 设备像素比,(orientation: landscape)设备高度


冒泡事件很多,个人觉得记住常见的不支持冒泡事件就可以了

有:①focus

       ②blur

③mouseenter

④mouseleave

       ⑤load

       ⑥unload

⑦resize


总结:

纯字符串比较,转换成ASCII码在进行比较;

纯数字和数字字符串相比较,则将字符串数字隐式转换成数字再进行比较;

纯数字和非数字字符串比较,都返回false;

此题解释:字符串与字符串相比较时,取各自的第一个字符的ASCII码比较,D的ASCII码大于A,故选择B。


叶子节点=度为2节点+1

度为2节点=叶子节点-1=5-1=4

总节点=叶子节点+度为1节点+度为2节点=5+4+3=12


排序算法 待补充



物理层主要设备:中继器、集线器;

数据链路层主要设备:二层交换机、网桥;

网络层主要设备:路由器。


电路交换:通信的双方在通信过程中会一直占用信道

分组交换:将报文进行分组,采用存储转发技术


后退N帧协议的发送窗口大小是(>1),接收窗口的大小是(=1)


X=1, Y=1, Z=1

//第一次挥手,客户端发送FIN+ACK

FIN=1, ACK=1;

seq_number=X; // 1

ack_number=Z; // 1

// 第二次挥手,服务器收到FIN后,发回一个ACK

ACK=1

seq_num=Z; // 1

ack_num=x+1; // 2

// 第三次挥手,服务器关闭与客户端的连接,发送FIN

FIN=1, ACK=1;

seq_num=Y; //1

ack_num=X+1; //2

// 第四次挥手,客户端收到服务器发送的FIN之后,发回ACK确认

ACK=1

seq_num=X+1; //2

ack_num=Y+1; //2


DDos 预防 ( 没有彻底根治的办法,除非不使用TCP )

限制同时打开SYN半链接的数目

缩短SYN半链接的Time out 时间

关闭不必要的服务


mount命令用于挂载Linux系统外的文件

A

mount -o defaults /dev/sdb1 /tools  -o defaults使用预设的选项

B

mount -r /dev/sdb1 /tools-r将文件系统作为只读文件系统进行安装

C

mount -o ro /dev/sdb1 /tools

-o ro 唯独模式

D

mount -o ro /dev/sdb /tools 

sdb是系统的第二快磁盘(sdb1是第一个主分区,sdb2第二个),没有sdb


ifconfig用于获取本地ip地址的是.

top用于获取本机cpu使用率的是.

uptime命令能够打印系统总共运行了多长时间和系统的平均负载.

netstat命令用来打印Linux中网络系统的状态信息,可让你得知整个Linux系统的网络情况.


Linux命令

A   export    设置环境变量    #export PATH=$PATH:/opt/au1200_rm/build_tools/bin

B    cat查看文件内容,创建文件,文件合并,追加文件内容

C    echo显示一段文字

D    env查询环境变量


test是RegExp的方法,参数是字符串,返回值是boolean类型。

match是String的方法,参数是正则表达式,返回值是数组。


400 bad request,请求报文存在语法错误

· 401 unauthorized,表示发送的请求需要有通过 HTTP 认证的认证信息

· 403 forbidden,表示对请求资源的访问被服务器拒绝

· 404 not found,表示在服务器上没有找到请求的资源


Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏,其中的许多对象会被频繁重绘

Canvas 是逐像素进行渲染的。

在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

SVG

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序(比如谷歌地图)

复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

不适合游戏应用


margin :CSS属性设置元素所有四边的边距区域。它是margin-top, margin-right,margin-bottom,margin-left的简写。(从上开始顺时针方向)


http是应用层,udp是传输层,ip是网络层的,都是无连接协议


可以被继承的属性: 字体系列:font-family,font-size,font-style,font-weight,font-stretch,font-size-adjust; 列表相关:list-style,list-style-image,list-style-position,list-style-type,list-style-color; 文本系列:text-indent,text-align,line-height,word-spaceing,letter-spacing,text-transform,direction,color; 元素可见性:visibility; 表格布局:caption-side,border-collapse,border-spacing,empty-cells,table-layout; 生成内容:quotes; 光标属性:cursor; 页面样式:page,page-break-inside,Windows,orphans; 声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation。


浏览器页面之间通信

1. 服务器方式就是通过提交表单更新服务器端的数据,然后另一个页面去获取更新后的数据就可以实现通信

2. 第一个页面通过localStorge.setItem()来实现存储在浏览器本地,另一个页面通过localStorge.getItem()来获取被存储的数据

3. 第一个页面把要存储的信息存储到cookie中,然后另一个页面通过setInterval来实现定时获取

4. sessionStorage是会话级别的,每个页签都有单独的存储空间,所以不能实现页面之间的通信


一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

1<meta name="viewport"content="width=device-width, initial-scale=1.0">

width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height:和 width 相对应,指定高度。

initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

maximum-scale:允许用户缩放到的最大比例。

minimum-scale:允许用户缩放到的最小比例。

user-scalable:用户是否可以手动缩放。


parseInt() 函数可解析一个字符串,并返回一个整数。

当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。

当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。

如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。

如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。


JavaScript ***有七种内置数据类型,包括基本类型和对象类型。

基本类型分为以下六种:

string(字符串)

boolean(布尔值)

number(数字)

symbol(符号)

null(空值)

undefined(未定义)

string 、number 、boolean 和 null undefined 这五种类型统称为原始类型

symbol是ES6中新增的数据类型,symbol 表示独一无二的值

null 和 undefined 通常被认为是特殊值,这两种类型的值唯一,就是其本身。


Boolean类型转换:

1.对于String:只有非空字符串为真

2.对于Number:除了0和NaN之外都为真

3.对于Boolean:true为真

4.对于Object:除了null之外都为真

    5.undefined为false;



Angular大大减少了对DOM的访问。

jQuery极大的丰富了DOM操作


此题考查的是 JS 的类型转换:

if(x) 这里期望 x 是一个布尔类型的原始值,而 x 是一个对象,任何对象转为布尔值,都为得到 true切记!在 JS 中,只有 0,-0,NaN,"",null,undefined 这六个值转布尔值时,结果为 false)。

题目的第二部分,一定要注意 y = Boolean(0)而不是 y = new Boolean(0)。这两个有很大区别,用 new 调用构造函数会新建一个布尔对象,此处没有加 new,进行的是显示类型转换,正如上述第一条所说,0 转换布尔,结果为 false,所以此时 y 的值就是 false。如果加了 new,那么 y 就是一个 Boolean 类型的对象,执行 if(y) 时,对象转布尔,始终是 true,所以结果会与不加 new 的时候相反。


ECMAScript中,变量可以存放两种类型的值,即原始值和引用值。

原始值是存储在栈中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。

引用值是存储在堆中的对象,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处。

ECMAScript中有5种原始类型,即undefined、null、number、string、boolean。


reflow(回流)和repaint(重绘)

简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html

reflow:例如某个子元素样式发生改变,直接影响到了其父元素以及往上追溯很多祖先元素(包括兄弟元素),这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。

reflow:几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

repaint:如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器 repaint(重绘)。repaint 的速度明显快于 reflow

下面情况会导致reflow发生

1:改变窗口大小

2:改变文字大小

3:内容的改变,如用户在输入框中敲字

4:激活伪类,如:hover

5:操作class属性

6:脚本操作DOM

7:计算offsetWidth和offsetHeight

8:设置style属性




在html中,帧元素(frameset)的优先级最高,表单元素比非表单元素的优先级要高。

表单元素包括:文本输入框,密码输入框,单选框,复选框,文本输入域,列表框等等;

非表单元素包括:连接(a),div,table,span等。

所有的html元素又可以根据其显示分成两类:有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。

有窗口元素包括:select元素,object元素,以及frames元素等等。

无窗口元素:大部分html元素都是无窗口元素。


css优先级,可以给选择器分配权值:

id选择器的权值为100

class、属性和伪类选择器的权值为10

标签选择器、伪元素的权值为1

权值较大的优先级越高

比较样式时,将对应的选择器权值相加,大的优先级高

权值相同的,根据从上往下的原则,后定义的优先级高

特殊!important,优先级最高


DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起,用于创造动态性更强的网页。

通过 JavaScript 和 HTML DOM,能够动态地改变 HTML 元素的样式。


锚,代表超链接。锚伪类是超链接的四种状态。

未访问状态(a:link)

鼠标悬停状态(a:hover)

活动状态(a:active)

已访问状态(a:visited)


下面哪些技术可用于优化 CSS 图片加载 ?

正确答案: A B C D   你的答案: A (错误)

CSSSprite

SVGSprite

Iconfont

Base64


DOMContentLoaded

当纯HTML被完全加载以及解析时,DOMContentLoaded事件会被触发,而不必等待样式表,图片或者子框架完成加载。

Load

当一个资源及其依赖资源已完成加载时,将触发load事件。



console.log() -> 同步

promise -> 异步,微任务

setTimeout ->  异步,宏任务

执行顺序: 同步 > 异步,微任务 > 异步,宏任务


select count(*) from table 表示返回表中包括空行和重复行在内的行数,但是会扫描所有列

select count(1) from table 也是返回表中包括空行和重复行在内的行数,不会扫描所有列,1其实就是表示有多少个符合条件的行,但是此时没有where,所有没条件也就是返回总行数


HTML5提供的API有()
全屏API(Fullscreen API) 

页面可见性API(Page Visibility API)

getUserMedia API 访问摄像头和麦克风,而无需使用插件。 

电池API(Battery API) 

Link Prefetching预加载网页内容,为浏览者提供一个平滑的浏览体验。 


1、只要“||”前面为false,无论“||”后面是true还是false,结果都返回“||”后面的值。

2、只要“||”前面为true,无论“||”后面是true还是false,结果都返回“||”前面的值。

3、只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;

4、只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;

A: 1&&3  => 3    => 3&&1 = >1

B:1&&2 => 2  => 2&&3    =>3

C:1||0=>  1   =>    1||3    =>1

D:0||1=>   1   =>   1||2    =>1


动态规划:

  1.递推关系式.

  2.子问题重叠.

  3.最优子结构.


preload是加速本页面某个资源的加载顺序(权重)

prefetch是预加载下个页面的资源


1.语意特性,添加等标签

2.多媒体, 用于媒介回放的 video 和 audio 元素

3.图像效果,用于绘画的 canvas 元素,svg元素等

4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等

5.设备兼容特性 ,HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,

6.连接特性,更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能

7.性能与集成特性,HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作

8.拖拽释放(Drag and drop) API

9.表单控件,calendar、date、time、email、url、search

10.新的技术webworker, websocket, Geolocation


display: flex;

align-items: center;        /* 弹性盒子flex 元素位于容器的中心

设置弹性盒子元素在垂直方向上(纵轴)的对齐方式。*/

justify-content: center;    /* 弹性盒子flex 元素位于容器的中心

设置弹性盒子元素在主轴(横轴)的对齐方式*/



实际上,这是浏览器的同源策略导致的问题:不允许JS访问跨域的Cookie。

举个例子,现有网站A使用域名a.example.com,网站B使用域名b.example.com,如果希望在2个网站之间共享Cookie(浏览器可以将Cookie发送给服务器),那么在设置的Cookie的时候,必须设置domain为example.com。因此要跨域共享cookie需要双边都设置

1.服务器端使用CROS协议解决跨域访问数据问题时,需要设置响应消息头Access-Control-Allow-Credentials值为“true”。

同时,还需要设置响应消息头Access-Control-Allow-Origin值为指定单一域名(注:不能为通配符“*”)。

2.客户端需要设置Ajax请求属性withCredentials=true,让Ajax请求都带上Cookie。



有哪些常见的服务端推送的通信解决方案?它们的优劣分别是什么?
1.基于轮询:

优点:开发简单,客户端实现即可,不需要服务端配合

缺点:大多数情况下无用请求,占用服务端资源

实现方式:客户端每隔一段时间调用接口,无论有没有数据,接口立即返回.

使用场景:不想折腾的开发者,消息及时性要求没那么高,服务器资源资源足。

2.基于长轮询

优点:消息及时,命中率高,消耗服务端资源少

缺点:服务端和客户端需要同时改造,消息会有部分延迟(发生在请求交替之时)

实现方式:客户端在上次请求返回后,在发送下次请求,服务端当有数据或者超时后返回,没有数据时hang住链接(超时时间需要综合考虑服务器性能和及时性做出平衡,有代理的话需要考虑代理对于链接的超时机制)。

使用场景:扫码登录,微信网页端获取消息等。

3.长链接

优点:通信及时,通信模式采用双工,类似于打电话

缺点:服务端和客户端需要同时改造,当链接过多时,消耗服务端资源比较大。

实现方式:客户端和服务端建立长链接,基于http1.1 ,keepalive ,websocket,comet,iframe等,基于socket的需要维持心跳

使用场景:实时性要求很高,银行系统,股票系统等


从输入url到页面展现发生了什么?其中在页面渲染以及网络请求响应的性能优化方面,我们分别可以做哪些优化工作?

输入url按下回车之后,浏览器会去浏览器缓存中寻找该url的ip;没有的话去系统缓存中找,还是没有的话去路由器缓存中寻找;再没有就去系统host文件中找,还是没有最后只能去请求dns服务器,然后dns给一个ip给浏览器;浏览器根据这个ip地址,将请求信息,请求说明和请求参数等封成一个tcp包,由传输层,到网络层,到数据链路层到物理层,传送给服务器,服务器解析这个tcp包将对应的页面文件返回。浏览器根据html文件生成dom树,根据css文件生成cssom树,然后合并这两棵树生成渲染树,然后渲染页面并且展示。要注意的是,当浏览器解析html文件时候如果遇到了内联或者外联的js代码,会暂停dom树的生成,等js代码执行完成之后,才能继续生成树并渲染。

        其中在页面渲染以及网络请求响应的性能优化方面,我们可以做的优化工作有:1.js代码写在页面渲染完成之后避免阻塞渲染    2.cdn并发,资源压缩,减少请求次数    3.预加载或者懒加载   



©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345