前端层级联动原理

‘壹’ 前端 元素的层级 背景

background-color
background-color属性用来为元素设置背 景颜色。
需要指定一个颜色值，当指定了一个颜色 以后，整个元素的可见区域都会使用这个 颜色作为背景色。
如果不设置背景颜色，元素默认背景颜色 为透明，实际上会显示父元素的背景颜色

background-image
background-image可以为元素指定背景 图片。
和background-color类似，这不过这里使 用的是一个图片作为背景。
需要一个url地址作为参数，url地址需要指 向一个外部图片的路径
例如：
background-image: url(1.jpg)

background-repeat
background-repeat用于控制背景图片的 重复方式4 。
如果只设置背景图片默认背景图片将会使 用平铺的方式，可以通过该属性进行修改。
可选值：
repeat：默认值，图片左右上下平铺
no-repeat：只显示图片一次，不会平铺
repeat-x：沿x轴水平平铺一张图片
repeat-y：沿y轴水平平铺一张图片

background-position
background-position用来精确控制背景 图片在元素中的位置。
可以通过三种方式来确定图片在水平方向 和垂直方向的起点。
关键字：top right bottom left center
百分比
数值

background-attachment
background-attachment用来设置背景图 片是否随页面滚动。
可选值：
scroll：随页面滚动
fixed：不随页面滚动

background
background是背景的简写属性，通过这个 属性可以一次性设置多个样式，而且样式 的顺序没有要求。
例如：
background: green url(1.jpg) no-repeat center center fixed;

‘贰’ Web前端新手要掌握的性能优化

今天小编要跟大家分享的文章是关于Web前端新手要掌握的性能优化知识。本文将分享一些前端性能优化的常用手段，包括减少请求次数、减小资源大小、各种缓存、预处理和长连接机制，以及代码方面的性能优化等方面。下面来和小编一起看一看吧！

base64：尤其是在移动端，小图标可以base64(webpack)，大图片慎用(如果加载速度过于慢的，而且很重要的图片，可以用base64)


1、减少HTTP的请求次数和传输报文的大小


“CSSSprite(雪碧图、图片精灵)技术”


使用字体图标(IconFont)或者SVG等矢量图


+减少HTTP请求次数或者减少请求内容的大小


+渲染更快：因为它们是基于代码渲染的，而对于位图(png/jpg/gif)是需要先把图片编码在渲染


+不容易是帧变形


+也可以使用webp格式图片，这种格式要小一些(但是需要服务器端支持这种格式的请求处理)


“图片懒加载(延迟加载)技术”


+第一次加载页面的时候不去请求真实的图片，提高第一次渲染页面的速度，请求图片的额外消耗尽可能不要处理


+当页面加载完，把出现在用户视野区域中的图片做真实加载，没有出现的先不加载(节约流浪，也能减少对服务器的请求压力)


o对于数据我们也尽可能分批加载(不要一次请求过多的数据，例如分页技术)


音视频文件取消预加载(preload='none')，这样可以增加第一次渲染页面的速度，当需要播放的时候在加载


客户端和服务器端的数据传输尽可能基于JSON格式完成，XML格式比JSON格式要大一些(还可以基于二进制编码或者文件流格式，这种格式比文件传输好很多)


“把页面的css/js等文件进行合并压缩”


合并：争取css和js都只导入一个(webpack可以实现并合并压缩哦)


压缩：基于webpack可以压缩，对于图片自己找工具先压缩，可以使用服务器的GZIP压缩


图片BASE64(用BASE64码代表图片，减少HTTP，增加浏览器渲染速度，所以真是项目中，尤其是移动端，如果图片加载缓慢，BASE64一下就好了，;但是base64会导致文件中心的代码超级恶心，不利于维护和开发，所以减少使用);webpack中科院配置图片


2、设置各种缓存、预处理和长连接机制


不经常更改的静态资源做缓存处理(一般做的是304或者ETAG等协商缓存)


“建立Cache-Control和ExpiresHTTP的强缓存”


DNS缓存或者预处理(DNSPrefetch)，减少DNS的查找


