plugins: [
new CommonsChunkPlugin({
name: '[id].js',
chunks: chunks,
minChunks: 1
})
]
类似设置实现，
普通js文件：
module.exports = {
entry: {
bundle1: './addr.js',
bundle2: './backward.js'
.......
},
output: {
filename: '[name].js'
}
}
思路分析
步骤一:构建成行元素 + 寻找新增元素追加位置
瀑布流所有元素的宽度是固定的,我们用浏览器的宽度除以每个瀑布流块的宽度,就是每一行可容纳的瀑布流块的个数.因为,每个瀑布流块的高度不一,我们姑且把组成一行的这组元素称为成行元素,在成行元素放置完毕后,我们如果要再增加一个元素,那么它的位置应该这样找?
“获取成行元素集合中高度最低的那个元素,待放置的元素的top值应该是这个最低元素的高,left值应该是这个最低元素的left值”
这样,新增的这一个元素我们就找到了它存放的位置.这样成行元素中的最低高度值就变为了原来的高度+新增元素的高度.
步骤二:重复步骤一,依赖成行元素追加新元素
步骤一中我们已经实现了一次成行元素追加一个新的元素,这样新元素增加之后我们就构建了新的成行元素,之后的操作就是在新的成行元素中追加新元素,原理同步骤一.
<!doctype html>
<meta charset="UTF-8">
<title>瀑布流效果实现
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js">
<script type="text/javascript" src="scripts/jquery.easydrag.handler.beta2.js">
<script type="text/javascript">
window.onload=function(){
//获取父级对象
var oParent = document.getElementById("main")
//获取父级[第一个参数]下的所有的子元素[按照第二个参数匹配]
var aPin =getClassObject(oParent,"pin")
//获取每一个块的宽度
var iPinW = aPin[0].offsetWidth
// //计算每行放多少个pin(瀑布流块)页面的宽度/每一个瀑布流块的宽度
var num = Math.floor(document.documentElement.clientWidth/iPinW)
//重置父级的样式,这样保证图片整体居中
oParent.style.cssText="width:" + num*iPinW +"pxmargin:0 auto"
var compareArray = []
//遍历获取到的所有瀑布流块
for (var i =0i
if(i
//成行元素
compareArray[i] = aPin[i].offsetHeight
}else{
//获取成行元素中高度最低的值
var minHeight = Math.min.apply('',compareArray)
//alert(compareArray + ",min=" + minHeight)
//获取成行元素中高度最低元素的索引
var minHkey =getMinHeightKey(compareArray,minHeight)
//为新增的瀑布流块设置定位
aPin[i].style.position ="absolute"
aPin[i].style.top = minHeight +"px"
//设定新增加的瀑布流块的top和left
aPin[i].style.left =aPin[minHkey].offsetLeft +"px"
//将该索引位置的高度改变为新增后的高度[原来瀑布流块的高度+新增的瀑布流块的高度]
compareArray[minHkey] += aPin[i].offsetHeight
}
}
}
/**
* 获取parent下所有样式名为className的对象集合
*/
function getClassObject(parent,className){
var obj = parent.getElementsByTagName("*")
var result = []
for(var i=0i
//变量如果匹配className,将匹配的对象放入数组
if(obj[i].className==className){
result.push(obj[i])
}
}
return result
}
/**
* 获取arr数组中值为minH的值在数组中的索引
*/
function getMinHeightKey(arr,minH){
for(key in arr){
if(arr[key] == minH){
return key
}
}
}
<style type="text/css">
/*设置每一个瀑布流块*/
#main .pin{
width:220px
height:auto
padding:15px 0px 0px 15px/*上 右 下 左*/
float:left
}
/*设置每一个瀑布流块中的图像样式*/
#main .pin .box{
width:200px
height:auto
padding:10px
background:#FFF
border:1px solid #ccc
box-shadow:0px 0px 6px #ccc/*中间投影*/
border-radius:5px/*圆角*/
}
#main .pin .box img{
width:200px
}
<div id="main">
<div class="pin">
<div class="box">
<img src="images/1.webp">
<div class="pin">
<div class="box">
<img src="images/2.webp">
<div class="pin">
<div class="box">
<img src="images/3.webp">
<div class="pin">
<div class="box">
<img src="images/4.webp">
<div class="pin">
<div class="box">
<img src="images/5.webp">
<div class="pin">
<div class="box">
<img src="images/6.webp">
<div class="pin">
<div class="box">
<img src="images/7.webp">
</html>
今天小编要跟大家分享的文章是关于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前端工程师。
