1、减少HTTP的请求次数或请求文件的大小

  • 页面中每发送一次HTTP请求,都需要完成请求+响应这个完整的HTTP事务,会消耗一些时间,也可能会导致HTTP链接通道的堵塞,为了提高页面加载速度和运行的性能,我们应该减少HTTP的请求次数和内容的大小(请求的内容越大,消耗的时间越长)

1.1 采用CSS雪碧图技术

  • 把一些小图合并在一张大图上,使用的时候使用背景图片定位,定位到某一张小图上

1.2 合并压缩(css/js)

  • (在移动端开发的时候,如果css和js不是很多,我们可以采用内嵌式,告别外链式,以此减少HTTP的请求次数,加快页面的加载速度)

      1. css合并成一个,js也最好合并成一个

      2. 通过一个工具,如:(webpack,gulp…)把合并和压缩成xxx.min.js,减小文件的大小

      3. 服务器端开启资源文件的GZIP压缩

1.3 采用图片懒加载技术

  • 在页面开始加载的时候,不请求真实的图片地址,而是采用默认图进行占位,当页面加载完成后,再根据相关的条件依次加载真实的图片(减少页面首次加载http请求的次数);根据图片懒加载技术,我们还可以扩充出,数据的懒加载

      1. 开始加载页面的时候,我们只把首屏或者前两屏的数据从服务器端进行请求(有一些网站首屏数据是后台渲染好,整体返回给客户端呈现的)

      2. 当页面下拉,滚动到哪个区域,在把这个区域需要的数据从后台进行请求

      3. 分页展示技术就是采用数据懒加载思想进行实现的：最好是分批进行请求

1.4 采用json格式进行数据传输

  • 【优势】

      1. 可以清晰明了的展示数据结构,也方便自己的获取和操作

      2. 相比xml格式的数据,json格式更加轻量级

      3. 客户端和服务端都支持json格式数据的处理,处理起来非常的方便

  • 【注意】

    • 并不是所有的数据都要基于json,我们尽可能的这样做,但是对于某些特殊需求(文件流的传输或者文档传输),使用json就不是很合适了

1.5 音频处理

  • 如果当页面中出现了audio或者video的时候,我们最好设置他们的preload=none;页面加载的时候,音视频资源不进行加载,播放的时候再进行加载

  • preload=auto 页面首次加载的时候就把音视频资源进行加载了

  • preload=mediadata 页面首次加载的时候只把音视频资源的头部信息进行加载

1.6 304缓存处理(主要由服务器端进行处理)

  • 例如：第一次请求css和js下来,浏览器会把请求的内容缓存起来,如果做了304处理,用户再次请求css和js,直接从缓存中读取,不需要再去到服务器去获取了(减少了HTTP的请求次数)

  • 对于客户端来讲,我们还可以基于localStorage来做一些本地存储

1.7 使用字体图标代替icon图标

  • 这样不仅适配更方便,而且更加轻量级,减少了http的请求次数

1.8 采用CDN加速

2、编写代码的一些优化技巧

  • 除了减少HTTP请求次数和大小可以优化性能,我们在编写代码的时候也可以进行一些优化,让页面的性能有所提升

2.1 尽量减少对DOM的操作

  • 在js中操作DOM是一件很消耗性能的事情,但是我们又不可避免的操作DOM,我们只能尽量减少对它的操作

  • 【操作DOM的弊端】：

      1. DOM存在映射机制(一改则改),这种映射机制是浏览器按照W3C标准完成对Js语言的构建DOM,操作DOM是同时要修改两个地方,相对来说是消耗性能的

      2. 页面中的DOM结构改变或者样式改变,会触发浏览器的回流(会把DOM重新进行计算)和重绘(把一个元素的样式重新渲染)

2.2 更多的使用异步编程

  • 同步编程会导致：上面东西完不成,下面任务也做不了(我们开发的时候,可以把某一个区域模块都设置为异步编程,这样只要模块之间没有必然的先后顺序,都可以独立进行加载,不会受到上面模块的堵塞影响)

  • 尤其是ajax数据请求,我们一般都要使用异步编程,最好是基于promise设计模式进行管理(项目中经常使用fetch,axios等插件进行请求处理,因为这些插件都是基于promise设计模式对ajax进行封装处理的)

2.3 避免一次性循环过多的数据

  • (因为循环操作时同步过程),尤其是要避免死循环

2.4 css选择器优化

    1. 尽量减少标签选择器的使用

    2. 尽可能少使用Id选择器,多使用样式选择器(通用性强)

    3. 减少选择器前面的前缀

    • 例如：.headerBox .nav .left a {} (选择器是从右向左查找的)

2.5 避免使用css表达式

2.6 减少页面中的冗余代码

  • 尽可能的提高方法的重复使用率：低耦合高内聚

2.7 文件的放置位置

  • 最好css放在head中,js放在body尾,让页面加载的时候先加载css,再加载js(先呈现界面,再给用户提供操作)

2.8 Js中避免使用eval

    1. 性能消耗大

    2. 代码压缩后,容易出现代码错乱问题

2.9 Js中尽量减少闭包的使用

    1. 闭包会形成一个不销毁的栈内存,过多的栈内存累积会影响页面的性能

    2. 容易导致内存的泄露

  • 当然闭包也有它的优势：保存和保护(我们只能尽量去减少,但是无可避免)

2.10 采用事件委托

  • 在做DOM事件操作的时候,尽量避免一个个的事件绑定,而是采用性能更高的事件委托(事件代理,把事件绑定给外层容器)来实现

2.11 使用css3动画

  • 尽量使用css3动画代替js动画,因为css3的动画或者变形都开启了硬件加速,性能比js动画好

2.12 使用设计模式来编写页面

  • 编写代码的时候尽可能的使用设计模式来构建体系,方便后期的维护,提高了扩充性

2.13 css中减少对滤镜和flash的使用

3、页面的SEO优化技巧

  • 1、页面中杜绝出现死链接(404),而且对于用户输入一个错误页面,我们要引导到404页面(服务器处理的)

  • 2、避免浏览器中异常错误的抛出

      1. 尽可能的避免代码出错

      2. 使用try…catch做异常信息捕获

  • 3、增加页面关键词的优化