设置本地的离线存储(manifest)或者把一些不经常更改的数据做本地临时存储(webstorage，indexdb)等


有钱就做CDN(地域分布式服务器)，或者加服务器


“建立Connection：keep-aliveTcp长连接”


使用HTTP2版本协议(现在用的一般都是http1.1)，可以多条tcp通道共存=>管道化链接


一个项目分为不同的域(不同的服务器)，例如：资源web服务器、数据服务器，图片服务器，视频服务器等，合理利用服务器资源，但是导致过多的DNS解析


Cache-Control的优先级高于Expires


基于本地存储，做数据的存储


3、代码方面的性能优化


减少对闭包的使用(因为过多使用闭包会产生很多不销毁的内存，处理不好的话，会导致内存溢出“栈溢出”)，减少闭包的嵌套(减少作用域链的查找层级)


对于动画来说：能用css解决的不用js(能够用transform处理的，不用传统的css样式，因为transform开启硬件加速，不会引发回流，或者使用定位的元素也会好很多，因为定位的元素脱离文档流，不会对其他元素的位置造成影响)，能用
requestAnimationFrame解决的不用定时器


+用requestAnimationFrame还有一个好处，当页面处于休眠无访问状态，动画会自己暂停，知道回复访问才开始，而定时器是不论什么状态，只要页面不管，就一直处理


避免使用iframe(因为iframe会嵌入其他页面，这样父页面渲染的时候，还要同时把子页面也渲染了，渲染进度会变慢)


减少直接对DOM的操作(原因是减少DOM的回流和重绘...)，当代项目基本基于mvvm，mvc数据驱动视图渲染的，对DOM的操作框架本身完成，性能要好很多


低耦合高内聚(基于封装的方式：方法封装，插件，组件，框架，类库等封装，减少页面中的冗余代码，提高代码使用率)


尽可能使用事件委托


避免出现死循环或者嵌套循环(嵌套循环会成倍增加循环的次数)


项目中尽可能使用异步编程来模拟出多线程的效果，避免主线程阻塞(异步操作基于Promise设计模式来管理)


JS中不要使用with


避免使用css表达式


函数的防抖和节流


减少使用eval(主要原因是防止压缩代码的时候，由于符号书写不合规，导致代码混乱)


图片地图：对于多次调取使用的图片(尤其是背景图)，尽可能把它提取成为公共的样式，而不是每一次重新设置background


减少filter滤镜的使用


尽可能减少选择器的层级


尽可能减少table布局


手动回收堆栈内存(赋值为null)


“栈溢出：死递”


functionfunc(){


func();


}func();


解决方案：


functionfunc(){


setTimeout(func,0);


}func();


相互引用：引用类型之间的相互调用，形成嵌套式内存


letobj1={


name:'obj1',};


letobj2={


name:'obj2',


x:obj1}


obj1.x=obj2;


以上就是小编今天为大家分享的关于Web前端新手要掌握的性能优化知识的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。

‘叁’ 二级联动是前端写还是php写

一般是前端用来实现联动效果，后端(php)提供数据，二者相结合

‘肆’ 电子围栏与视频监控怎么联动，具体怎么联动越详细越好

电子围栏与监控的联动是指当电子围栏系统产生报警时，附近区域的摄像机可以马上把镜头转向报警区域，并进行录像，同时监控画面立即显示在控制中心的显示屏（或者监视器）中。监控中心安保人员能够可以及时全面的了解现场情况和调查取证。

电子围栏跟监控的联动方式通常有以下几种：

第一种联动方式：前端物理连接联动（通过485信号传输）

电子围栏报警信号（开关量）直接接入对应的摄像机报警输入接口。这样连接的优点是：由于信号传输距离短，联动反应快，不会出现延迟。

请点电子围栏与监控联动接线图

第二种联动方式：电子围栏报警信号传输至控制中心后通过报警主机控制软件来实现联动（通过网络传输）。

网络TCP/IP传输是如今较为常见的传输方式，软件控制界面较为清晰，可选择的功能设置较多，如可以设置自动录像，自动抓拍，自动存储等。

