菜单

前者重构总结

2018年11月15日 - CSS/CSS3

前者重构方案了解一下

2018/06/09 · 基础技术 ·
重构

初稿出处:
凭着葡萄不吐番茄皮   

前者重构总结

前者重构其实可以分成两单方面:性能优化模块化

下面我们事先总结一下特性优化方面的事物:

先是列举一下健康的优化手段:

  1. CSS置顶,JS置底

  2. 静态资源外联、合并、压缩

  3. 图片优化

  4. 图表延迟加载

  5. 动CSS Sprite,首屏图片全部联到同一张图及

  6. 静态文件上CDN

  7. 静态文件设置强缓存

  8. HTML压缩

  9. 图表预加载

增强型的手腕:

  1. 基础库定制(用代码分析代码,自动包被下到的法作为基础库)

  2. 页面数据存储优化(从原本的底一直写json形式的script,变为以json隐藏在textarea中,初始化或用到之当儿才去领并进行辨析)

  3. 首屏CSS检测,将无属首屏的css代码单独由包并转移到首屏之外进行延期加载

  4. js按需加载

督察与测量

性优化最要害的劳作无是优化而是监控。这个道理非常简单,没有监督系统就是不曾道衡量性能优化的效果,那么你开的外工作还是不足为训的。

咱俩本着性的监督是于多单维度进行的,包括平均日、时段分布、浏览器分布、省份、运营商等。便于发现跟稳定任何一个细节的题目。

苟于平均时间立即同维度,我们而分为四个级别:

如此这般划分的便宜是,页面加载每个环节的耗时侦破:

页面加载的瓶颈就是当script的下载和剖析时。

那,优化方案就杀扎眼了:最可怜限度地削弱小js文件大小,以削弱多少网传输时间,提升页面性能。
由此新兴的优化工作我们发现:js代码压缩、Gzip后各级减多少1k,页面加载时间就是能够减多少10ms左右。

遵需加载:

立马是除js压缩外,能体悟的绝可行减小js文件大小的方了。

前言

前端技术发展迅猛,很多路面临前端部分重构,很开心得给我进行这次项目前端的重构方案编制,在盘算的同时参考了网上广大资料,希望本篇重构方案有得的完整性,可以拉动吃大家有些以面临重构时有用的事物,同时想过的不行牛有点牛不领赐教,能给自己有些微指点下重构相关的触发,在生感激不直~


图形优化

  1. 体代替图片。支持CSS3的浏览器越来越多,半透明、圆角、阴影、高光、渐变齐都得使CSS3来落实

  2. 慎选最好适度的图纸。jpg,png,gif

  3. 利用图片压缩工具

  4. Icon font 缺点是特支持纯色图标。

  5. SVG:对于绝大多数画、图标等,矢量图更粗,且可缩放无需生成多法图。

  6. data
    url:Base64凡网达到无限广的措辞传输8Bit字节的编码方式之一,可用于在http环境下传递较丰富的标示信息。将图纸转化为base64编码格式,资源内嵌于CSS或HTML中,不必单独请求。该措施的长是:

    1. 减少了http请求
    1. 避免了图片重新上传,还要清理缓存的题目

缺陷:IE6,IE7不支持该类型编码的图纸作为背景图,增加了CSS文件的分寸,维护资金比高

  1. 准Http协议设置合理的缓存

  2. RWD设计

一致、原路梳理

首先对本来种开一个约的梳理,既然是重构,当然多事物是得延续以来使用的。

图延迟加载

  1. 呢img标签src设置统一之图片链接,将真实链接地址装在由定义属性被,所以开时图片是匪见面加载的,我们将满足条件的图的src重置为于定义属性便只是实现延迟加载功能

