浅谈前端性能优化(PC版)

2018-06-28 11:00:00 2184 2 编辑:深正互联 来源:互联网

前端的性能优化是一个很宽泛的概念,最终目的都是为了提升用户体验,改善页面性能。面试的时候经常会遇到问谈谈性能优化的手段,这个深正互联分几大部分来概述,具体细节需要自己再针对性的去搜索,只是提供一个索引(太多了写不过来+主要是懒得写)。

这里PC端和移动端分开说了,业务场景不同,需要考虑各自的优化手段目前来看,前端优化的策略有很多,主要包括网络加载,页面渲染,CSS优化,JS执行优化,缓存,图片,协议几大类。这一篇先讲PC端的优化策略

性能优化

网络加载

1. 减少HTTP请求次数

建议尽可能的根据需要去合并静态资源图片、JavaScript代码和CSS文件,减少页面请求数,这样可以缩短页面首次访问的等待时间,另外也要尽量的避免重复资源,防止增加多余的请求

2. 减少HTTP请求大小

除了减少请求资源数,也要减少每个http请求的大小。比如减少没必要的图片,JS,CSS以及HTML等,对文件进行压缩优化,开启GZIP压缩传输内容,缩短网络传输等待延迟<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

4. 避免页面中空的href和src

当link标签的href属性为空,或者script、img、iframe标签的src属性为空的时候,浏览器在渲染的过程中还是会把href和src的空内容进行加载,直到加载失败。这样就阻塞了页面中其他资源的下载进程,并且最后加载的内容是无效的,因此要尽量避免。

5. 为HTML指定Cache-Control或者Expires

为HTML指定Cache-Control或者Expires可以将HTML内容缓存起来,避免频繁向服务器发送请求。在页面Cache-Control或Expires头部又消失,浏览器会直接从缓存读取内容,不向服务器发送请求

<meta http-equiv="Cache-Control" content="max-age=7200" />

<meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT"> 

6. 合理设置Etag和Last-Modified

对于未修改的文件,静态资源服务器会向浏览器端返回304,让浏览器从缓存中读取文件,减少下载的带宽消耗并能减少服务器的负载

<meta http-equiv="last-modified" content="Mon, 03 Jan 2017 17:45:57 GMT">

7. 减少页面重定向

一次重定向大概600毫秒的时间开销,为了保证用户能尽快看到页面内容,尽量避免页面的重定向

8. 静态资源不同域名存放

浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的,因此可以理由多个域名的主机来存放不同的静态资源,增大页面加载时资源的并行下载数。

页面渲染类

1. 把CSS资源引用放到HTML文件顶部

这样浏览器可以优先下载CSS并尽快完成页面渲染

2. JavaScript文件引用放到HTML文件底部

可以防止JavaScript的加载和解析执行对页面渲染造成阻塞。由于JavaScript资源默认是解析阻塞的,除非被标记为异步或者通过其他的方式异步加载,否则会阻塞HTML DOM解析和CSS渲染过程

3. 不要在HTML中直接缩放图片

在HTML中直接缩放图片会导致页面内容的重排重绘,此时可能会使页面中的其他操作产生卡顿,因此要尽量减少在页面中直接进行图片缩放

4. 减少DOM元素数量和深度

HTML中标签元素约的,标签的层级越深,浏览器解析DOM并绘制到浏览器中说花的时间就越长。

5. 尽量避免使用table、iframe等慢元素

<table>内容的渲染是讲table的DOM渲染树全部生成完并一次性绘制到页面上,所以在长表格渲染时很耗性能,应该尽量避免使用,可以考虑用ul代替。尽量使用异步的方式动态的加载iframe,因为iframe内资源的下载进程会阻塞父页面静态资源的下载以及HTML DOM的解析

6. 避免运行耗时的JavaScript

长时间运行的JavaScript会阻塞浏览器构建DOM树、DOM渲染树、渲染页面。所以任何与页面初次渲染无关的逻辑功能都应该延迟加载执行,这和JavaScript资源的异步加载思路一致

7. 避免使用CSS表达式和CSS滤镜

CSS表达式和滤镜的解析渲染速度是很慢的,再有其他解决方案的情况下应该尽量避免使用

// 不推荐

.opacity{

   filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询 微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询