web前端开发常用的优化技巧汇总-CSDN博客

减少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;//通过背景定位到具体的位置，展示不同的图片即可
复制代码

}

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请求的次数） ps: 真实项目中，我们开始图片都不加载，页面首次加载完成，先把第一屏幕中可以看见的图片进行加载，随着页面滚动，再把下面区域中能够呈现出来的图片进行加载根据图片的懒加载技术，我们还可以扩充出，数据的懒加载 1，开始加载页面的时候，我们只把首屏或者前两屏的数据从服务器端进行请求（有些网站首屏数据是后台渲染好的，整体返回给客户端呈现 2，当页面下拉，滚动到哪个区域，再把这个区域需要的数据进行请求（请求回来做数据绑定以及图片延迟加载等） 3，分页展示技术采用的也是数据的懒加载思想实现的；如果我们请求获取的数据是很多的数据，我们最好分批请求，开始只请求第一页的数据，当用户点击第二页（微博是下拉到一定距离后，再请求第二页数据）的时候再请求第二项数据。

4，对于不经常更新的数据，最好采用浏览器的304缓存做处理（主要是服务器进行处理的）

**ps:**

    例如：
    第一次请求css和js下来，浏览器会把请求的内容缓存起来，如果做了304处理，用户再次请求css和js直接从缓存中读取，不需要再去服务器获取了（减少了HTTP请求次数）
    当用户强制刷新页面（ctrl+F5）或者当前缓存的css或js放生了变动，都会从新服务器端拉取

    对于客户端来讲，我们还可以基于localStorage来做一些本地处理，例如：第一次请求的数据或者不经常更新的css和js，我们都可以把内容存储在本地，下一次页面加载，我们从本地存储即可，我们设定一定的期限或者一些标识，可以控制在某一个阶段重新重服务器获取
复制代码

5，使用字体图标代替一些页面中的位图，这样不仅做适配的时候方便，而且更加轻量级，而且减少了HTTP请求的次数（类似于雪碧图）

6，如果当前页面中出现了Audio或者video标签，我们做好设置他们的preload=none：页面加载的时候，音频视频资源不进行加载，播放时再加载（减少页面首次加载HTTP请求的次数）、 ps： preload=auto：页面首次加载的时候就把音视频资源加载了 preload=metadata:页面首次加载的时候只把音视频资源的头部信息进行加载

7，在客户端和服务器端进行数据通信的时候，我们尽量采用JSON格式进行数据传输 [优势] 1，JSON格式的数据，能够清晰明了的展示出数据结构，而且也方便我们获取和操作 2，相对于很早以前的XML格式的传输，JSON格式的数据更加轻量级 3，客户端和服务器端都支持JSON 格式数据的处理，处理起来非常的方便

ps：真实的项目中，并不是所有的数据都基于JSON，我们尽可能这样做，但对于某些特殊需求（例如：文件流的传输或者文档传输），使用JSON就不合适了
复制代码

8，采用CDN加速 ps: 1，CDN:分布式（地域分布式）

关于编写代码的时候的一些优化技巧

>除了减少HTTP请求次数和大小可以优化性能，我们在编写代码的时候，也可以进行一些优化，让页面的性能有所提升（有些不好的代码编写习惯，会导致页面性能消耗太大，例如：内存泄漏）
1，在编写js代码的时候尽量减少对dom的操作（vue和react框架在这方面处理的非常不错）
    ps:
        在js中操作DOM是一个非常消耗性能的事情，但是我们又不可避免的操作DOM，我们只能尽量减少对于他的操作
        【操作dom的弊端】
        1，DOM存在映射机制（js中的dom元素对象和页面中的dom结构是存在映射机制的，一改都改），这种映射机制是浏览器按照W3C标准完成对js语言的构建和dom的构建（其实就是构建了一个监听机制）操作dom是同时要修改两个地方，相对于一些其他的js编程来说是消耗性能的
        2，页面中的DOM结构改变或者样式改变，会触发浏览器的回流（浏览器会把DOM结构重新进行计算，这个操作很耗性能）和重绘（把一个元素的样式重新渲染）

2，编写代码的时候更多的使用异步编程
    ps:
    同步编程会导致：上面东西完不成，下面任务也做不了，我们开发的时候。可以把某一个区域模块化都设置异步编程，这样只要模块之间没有不然的先后顺序，都可以进行独立加载，不会受到上面模块的堵塞影响

    尤其是ajax数据请求，我们一般都要使用异步编程，最好基于promise设计模式进行管理（项目中经常使用fetch、vue axios等插件来进行AJAX请求处理，原因这些插件中就是基于promise设计模式对ajax进行的封装处理）
    3，在真实项目当中我们尽可能避免一次性循环过多数据（因为循环操作是同步编程），尤其是要避免while导致的死循环操作

4，css选择器优化
    ps：
    1，尽量减少标签选择器的使用
    2，尽可能少使用id选择器，多使用样式类选择器（通用性强）
    3，减少选择器前面的前缀 ，例如：.header .nav .left a {} (选择器是从左导到右的)
5，避免使用css表达式
    ps:
    .box{
        background-color:expression((new Date()).getHours()%2?'red':'blue')
    }
6,减少页面中冗余代码，尽可能提高方法的重复使用率：‘低耦合高内聚’
7，css放在head中，js放在body尾部，让页面加载的时候，先加在css再加载js（先呈现页面，再给用户提供操作）
8，js中避免使用eval
    ps:性能消耗大  代码压缩后，容易出现代码执行错乱问题
9，js中尽量减少闭包的使用
    ps:
        1,闭包会形成一个不销毁的栈内存，过多的栈内存积累会影响页面的性能
        2,还容易导致内存的泄漏
10，在做DOM时间绑定的时候，尽量避免一个个的时间绑定，而是采用性能更高的时间委托来实现
    ps:
        1,时间委托（事件代理）
        2，把事件绑定给外层容器，当里面的后代元素相关行为被触发，外层容器绑定的方法也会被触发执行（冒泡传播机制导致），通过事件源是谁，我们做不同的操作即可

11，尽量使用css3动画代替js动画，因为CSS3的动画或者变形都开启了硬件加速，性能比js动画好
12，编写js代码的时候尽可能使用设计模式来构建体系，方便后期的维护，也提高了扩充性能
13，css中减少对滤镜的使用，页面中也减少对于flash的使用
复制代码

关于页面德芙SEO优化技巧

1，页面中杜绝出现死链接（404页面），而且对于用户输入一个错误页面，我们要引导到404提示页面中（服务器处理的）
2，避免浏览器中异常错误的抛出
    ps:
    1,尽可能避免代码的出错
    2，使用TRY CATCH做异常信息的捕获
3，增加页面
复制代码