前端页面优化有哪些_前端页面优化解决方法

前端页面优化有哪些_前端页面优化解决方法 网站前端的用户体验，决定了用户是否想要继续使用网站以及网站的其他功能，网站的用户体验佳，可留住更多的用户。

除此之外，前端优化得好，还可以为企业节约成本。

那么我们应该如何对我们前端的页面进行性能优化呢？前端性能优化可以分为三个方面：接口访问优化、静态资源优化和页面渲染速度优化。

一、接口访问优化1.1、减少http请求，合理设置 HTTP缓存http协议是无状态的应用层协议，每次发送http请求时，都需要建立连接、通信、断开连接，在服务器端每个http都需要开启独立的线程去处理。

所以尽量减少http请求，尽可能地提高访问性能。

减少http请求的方法：合并 js、css、图片等文件，合并成一个文件，浏览器就只需请求一次就可以了。

图片合并要适当，不能想着优化呢，盲目地都合并成一张图片。

借用浏览器缓存。

恰当的缓存设置可以大大减少http请求。

不懂浏览器缓存的可参考。

接口合并。

前端交互，经常需要请求多个并行或串行接口，此时可以通过接口合并方式，提高接口访问速度。

能使用css的尽量不使用js，能使用js的尽量不用三方插件，避免三方插件大量的库。

1.2、减少cookie传输cookie 存在于 http 头，在客户端与服务器之间交换，尽可能地控制 cookie 的大小，cookie越小，响应速度越快，减少 cookie 传输，响应速度更快。

1.3、使用CDN提供静态文件使用 CDN 可以更快地在全球范围内获取到你的静态文件，加快网页加载。

1.4、启用 GZIP 压缩http 协议上 GZIP 编码，是一种用来改进 web 应用程序的。

开启 GZIP 后，服务器会把网页内容压缩后传输，一般能压缩到原大小40%，这样网页传输速度就更快了。

GZIP 有两大好处：一是减少存储空间，二是通过网络传输文件时，可以减少传输时间。

1.5、分域存放资源HTTP 客户端一般对同一个服务器的并发连接个数都是有限制的，通常最大并行连接为四了，剩下的会进入等待队列，等前边的执行完毕，等待的才会执行。

所以利用多域名主机存放资源，增加并行连接量，缩短资源加载时间。

1.6、减少页面重定向开启 https 可以有效防范攻击，保证用户始终访问到网站的加密连接，保护数据安全，同时省去 301/302 跳转的时间，大大提升网站的安全系数和用户体验。

如果在网站设置当用户访问域名的时候强制 https 进行 301 或者 302 跳转，但是这个过程中，用到 HTTP 因此容易发生劫持，受到第三方的攻击。

所以尽可能使用https安全。

1.7、避免使用iframeiframe 相当于本页面又嵌套了一个页面，消耗性能，还要加载嵌套页面的资源，所以更消耗时间。

1.8、借用浏览器缓存ajax 请求到的数据，可以缓存到浏览器，下次使用的时候无需再次获取，直接取缓存数据就可以。

这个会根据具体的项目来做，比如常用的角色类型就会缓存，获取到的普通数据为了保证实时性，不能使用缓存。

二、静态资源优化2.1、压缩 html、css、js 等文件删除不必要的空格、注释和中行，减少文件大小，显著减少用户下载时间，加快网页加载速度。

可以直接使用压缩工具，可以自动删除所有不必要内容。

2.2、在 js 之前引用 css这是一个小细节，js 执行的时候会进入阻塞，如果放入 js 之后加载，会等待 js 执行完成之后才能加载 css，渲染页面，此时就会出现布局错乱。

所以 css 文件需要非阻塞引入，以防DOM 花费更多时间才能渲染。

2.3、非阻塞 jsjs 会阻止 html 文档的正常解析，当解析器到达 script 标记时，它会停止解析并执行脚本。

所以我们经常把 script 引入的 js，放到 html 中最底下。

如果需要让脚本位于页面顶部，建议添加非阻塞属性。

经常使用 defer 和 async 来异步加载js文件。

<!-- 使用defer --><script defer src="foo.js" ></script><!-- 使用async --><script async src="foo.js"></script>2.4、图片压缩最常见的就是 css 雪碧，就是将很多很多的小图标放在一张图片上，就称为雪碧图。

雪碧图最大优点就是可以减少http请求，除此也能压缩图片文件大小。

使用的时候，通过设置 background-position ，移动图片的位置。

除此之外，网站用到的大图，也需要在保证图片质量前提下优化到最小。

2.5、矢量图替代位图矢量图（SVG）往往比图像小很多，缩放的时候不失真，这些图像还可以通过 css 进行动画和修改，比位图方便控制。

可以的话，尽量用矢量图多点。

2.6、js代码相关优化尽量减少使用闭包，因为闭包所在的上下文不会被释放。

js避免嵌套循环和死循环，一旦遇到死循环，浏览器会卡死。

在js封装过程中，尽量做到低耦合高内聚。

减少页面的冗余代码。

尽量减少递归，避免死递归。

尽量使用window.requestAnimationFrame替代传统的定时器。

三、页面渲染速度3.1、懒加载素材类的网站，页面一屏展示很多图片，而且图片还不能失真，图片加载太多，网页加载慢得很，所以就引用懒加载，只加载可视区的图片，避免加载可以能不需要或不必要的图像。

改善页面的响应时间。

3.2、避免响应式布局响应式网站虽然能够兼容所有终端设备，但是会出现隐藏部分无用内容，浪费带宽，加载时间还长，页面的渲染时间也长。

想更多了解响应式布局，请点击《前端响应式布局为什么是个坑？》。

3.3、设置大小，避免重绘遇到 img 标签，会立马发送一个 http 请求，下载图片，页面继续向下渲染，等图片加载成功了，发现图片的宽高大小发生变化，影响后边排版，所以页面会重新再绘制一次这部分。

所以尽可能设置图片的大小。

3.4、减少DOM元素解析 html 内容，将标签转化为DOM节点，之后再解析其他文件，DOM元素越少，也就是标签越少，文件转化得越快，加载速度也就快了。

3.5、减少 Flash 的使用flash 文件比较大，加载起来耗时。

除此，flash 插件还需要运行才能运行，最主要有些浏览器flash插件马上要下线了，建议尽量不用 flash。

3.6、文件顺序css文件放在最顶部，优先渲染。

js放在最底部，避免阻塞。

让网页如何加载更快，有好多的细节，还是要好好提升自己的技能~~~~~~~~~