function imgLazyLoad(container){
    container=container || $(window);
    var imgArr={};

    initImg();
    lazyLoad();
    container.scroll(function(){
        lazyLoad();
    })
    $(window).resize(function(){
        initImg();
    })

    function initImg(){
        $('img').each(function(){
            var el=$(this);
            if(el.attr('lazy-src')&&el.attr('lazy-src')!=''){
                var offset=el.offset();
                if(!imgArr[offset.top]){
                    imgArr[offset.top]=[];
                }
                imgArr[offset.top].push(el);
            }
        })
    }

    function lazyLoad(){
        var height=container.height();
        var scrollHeight=container.scrollTop();
        for(var k in imgArr){
            if(parseInt(k)<scrollHeight+height){
                var _imgs=imgArr[k];
                for(var i=0;lens=_img.length;i++){
                    var temImg=_img[i];
                    if(tmpImg.attr('lazy-src')&&temImg.attr('lazy-src')!=''){
                        tmpImg.attr('src',tmpImg.attr('lazy-src'));
                        temImg.removeAttr('lazy-src');
                    }
                }
                delete imgArr[k];
            }
        }
    }
}
imgLazyLoad($('#con'));

上述代码没有设想到页面空闲之场面,当页面空闲之动静就算不需要延期加载了。
进展一下改善:

function imgLazyLoad(container) {

    var imgLazyLoadTimer = null;
    var resetImglazy = null;

    container = container || $(window); //需要时jquery对象
    var imgArr = {};
    initImg();
    lazyLoad();
    imgLazyLoadTimer = setTimeout(autoLoad, 5000);

    container.scroll(function () {
        lazyLoad();
    });
    $(window).resize(function () {
        initImg();
    });
    $(document).mousemove(function () {
        if (imgLazyLoadTimer) clearTimeout(imgLazyLoadTimer);
        if (resetImglazy) clearTimeout(resetImglazy);
        resetImglazy = setTimeout(function () {
            autoLoad();
        }, 5000);
    });
    function initImg() {
        $('img').each(function () {
            var el = $(this);
            if (el.attr('lazy-src') && el.attr('lazy-src') != '') {
                var offset = el.offset();
                if (!imgArr[offset.top]) {
                    imgArr[offset.top] = [];
                }
                imgArr[offset.top].push(el);
            }
        });
    }

    function lazyLoad() {
        var height = container.height();
        var srollHeight = container.scrollTop();
        for (var k in imgArr) {
            if (parseInt(k) < srollHeight + height) {
                var _imgs = imgArr[k];
                for (var i = 0, len = _imgs.length; i < len; i++) {
                    var tmpImg = _imgs[i];
                    if (tmpImg.attr('lazy-src') && tmpImg.attr('lazy-src') != '') {
                        tmpImg.attr('src', tmpImg.attr('lazy-src'));
                        tmpImg.removeAttr('lazy-src');
                    }
                }
                delete imgArr[k];
            }
        }
    } //lazyLoad

    function autoLoad() {
        var _key = null;
        for (var k in imgArr) {
            if (!_key) {
                _key = k;
                break;
            }
        }
        if (!_key) return false;
        var _imgs = imgArr[_key];
        for (var i = 0, len = _imgs.length; i < len; i++) {
            var tmpImg = _imgs[i];
            if (tmpImg.attr('lazy-src') && tmpImg.attr('lazy-src') != '') {
                tmpImg.attr('src', tmpImg.attr('lazy-src'));
                tmpImg.removeAttr('lazy-src');
            }
        }
        delete imgArr[_key];
        if (imgLazyLoadTimer) {
            clearTimeout(imgLazyLoadTimer);
        }
        imgLazyLoadTimer = setTimeout(autoLoad, 1000);
    }
} //imgLazyLoad
imgLazyLoad($('#con'));

此外一种植艺术:

规律,当页面载入的时光,使用jquery来循环遍历每一个img,判断每一个图片是否以此时此刻不过区域外,需要之数额:

  1. 浏览器可区域之莫大

  2. 图形相对于文档的偏移量

当图片相对于文档的偏移量小于浏览器可视区域之万丈的早晚,表明图片已经进可张区域,代码如下:

$(document).ready(function(){
    $('img').each(function(){
        if($(this).offset().top < $(window).height()){
            $(this).attr('src',$(this).attr("x-src"));
        }
    })
})

当用户操作滚动条时,我们尚待知道滚动条的冲天:

