背景作用区域、数组属性及方法、前端优化、卡顿原因

最新推荐文章于 2022-02-24 20:23:32 发布

睿oba

最新推荐文章于 2022-02-24 20:23:32 发布

阅读量200

点赞数

分类专栏： js http css 文章标签：前端

本文链接：https://blog.csdn.net/chanzhiliao/article/details/107187969

版权

js 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

http

3 篇文章 0 订阅

订阅专栏

1、设置一个元素的背景颜色，背景颜色会填充哪些区域？

答：
background-color设置的背景颜色会填充元素的content、padding、border区域。

2、数组常用属性及方法

答：

属性

constructor 返回创建数组对象的原型函数。
语法：array.constructor
返回值是函数的引用，不是函数名：
数组返回 function Array() { [native code] }
数字返回 function Number() { [native code] }
字符串返回 function String() { [native code] }
length 设置或返回数组元素的个数。
prototype 允许你向数组对象添加属性或方法。
Array.prototype.name=value
prototype 属性向对象添加属性和方法。

方法

concat() 连接两个或更多的数组，并返回结果。
array1.concat(array2,array3,…,arrayX)
every() 检测数值元素的每个元素是否都符合条件。是为true，否为false。every() 不会对空数组进行检测.

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
document.getElementById("demo").innerHTML = ages.every(checkAdult);//false

fill() 使用一个固定值来填充数组。
array.fill(value, start, end)
filter() 检测数值元素，并返回符合条件所有元素的数组。

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
document.write(ages.filter(checkAdult));

findIndex() 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。
array.findIndex(function(currentValue, index, arr), thisValue)
includes() 判断一个数组是否包含一个指定的值。
arr.includes(searchElement, fromIndex)
searchElement 必须。需要查找的元素值。
fromIndex 可选。从该索引处开始查找 searchElement，默认为 0。
indexOf() 搜索数组中的元素，并返回它的索引。
array.indexOf(item,start)
item 必须。查找的元素。
start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。
isArray() 判断对象是否为数组。Array.isArray(obj)
join() 把数组的所有元素放入一个字符串。
array.join(separator)
separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
toString() 把数组转换为字符串，并返回结果。同上，使用逗号作为分隔符。
map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
array.map(function(currentValue,index,arr), thisValue)
pop() 删除数组的最后一个元素并返回删除的元素。
array.pop()
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
array.push(item1, item2, …, itemX)
reverse() 反转数组的元素顺序。
array.reverse()
slice() 选取数组的的一部分，并返回一个新数组。
array.slice(start, end)，slice() 方法不会改变原始数组。
splice() 从数组中添加或删除元素。
array.splice(index,howmany,item1,…,itemX)
index 必需。规定从何处添加/删除元素。
howmany 可选。规定应该删除多少元素。可以是 “0”。
item1, …, itemX 可选。要添加到index处的新元素
sort() 对数组的元素进行排序。
首字母排序直接array.sort()
数字排序array.sort(function(a,b){return a-b});
这种方法会改变原始数组！

3、前端性能优化方向

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN（内容发布网络）托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数，减少DNS查询，避免重定向。
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）使用外部javascript和CSS，避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，图片lazyLoad，将样式表放在顶部，将脚本放在底部，加上时间戳。
（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。

前端加载的图片太多或者太大怎么办
方案一:将图片服务和应用服务分离
方案二:简单粗暴的压缩方案
借助一些第三方软件来进行压缩,压缩后分辨率不变,肉眼看不失真
方案三:图片懒加载
例：滑到下一屏时下一屏的图片才会加载。
在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片,通过js将img标签的data-src属性赋值给src属性。
方案四:css Sprites
当网站或者APP有大量小icon,如果上传到图片服务器比如CDN, 要加载所有这些小icon将增加大量请求,而CDN是按流量收费的,这无疑将增加很多成本.
CSS Sprites 技术就是将这些小icon合并成一张图片,只需要加载一次,每次通过background-position来控制显示icon,这样就可以节约大量请求,节约成本.