‘伍’ 在一个系统里,比如绩效,在前端代码编写上,如何区分同一个岗位下的上下级关系

这种情况一般都是职务来区分，比如总经理，经理，主管，职员

‘陆’ 微软BI前端如何展现图表数据联动效果

1、数据联动可以参考B老师的这篇博客
微软BI 之SSRS 系列 - 如何实现报表导航 Navigation 和钻取 Drill Down 的效果

2、SSAS 的数据展示 前端是通过SSRS 不支持推拽分析， 要么就是通过EXECL 连接 支持推拽
要么可能需要自己开发 前端展示的东西

‘柒’ 前端页面有哪三层构成，分别是什么作用是什么

最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。

HTML：结构层

网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实

的基础，HTML的坚实基础创建了一个可以在其上创建网站的平台。

结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像，它包括访问者用

于浏览网站的超链接。这是在符合标准的HTML5中编码的，可以包括文本，图像和多媒体（视频，音频等）。

网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的

CSS访问权限的客户（如果不是所有功能）。

CSS：样式层

该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。这些文件包含有

关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的

媒体查询。

网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表，但请记住，每个CSS文件都需

要HTTP请求才能获取它，从而影响站点性能。

JavaScript：行为层

行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最

常用的语言，但CGI和PHP也经常被使用。

当开发人员引用行为层时，大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与

DOM（文档对象模型）进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重

要。在构建行为层时，应该像使用CSS一样使用外部脚本文件来优化速度和性能。

(7)前端层级联动原理扩展阅读：

分层的一些好处是：

• 共享资源：当您编写外部CSS或JavaScript文件时，站点上的任何页面都可以使用该文件。如果

您需要对该文件进行更改，也许更新网站上的某些排版样式，则使用该样式表的每个页面都会得到

更改。没有必要单独编辑网站的每个页面，这对于大型网站来说可能是一项艰苦的任务。

• 下载速度更快：首次由客户下载脚本或样式表后，Web浏览器会对其进行缓存。由于这些共享

资源现在包含在浏览器的缓存中，因此浏览器中请求的其他页面加载速度更快，从而提高了整体页

面速度和性能。

• 多人团队：如果您有多个人同时在网站上工作，您可以使用允许文件签入和签出的系统，以确

保每个人都使用最新版本。如果样式和行为与结构文档交织在一起，那就更难了。

• 搜索引擎优化：一个明确分离风格和结构的网站可能会对搜索引擎有更好的表现，因为它们可以更有效地抓取内容并理解页面而不会陷入视觉风格和行为信息。

• 辅助功能：外部样式表和脚本文件更易于人们和浏览器访问。屏幕阅读器等软件可以更轻松地

处理结构层中的内容，而无需处理无论如何都无法使用的样式。

• 向后兼容性：使用单独的开发层设计的站点更可能向后兼容，因为无法使用某些CSS样式或禁

用了JavaScript的浏览器和设备仍然可以查看HTML。然后，您可以使用支持它们的浏览器的功能逐

步增强您的网站。

‘捌’ Web前端学习基础之HTML&CSS知识介绍

今天小编要跟大家分享的文章是关于Web前端学习基础之HTML&CSS知识介绍。正在学习Web前端知识的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。


01、HTML概述全称：HyperTextMarkupLanguage（超文本标记语言），定义页面内容结构，该语言书写的代码通常会被浏览器解析执行。


HyperText(超文本)：不仅包括文本，还可以包括图片、链接、音乐、视频等非文本元素


MarkupLanguage(标记语言)：是一套标记标签，html使用标记标签来描述网页


02、HTML文档结构


文档声明定义：它既不是元素，也不是注释，写在html代码的第一行；用来解析元素，通知浏览器使用哪一个html版本


html元素（又叫根标记），是所有其他元素的祖先元素，最顶层


文档头，它是html元素的第一个子元素，可以嵌套其他元素；里面的内容不会在页面上显示


charset="UTF-8">空元素，解析文本


ame="viewport"content="width=device-width,
initial-scale=1.0">SEO搜索引擎优化