$(window).scroll(function(){
    $('img').each(function(){
        if($(this).attr('src')==""){
            if($(this).offset().top<$(window).height()+$(window).scrollTop()){
                $(this).attr("src",$(this).attr("x-src"));
            }
        }
    })
})

1.1页面结构

自家当下边当之PC端的重构,所以先管页面结构以及里面的涉梳理了一样总体,并就此xmind画好布局图,重点功能做上记,因为vue是渐进式框架,所以我会先重构重要之有些
xmind结构图己就是非达标了,职业操守还是如的

静态文件设置强缓存

寻常一个web网站最深之流量来源于静态图片文件,使用缓存后方可减少同一客户端对相同静态资源的重复下载。
缓存并无是浏览器缓存后即非会见暨服务端产生通信,它要与服务器端确认一下其缓存的东西是匪是时髦的,如果是虽然运用,不是则又下载,因此浏览器缓存后连无见面压缩及服务器的相次数,但是会稳中有降和服务端的连日时长,变相地减小了劳务端的产出。

之所以浏览器缓存对于服务端的话节省了带动富,对于客户端的话减了再度下载同一资源的次数,也便加紧了访问速度。

浏览器缓存某平等信后再次做客时欲根据某平标识来认可一下它缓存的物是否是行的,这个标识有个别种植:

  1. Last_modified:

  2. E-tag:

1.2档结构

类布局是本着代码组织结构的,梳理了种各重点的文本夹和文件并注明相应之内容或作用。同样的,使用xmind画出组织图,xmind图略。

1.3面前端框架、模板

采用企业内部人员自创框架C.F.F,自定义build文件,内嵌Smarty模板获取后台数据,利用{$xxx}获取后台数据,但是定义了多全局变量存储模板数据,造成占用更多内存、污染命名空间相当题材。
概念公共组件供各级模块或特定情景调用,复用度高

1.4老三方库、组件、插件

jquery: JavaScript库
html5shiv:用于缓解IE9以下版本浏
览器对HTML5初添标签不识别,并促成CSS不起作用的题目。
Dialog : jquery弹窗插件
jCarousel : jquery 轮播插件
(重构版舍弃,原因无复杂的面貌能原生实现尽量原生实现)
respond:为 IE6-8 以及其他非支持 CSS3 Media Queries
的浏览器提供媒体询问的 min-width 和 max-width 特性,实现响应式网页设计
sideToolbar:导航工具
echarts: 图形工具


仲、重构方案

2.1支规范

正式之事物从来不断的长短,只有和公司或和单位来制订规范大家还保持一致,同事之间会杀快读懂相互的代码,提高开发效率

2.2技术选型

内外端分离开都变成主旋律,到今新品类多用这种模式开展开,项目了重构的讲话当然首选之模式
便宜:以前并未前者这同一职务的说,都是后端兼顾开发,数据库、底层服务、接口,页面一把梭,压力颇,而且精力有限不能够当每个领域还做的漂亮。后来生切图这同一职务,可以把页面写的双重优良一些,通过沙盘与要接口配合进行多少交互,前端都是严密耦合于后端,这种情景下支付,沟通成本,开发进程中速依赖成本且是较高的。前后端分离后,分工更鲜明,各自专注做好团结世界的转业,同时开工,不相互依赖,效率高
原理:(此图来源某博客,地址忘记。
望博主看到会联系自己长转载出处,在斯抱歉~)

图片 1
敞开一个本地的服务器来运转自己之前端代码,以这来法实的线及环境;
运用nodejs的express框架来开一个本地的服务器,然后使nodejs的一个http-proxy-middleware插件将客户端发于nodejs的请转发让真正的服务器,让nodejs作为一个中间层。
接下来便数据问题了,后端接口在开发被,前端需要数怎么处置吧?mockjs了解一下,
API地址https://github.com/nuysoft/Mo… ,当后端设计出AP接口文档后,我们即便足以运用mockjs模拟出对应格式的假数据进行开发,等到接口完全做到之后,再拓展接口联调

