###减少HTTP请求次数或者减少请求数据的大小
>页面中每发送一次http请求,都需要完成请求+响应这个完整的HTTP事务,会消耗一些时间,也可能会导致HTTP链接通道的堵塞,为了提高页面加载速度和运行的性能,我们应该减少HTTP的请求次数和减少请求内容的大小(请求的内容越大,消耗的时间越长)
1.采用CSS雪碧图(CSS Sprit/CSS图片精灵)技术,把一些小图合并在一张大图上,使用的时候通过背景图片定位,定位到具体的某一张小图上。
***CSS
.pubBg{
background:url('../img/sprit.png') no-repeat;
background-size:x y; /*和原图的大小保持一致*/
}
.box{
background-position:x y; /*通过背景定位,定位到具体的位置,展示不同的图片即可*/
}
......
<div class='pubBg box'></div>
2.真实项目中,我们最好把CSS或者JS文件进行合并压缩:尤其是在移动端开发的时候,如果CSS或者JS内容不是很多,我们可以采取内嵌式,告别外链式,以此减少HTTP请求次数,降低相应的响应时间,加快页面加载速度。
>1)CSS合并成一个,JS最好合并成一个
>2)首先通过一些工具(例如:Webpack)把合并后的CSS或者JS压缩成xxx.min.js,减少文件大小
>3)服务器端开启资源文件的GZIP压缩
......
>通过一些自动化工具完成CSS 以及JS的合并压缩,或者在完成LESS转CSS,ES6转ES5等操作,我们把这种自动化构建模式,称之为前端“工程化”开发。
>
3.采用图片懒加载技术,在页面开始加载的时候,不请求真实的图片地址,而是用默认图占位,当页面加载完成后,在根据相关的条件依次加载真是图片
(减少页面首次加载HTTP请求的次数)
>真实项目中,我们开始图片都不加载,页面首次记载完成,先把第一屏幕中可以看见的图片进行加载,随着页面的滚动,在把下面区域中能够呈现出来的图片进行加载
>根据图片懒加载技术,我们还可以扩充出,‘数据的懒加载’
>1)开始加载页面的时候,我们只把首屏或者前两屏的数据从服务器端进行请求(有些网站首屏数据是后台渲染好,整体返回给客户端呈现的)
>2)当页面下拉,滚动到哪个区域,再把这个区域需要的数据进行请求(请求回来做数据绑定以及图片延迟加载等)
>3)分页展示技术采用的也是数据的懒加载思想实现的:如果我们请求获取的数据是很多的数据,我们最好分批请求,开始只请求第一页的数据,当用户点击第二页(微博是下拉到一定距离后,再请求第二页数据......)的时候在请求第二页数据......
4.对于不经常更新的数据,最好采用浏览器的304缓存做处理(主要是由服务器端来处理的)
>例如:
>第一次请求CSS和JS下来,浏览器会把请求的内容缓存起来,如果做了304处理,用户再次请求CSS和JS,直接从缓存中读取,不需要再去服务器获取了(减少了http请求次数)
>当用户强制刷新页面(Ctrl+F5)或者当前缓存的CSS或者JS发生了变动,都会从新从服务器端拉取
>对于客户端来说,我们还可以基于localStorage来做一些本地存储,例如:第一次请求的数据或者不经常更新的CSS和js,我们都可以吧内容存储在本地,下一次页面加载,我们从本地中获取即可,我们设定一定的期限或者一些标识,可以控制在某个阶段重新从服务器端获取。
5.使用字体图标代替一些页面中的位图(图片),这样不仅做适配的时候方便,而且更加轻量级,而且减少了HTTP请求次数(类似于雪碧图)
6.如果当前页面中出现audio或者VIDEO标签,我们最好设置他们的preload=none;页面加载的时候,音视频资源不进行加载,播放的时候再开始加载(减少页面首次加载HTTP请求的次数)
>preload=auto:页面首次加载的时候就把音视频资源进行加载了
>preload=metadata:页面首次加载的时候只把音视频资源的头部信息进行加载
...
7.在客户端和服务器端进行数据通信的时候,我们尽量采用JSON格式进行数据传输。
>1)JSON格式的数据,能够清晰明了的展示出数据结构,而且也方便我们获取和操作。
2)相对于很早以前的XML格式传输,JSON格式的数据更加轻量级
3)客户端和服务器端都支持JSON格式数据的处理,处理起来非常的方便
>>真实项目中,并不是所有的数据都是基于JSON,我们尽可能这样做,但是对于某些特殊需求(例如:文件流的传输或者文档的传输),使用JSON就不合适了
8.采用CDN加速
>CDN:分布式(地域分布式)
>
###关于编写代码的时候的一些优化技巧
>除了减少HTTP请求次数和大小可以优化性能,我们在编写代码的时候,也可以进行一些优化,让页面的性能有所提升(有些不好的代码编写习惯,会导致页面性能消耗太大,例如:内存泄漏)
1.在编写JS代码的时候,尽量减少对DOM的操作(vue和react框架在这方面处理的非常不错)
>在JS中操作DOM是一个非常消耗性能的事情,但是我们又不可避免的操作DOM,我们自能尽量减少对于它的操作
>
>[操作DOM弊端]
>1)DOM存在映射机制(JS中的DOM元素对象和页面中的DOM结构是存在映射机制的,一改则都改),这种映射机制,是浏览器按照W3C标准完成对JS语言的构建和DOM的构建(其实就是构建了一个监听机制),操作DOM是同时要修改两个地方,相对于一些其他JS编程来说是消耗性能的。
>2)页面中的DOM结构改变或者样式改变,会触发浏览器的回流(浏览器会把DOM结构重新进行计算,这个操作很耗性能)和重绘(把一个元素的样式重新渲染)
2.编写代码的时候,更多的使用异步编程
>同步编程会导致:上面东西完不成,下面任务也做不了,我们开发的时候,可以把某一区域模块都设置为异步编程,这样只要模块之间没有必然的先后顺序,都可以独立进行加载,不会受到上面模块的堵塞影响(*用的不多)
>尤其是AJAX数据请求,我们一般都要使用异步编程,最好是基于PROMISE设计模式进行管理(项目中经常使用fetch、vue axios等插件来警醒AJAX请求处理,因为这些插件就是基于promise设计模式对AJAX进行的封装处理)
3.在真实项目中,我们尽可能避免一次性循环过多数据(因为循环操作是同步编程),尤其是要避免while导致的死循环操作
4.CSS选择器优化
>1)尽量减少标签选择器的使用
>2)尽可能少使用ID选择器,多使用样式类选择器(通用性强)
>3)减少选择器前面的前缀,例如:.headerBox.nav.left a{} (选择器是从右向左查找的)
head-nav-left
5.避免使用CSS表达式
CSS
/*CSS表达式*/
.box{
background-color:expression((new
Date()).getHours()%2?'red';'blue')
}
6.减少页面中的冗余代码,尽可能提高方法的重复使用率:“低耦合高内聚”
7.最好CSS放在HEAD中,JS放在body尾部,让页面加载的时候,先加载CSS,再加载JS(先呈现页面,再给用户提供操作)
8.JS中避免使用eval
>1)性能消耗大
>2)代码压缩后,容易出现代码错乱的问题
9.JS中尽量减少闭包的使用
>1)闭包会形成一个不销毁的栈内存,过多的栈内存累积会影响页面的性能
>2)还会容易导致内存的泄露
>
>闭包也有自己的优势:保存和保护,我们只能尽量减少,但是无可避免
10.在做DOM事件绑定的时候,尽量避免一个个的事件绑定,而是采用性能更高的事件委托来实现
>事件委托(事件代理)
> 把事件绑定给外层容器,当里面的后代元素相关行为被触发,外层容器绑定的方法也会被触发执行(冒泡传播机制导致),通过事件源是谁,我们做不同的操作即可
11.尽量使用CSS3动画代替JS动画,因为CSS3的动画或者变形都开启了硬件加速,性能比JS动画好
12.编写JS代码的时候尽可能使用设计模式来构建体系,方便后期的维护,也提高了扩充性能等。
13.CSS中减少对滤镜的使用,页面中也减少对于FLASH的使用
###关于页面的SEO优化技巧
1.页面中杜绝出现死链接(404页面),而且对于用户输入一个错误页面,我们要引导到404提示页面中(服务器处理的)
2.避免浏览器中异常错误的抛出
>尽可能避免代码出错
>使用TRY CATCH做异常信息捕获
>......
3.增加页面关键词优化
*JS没有加载本地文件的能力