浏览器性能优化

focusj 发布于2019-08-01 17:19 / 654人阅读

摘要：和类似，但是浏览器关闭则会全部删除，和相同，实际项目中使用较少。启用压缩在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。

1、减少http请求，合理设置 HTTP缓存

http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。

减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

① 简单的图片效果可以使用html+css、canvas或者svg来替换。
② 合并CSS、合并javascript、合并图片（webPack等包管理工具）
③ 图片格式，大小选择，图片优化

2、应用浏览器缓存：
① http缓存（文件级缓存）

② cookie: 储存在用户本地终端上的数据(通常经过加密)有长度和个数限制，浏览器端也可以通过document.cookie来获取cookie，并通过js浏览器端也可以方便地读取/设置cookie的值。
③ localStorage: localStorage是html5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。localstorage大小有限制，不适合存放过多的数据，如果数据存放超过最大限制会报错，并移除最先保存的数据。localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据
localStorage核心API:
localStorage.setItem(key, value) //设置记录
localStorage.getItem(key) //获取记录
localStorage.removeItem(key) //删除该域名下单条记录
localStorage.clear() //删除该域名下所有记录

注：localStorage对象的属性值只能是字符串，json对象可以根据当然也可以借助JSON类，将对象转换成字符串保存，然后在取出来的时候将json字符串转换成真正可用的json对象格式。
④ sessionstorage：
sessionStorage和localstorage类似，但是浏览器关闭则会全部删除，api和localstorage相同，实际项目中使用较少。
⑤ application cache
application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。

3、启用压缩

    在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。

采用网上在线压缩工具（jQuery MiniUI）自己压缩或者通过webpack、gulp等打包工具进行压缩处理。

4、CSS Sprites

5、LazyLoad Images：对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。
①jqueryLazyload方式
②echo.js方式

6、CSS放在页面最上部，javascript放在页面最下面

后续文章还会具体讲各种优化方法，希望大家一起学习~

GPU云服务器云服务器性能优化优化系统性能网站性能优化页面性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51098.html

前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

Winer 2019-08-20 11:04 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

philadelphia 2019-08-01 15:44 评论0 收藏0
图说 WebAssembly（五）：高性能原因

摘要：本文是图说系列文章的第五篇。这样的话，使用的开发者也不需要做任何适配，但是它们却能获得更高性能。该图并不是用来准确的衡量其性能的。运行编写出高性能的代码是可能的。这种清理工作由引擎自动进行，称为垃圾回收。本文是图说 WebAssembly 系列文章的第五篇。如果您还未阅读之前的文章，建议您从第一篇入手。在上一篇文章中，我们说到了使用 WebAssembly 和 JavaScript...

seal_de 2019-08-22 16:59 评论0 收藏0
[ 性能优化 ] 我们该优化什么？如何权衡？优化原则？ (2)

摘要：如何权衡优化优化原则优化的目的是希望降低程序的整体开销。虽然在程序中有许多因素可以优化，但通常人们会认为这个开销就是程序的执行时间，其实我们更应该将重点放在对程序整体开销最大的那个部分。性能是一个网站成功的关键，然而，如今日益丰富的内容和大量使用Ajax的Web应用程序已迫使浏览器达到其处理能力的极限，这就迫使我们需要一些技术来优化我们网站的性能！我相信已经有不少人看过了Yah...

hedzr 2019-08-21 10:30 评论0 收藏0
当面试官问你如何进行性能优化时，你该这么回答(一)

摘要：背景在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。在对这些环节进行优化之前，我们需要知道如何监控这些环节花费了多少时间。为了优化链接的环节，前端这里还需要对资源使用，雪碧图，代码合并等手段。背景在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。所以面试时，面试官总会问你一个问题，如何进行性能优化呢？如...

elisa.yang 2019-08-22 15:47 评论0 收藏0