Vue是一个渐进式框架,容易下手、容易协同,能够很快灵的支付迭代。同时为是眼前主流三要命框架里学习成本最低的,目前,公司吧以主推vue作为首选框架,进行有关技术的培育。
Vue社区相对热度高,组件、库、轮子多,资源整合链接:https://segmentfault.com/p/12…
体积小、自由度高、脚手架创建的品种于带webpack打包构建工具
虽说vue是单页应用,但是好透过安排webpack进行多页开发

利用css预编译语言来描写css会提高编制css效率(具体提高多少百分较效率只是活动测试,我当找一段子写好的css,先用css写一举,再用less或者其他写一通计算耗时比例,这里忽略写样式上想的年华开展测试)
预编译语言可以定义变量(比如常用之颜色、字体、字号等)、嵌套写法、可以延续其他类似的性能、计算、内置函数等

图工具—echarts (对应场景 – xxx)
适配插件—flexible taobaoH5巅峰适配方案 (对应场景—xxx)
Lodash – JS函数库 (对应场景—xxx)
ElementUI – UI库 (对应场景—xxx)
One-Page-Nav – 导航插件 (对应场景—xxx)
切实状况我便不写了,根据你们不同之政工要求去判断用哪些类库插件之类的,预先决定好,以免半途做什么还如去消费工夫考虑


2.3构建工具

既然如此选择了vue框架,构建工具当然选择vue自带的webpack了,对于webpack有人说会配置型即实行,有人说要是深深研讨,这个看个人需自己道

2.4开销效率

#page>div.logo+ul#navigation>li*5>a{Item $}

1
#page>div.logo+ul#navigation>li*5>a{Item $}

遵下tab键,上述代码 等于

<div id=”page”> <div class=”logo”></div> <ul
id=”navigation”> <li><a href=””>Item
1</a></li> <li><a href=””>Item
2</a></li> <li><a href=””>Item
3</a></li> <li><a href=””>Item
4</a></li> <li><a href=””>Item
5</a></li> </ul> </div>

1
2
3
4
5
6
7
8
9
10
<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

背景:原项目写的纯css

比如

