前端二三事webweb优化&安全

web性能优化前端篇

2017-07-21  本文已影响436人  DecadeHeart

最近在写一个智慧教室行为管理网站，网站已经完工，老师见我没事儿干了，让我尝试如何在前端实现性能优化，以前也模糊知道一些，图片加载。http请求方面的东西，但是不全，现在就来总结一下，以下是比较常见的

减少http请求

80%的相应时间花在下载网页内容(images,css,js,flash)等，减少请求次数是缩短响应时间的关键，可以通过简化页面设计来减少请求次数，可使用一些技巧

减少DNS查询次数

DNS查询也消耗响应时间，如果我们网页内容来自各个不同的domain（例如嵌入了开放广告或者引入了外部图片或者脚本），首次解析这些domain也需要消耗一定时间，DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问速度有影响

缓存ajax

ajax可以帮助我们异步下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表，所以我们还是要注意应用一些规则提高ajax的响应速度

延迟加载

网页的加载其实是按照代码书写顺序加载的，这就涉及到了加载的优先级，首先应该让谁先加载，先显示，剩下的次要内容就可以延迟加载
js是典型的可以延迟加载的内容，一个比较激进的做法是在开发网页时确保网页在没有js的情况下也可以基本工作，然后通过延迟加载脚本完成一些高级功能

提前加载

与延迟加载相反，提前加载是为了提前加载接下来网页中访问的资源，下面是提前加载的了类型

image.png

减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重负担，500个元素和5000个元素在加载速度上会有很大差别

image.png

document.getElementsByTagName('*').length

显示google首页只有358个元素

根据域名划分内容

浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以浏览器增大并行下载连接，但是注意控制域名使用在2-4个之间，不然dns查询会增多
可以将静态资源放在类似于static.example.com,动态内容放example.com，这样做还有一个好处是可以在静态域名商避免使用cookie

减少iframe数量

iframe使用有优点也有缺点
优点

避免404

404代表服务器没有找到资源，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了
更糟糕的是我们网页加载中需要加载一个外部脚本，结果却返回一个404，不仅阻塞了其他脚本的下载，下载回来的内容客户端还会将其当成是js去解析

使用CDN

减少网页下载的内容，提高下载速度可以通过内容分发网络-CDN来提升，CDN通过部署在不同地区的服务器来提升客户的下载速度，可以通过免费的CDN供应商来分发网页资源

添加Expires或Cache-Control报文头

分为两个方面

避免空的图片SRC

空的图片src仍然会使浏览器发送请求服务器，这样完全是浪费时间，而且浪费服务器的资源，这种空请求造成的伤害不容忽略

减小cookie大小

cookie被用来做认证或个性化设置，其信息被包含在http报文当中，对于cookie我们要注意以下几点，来提高请求响应速度

将css置顶

css放在网页head中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已经下载的网页内容，这对内容多的网页很重要，用户不用一直等在一个白屏上，而是可以先看到已经下载的内容，如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器起在实现时都会努力避免重绘

用<link>代替@import

避免使用@import，因为这个相当于将css放在网页内容底部

将js置于底部

脚本在下载时，即使是来自不同的hostname浏览器也不会下载其他资源，因为浏览器要在脚本下载之后依次解析和执行，可以考虑下面方式来脚本提速

精简js和css

精简就是将js和css中空格和注释全部去掉
统计表明，精简后的文件平均减少了21%
用来帮助做精简的红菊很多
js compressors:

图片延迟加载

延迟加载时提高网页首屏显示速度的有效办法，当图片元素进入窗口可视区域的时候，它就会改变图像的src属性，从服务端加载所需的图片，这也是一个异步的郭层
推荐的简单易用的图片延迟加载插件-

优化css Sprite

使用小且可缓存的favicon.ico

网站文件favicon.ico不管服务器有没有，都会去尝试请求这个图标，这个图片的要求

上一篇下一篇

猜你喜欢

热点阅读