前端开发页面优化方法-web前端页面开发接私活

WEB前端开发常用优化技术总结 减少HTTP请求次数或减小请求数据大小 链接通道的阻塞，为了提高页面加载速度和运行性能，我们应该减少请求次数减少 HTTP 请求并减少请求内容的大小（请求内容越大，花费的时间越长）。

使用CSS Sprite（CSS Sprit/CSS Image Sprite）技术，将一些小图合并为一张大图，使用时通过背景图定位到特定的小图上

.pubBg{
    background: url('../img/sprit.png') no-repeat;
    background-size: x y; /*和图片的大小保持一致*/
}
.box{
    background-position: x y; /*通过背景定位，定位到具体的位置，展示不同的图片即可*/
}

在实际项目中前端开发页面优化方法，我们最好合并压缩CSS或JS文件。特别是在移动端开发时，如果css或js内容不多，可以采用嵌入的方式，减少HTTP请求次数，加快速度页面加载速度

CSS合并为一个，JS最好合并为一个。 首先，使用一些工具（如：webpack）将合并后的CSS或JS压缩成xxx.min.js，以减小文件大小

在服务器端启用资源文件的 GZIP 压缩

使用图片的懒加载技术，当页面开始加载时，不请求真实图片的地址，而是使用默认图片占位。 请求数）

在实际项目中，我们一开始不加载任何图片。 页面第一次加载后，先加载首屏能看到的图片，然后随着页面滚动加载后面区域能显示的图片

根据图片的懒加载技术，我们还可以扩展数据的懒加载

在开始加载页面时，我们只向服务器请求首屏或前两屏的数据（有些网站的首屏数据是在后台渲染，整体返回给客户端的）。 当页面下拉滚动到哪个区域时，请求该区域需要的数据时（利用请求的数据进行数据绑定和图片延迟加载等），分页显示技术也是通过延迟加载实现的data：如果我们请求的数据很多，我们最好分批请求。 一开始只请求第一页的数据，当用户点击第二页（微博下拉到一定距离后，请求第二页的数据。。。）的数据时请求第二页

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

例如：

第一次请求CSS和JS时，浏览器会缓存请求的内容。 如果304处理完成，用户再次请求CSS和JS，直接从缓存中读取，无需再去服务器端获取（减少HTTP请求次数）

当用户强行刷新页面（CTRL+F5）或当前缓存的CSS或JS发生变化时，会重新从服务器拉取

...

对于客户端，我们也可以在localStorage的基础上做一些本地存储，比如：第一次请求的数据或者不经常更新的CSS、JS，我们可以把内容存储到本地，下次访问页面时loaded，我们可以从本地获取，我们设置某个时间段或者一些标识，可以控制在某个阶段从服务器重新获取

使用字体图标替换页面上的一些位图（图片），不仅方便适配，而且更轻量，减少HTTP请求次数（类似于sprite图片）

如果当前页面有Audio或Video标签，我们最好设置它们的preload=none； 页面加载时不会加载音视频资源，播放时会加载（减少首页加载的HTTP请求数）

预加载=自动； 首次加载页面时加载音频和视频

预加载=元数据； 第一次加载页面时，只加载音视频资源的头部信息

在客户端和服务端进行数据通信时，我们尽量使用JSON格式进行数据传输

[优势]

JSON格式的数据可以清晰的展示数据结构，也方便我们获取和操作。 与很久以前的XML传输相比，JSON格式的数据更加轻量级。 客户端和服务端都支持JSON数据的处理。 处理起来非常方便

在实际项目中，并不是所有的数据都应该基于JSON，我们尽量做到这一点，但是对于一些特殊的需求（例如：文件流传输或者文档传输），使用JSON是不合适的

使用CDN加速

CDN：分布式（Geographically Distributed） 编写代码时的一些优化技巧 除了减少HTTP请求的数量和大小来优化性能外，我们还可以在编写代码时进行一些优化来提高页面的性能（有些不是很好的代码编写习惯会造成过多的页面性能消耗，例如：内存泄漏）

写JS代码时，尽量减少对DOM的操作

在JS中操作DOM是一件很耗性能的事情，但是我们不可避免的要操作DOM，我们只能尽量减少对它的操作

【操作DOM的缺点】

DOM有映射机制（JS中的DOM元素对象和页面中的DOM结构都有映射机制，改了就改了）。 这种映射机制是浏览器按照W3C标准对JS语言和DOM进行构建。 构建（其实就是构建监控机制），操作DOM就是同时修改两个地方。 与其他一些JS编程相比，页面中的DOM结构改变或者样式改变都会触发浏览器的回流。  （浏览器会重新计算DOM结构，性能消耗很大）和重绘（重新渲染一个元素样式）

写代码的时候，多使用异步编程

同步编程会导致：上面的事情无法完成，下面的任务也无法完成。 我们在开发的时候，可以将某个区域的模块设置为异步编程，这样只要模块之间没有一定的顺序前端开发页面优化方法，就可以独立加载。 不会受到上面模块阻塞的影响（用的不多）

尤其是AJAX数据请求，一定要使用异步编程，最好是基于promise设计模式进行管理（项目中经常使用fetch、vue axios等插件进行AJAX请求处理，因为这些插件都是基于用于封装的 ajax 承诺设计模式）

在实际项目中，我们尽量避免一次循环过多的数据（因为循环操作是同步编程），尤其要避免while导致的无限循环操作

CSS 选择器优化

尽量少用标签选择器 尽量少用ID选择器，多用样式类选择器（通用性强） 减少选择器前面的前缀，例如：.headerBox .nav .left a{}（选择器来自右边看左边）

避免使用 CSS 表达式

/*CSS表达式*/
.box{
    background-color:expression((new Data()).getHours()%2?'red':'blue')
}

尽量减少页面中的冗余代码，提高方法的复用率：“低耦合高内聚”最好把CSS放在HEAD，JS放在BODY最后。 页面加载时，先加载CSS，再加载JS（先渲染页面，再提供操作给用户）

避免在 JS 中使用 eval

性能消耗大 代码压缩后，容易出现代码执行乱序

尽量减少在 JS 中使用闭包

闭包会形成一个不会被销毁的栈内存。 过多的栈内存堆积会影响页面的性能，容易导致内存泄露

闭包也有自己的优势：保护和保存，我们只能尽量减少，但无法避免

在做DOM事件绑定的时候，尽量避免一个一个的事件绑定，而是使用性能更高的事件委托来实现

事件委托（event delegation）

将事件绑定到外部容器。 当内部子孙元素的相关行为被触发时，外层容器绑定的方法也会被触发执行（冒泡传播机制导致）。 根据事件源是谁，我们做不同的操作即可

尽量使用CSS3动画而不是JS动画，因为CSS3动画或者变形是开启了硬件加速的，性能比JS动画要好。 在编写JS代码时，尽量使用设计模式构建系统，方便后期维护，提高可扩展性。  CSS等 减少过滤器的使用，减少页面FLASH的使用 页面SEO优化技巧 避免页面出现死链接（404页面），对于用户输入的错误页面，我们会进行引导到404提示页面（服务器处理）

避免在浏览器中抛出异常错误

尽可能避免编码错误

使用 TRY CATCH 捕获异常信息

增加页面关键词优化