@base-size: 40px; @theme-color: #ccc; @my-selector: title; .aa {
font-weight: bold; } .@{my-selector} { font-size: @base-size; color:
@theme-color; margin: 100/2px 200/10px; &-ok { color: green; } &-no {
color: yellow; } > li{ &:extend(.aa); &:hover { color: #fff; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@base-size: 40px;
@theme-color: #ccc;
@my-selector: title;
 
.aa {
  font-weight: bold;
}
 
.@{my-selector} {
  font-size: @base-size;
  color: @theme-color;
  margin: 100/2px 200/10px;
  &-ok {
    color: green;
  }
  &-no {
    color: yellow;
  }
  > li{
    &:extend(.aa);
    &:hover {
      color: #fff;
    }
  }
}

编译后为:

.aa, .title > li { font-weight: bold; } .title { font-size: 40px;
color: #ccc; margin: 50px 20px; } .title-ok { color: green; } .title-no
{ color: yellow; } .title > li:hover { color: #fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.aa,
.title > li {
  font-weight: bold;
}
.title {
  font-size: 40px;
  color: #ccc;
  margin: 50px 20px;
}
.title-ok {
  color: green;
}
.title-no {
  color: yellow;
}
.title > li:hover {
  color: #fff;
}

此地仅写了一点点,功能还有众多之
less官网慎选自己选择自己
sass官网:选料我选我

描绘颜色色值的地方得点击调出取色板(不杀css),可以选颜色也足以利用吸管取色(屏幕任意处
不限于IDE内部),也起取色的网站可以收藏及书签工具文件夹里图片 2

比如:

let template = { ‘anchorList|3-6’:[{ ‘id|1-100’: 1, ‘name’: ‘@cname’,
‘date’: ‘@date(yyyy-MM-dd)’, biubiubiu: () =>
Mock.Random.string(‘abcdefghijklmnopqrstuvwxyz’, 5), ‘arr|2-5’: [{
‘age|10-20’: 0 }] }] } console.log(Mock.mock(template))

1
2
3
4
5
6
7
8
9
10
11
12
let template = {
    ‘anchorList|3-6’:[{
      ‘id|1-100’: 1,
      ‘name’: ‘@cname’,
      ‘date’: ‘@date(yyyy-MM-dd)’,
      biubiubiu: () => Mock.Random.string(‘abcdefghijklmnopqrstuvwxyz’, 5),
      ‘arr|2-5’: [{
        ‘age|10-20’: 0
      }]
    }]
  }
  console.log(Mock.mock(template))

输出:图片 3

 

2.5特性优化

☆ 尽量采取有变量
☆ 对象成员的嵌套深度和读取时间成为正比,嵌套过特别而开展优化

☆ 尽量减少DOM操作(访问和修改都算)的次数
☆ 访问元素时采取最抢之API
☆ 使用事件委托来压缩事件处理器底数据
☆ 减少重绘和重排的次数

☆ for循环、while循环、do-whild循环比for in 要快
☆ 优化循环体的复杂度
☆ 最小化属性查找:

for(let i = 0, len = arr.length; i < len; i++){ … }

1
2
3
4
for(let i = 0, len = arr.length; i < len; i++){
 
}

☆ 当极比少时
使用if-else更易读,而当条件较多时if-else性能负担比较switch大,易读性也没switch好。
☆ 对于if else 概率越怪之基准更为靠前判断 比如:

☆ 当计算量很死且更的时候,用Memoization缓存计算结果

较下四受到字符串拼接方法的性:
A:str = str + ‘a’+’b’
B:str += ‘a’ + ‘b’
C: arr.join(”)
D:str.concat(‘b’,’c’)
☆ Chrome65上测试的是A优于B优于C优于D
任何浏览器不确定

☆ 服务端设置HTTP头信息保管应会吃浏览器缓存
☆ 客户端云得的音信存到当地避免再次恳请(localstorage sessionstorage
cookice)
☆ 设置HTTP头信息,expiresgaosu告诉浏览器缓存多久
☆ 减少HTTP请求,合并css、js、图片资源文件等或用MXHR
☆ 通过辅助文件用Ajax获取可缩短页面加载时间

此处仅仅排了比重要之等同有些,安利一下本人前写的性质优化总结传送门

2.6模块化组件化

模块化:以前由CommonJs、AMD、CMD等实现,现在ES6的Module(原生模块化)完全好替,灵活、高效是模块化开发的便宜,对于有模块我怀念出口就输出,想引入就引入,输出引入也特待一个最主要词(export/import),而且ES6模片语法支持暴露常量、单一接口、所有接口、混合暴露、取号等等灵活快速是不必置疑的
配合webpack在构建的时段将资源整合打包压缩自动处理了一部分先用手动进行的习性优化问题了
组件化:解决复杂工作的痛点,把纷繁的事务分为多独零件分开开发管理为减低开发难度以及掩护成本。一个5000尽的页面和什只500行命名规范之零件哪个出、维护简单?
组件灵活随加随用,可复用避免重新支付,可结合以

2.7前方端安全

XSS是凭借浏览器错误的将攻击者提供的用户输入数据作为JavaScript脚论为执行了
解决办法:校验用户输入,特殊字符进行转义
Vue 双花括如泣如诉自带过滤效果

当地存储的富有数据就是还可能被攻击者的JS脚本读取到,所以敏感、机密信息都不建议于前者存储
const常量 let 块级作用域避免代码习惯不尽如人意导致的作用域混乱问题

2.8用户体验

☆ 优化加载速度,减少用户等时
☆ 减少非必要之无谓的操作

动画交互合理,短平快的相或者动画片更合乎知学宝,我们是功能型网站未是欣赏型网站,不需要太花里胡哨的动画片,那样倒多等时,适得其反
☆ 更舒适的UI(字体、图片、logo,按钮、列表等)
☆ 处理好过多微之底细的地方,比如… 针对项目的地方便不怎么了

至于用户体验这块小没找到比较大的修,如果大家发出道不错的接留言推荐~

end

写的莫是生仔细,但愿很多地方都蒙至了,欢迎留言补充~
流动:内容产生不当或不当处请求指正~转载请注明出处~谢谢合作!

1 赞 4 收藏
评论

图片 4

相关文章

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图