前端性能优化,我们可以做哪些?
1、雪碧图技术
这个很简单,把每个小图标都整合到一张大图上面,极大的减轻http请求数,同时能够让图片快速加载进来。
考虑到当前的5g的发展前景,以后图片不会造成加载延迟的现象。
2、浏览器渲染机制
输入一个网址:我们得到服务端html文件。
根据html文件,从头到尾的一个个的依次渲染页面渲染页面。
但是遇到图片——不会等待图片的加载完毕,会直接渲染下面的标签。
如果图片加载出来——根据图片选择,由于图片要占用空间,决定是否重新加载页面,这个概念叫reflow。(优化的方式——给图片宽高)。
reflow和什么相关:占位面积、定位方式、边距。
对于样式中的颜色变化,叫做repaint、这个就只需要把颜色改变。所以性能上来说,repaint稍微比reflow高点。
repaint和什么相关:和颜色变化相关
3、webpack、gulp等打包工具的使用
压缩代码,减少了代码体积。
可以把多个css文件,多个js文件,合并为一个css文件/js文件。
合并文件,让我们减少了http请求数。
4、避免页面跳转,也就是使用单页面应用的开发。
每次页面跳转,就是一次html文件的下载过程。而这个过程,我们首先从服务端下载网页,再进行渲染,网页性能体验会很差。而单页面应用,它从一开始,就把完整的网页给加载到本地。
5、延迟加载、懒加载技术
什么是懒加载技术:
- 原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
- 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>懒加载技术</title><style>li{width: 300px;height: 400px;}li img{width: 100%;height: 100%;}</style><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>window.onload = function () {var lazyLoad = (function () {var timer = 0;function init() {$(window).on('scroll',function () {timer && clearTimeout(timer);timer = setTimeout(function () {console.log('scroll')showImage();},200)});showImage();}function showImage() {$('img').each(function () {var current = $(this);if(current.attr('isLoaded')) return;shouldShow(current) && showImg(current);})}function shouldShow(node) {var scrollH = $(window).scrollTop(),winH = $(window).height(),top = node.offset().top;if(top < winH + scrollH){return true;}else{return false;}}function showImg(node) {node.attr('src',node.attr('data-src'));node.attr('isLoaded',true);}return {init: init}})();lazyLoad.init();};</script></head>
<body><ul><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li><li><img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"alt=""></li></ul>
</body>
</html>
6、将css放在HEAD中
如果将 CSS放在其他地方比如 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,用户体验比较糟糕。除此之外,有些浏览器会在 CSS下载完成后才开始渲染页面,如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
7、Vue项目的按需加载
vue中的懒加载是通过webpack的代码分割来实现的,下面是官网文档:https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
主要是在加载路由的时候,使用:
const Main = r => require.ensure([], () => r(require(‘../views/main/Main’)))
require.ensure就是webpack提供的异步加载的方式。
8、关于React的性能优化
react中,进行性能优化的核心就是shouldComponentDidMount周期函数。
下面是我写的性能优化的博客:
react性能优化
9、设置合理的http缓存
http请求中,我们可以合理的设置headers,就能达到缓存的目的。
有两种常见的缓存,强制缓存和对比缓存:
第一种:强制缓存。
直接访问浏览器中的缓存数据,如果存在,则直接使用浏览器中的数据。如果不存在,则再向服务器发送请求,然后得到服务器的数据,再把这些数据存在浏览器中。
第二种:对比缓存。
首先,获取浏览器中的数据缓存标识,再获取服务器上面的数据缓存标识,如果相匹配,则直接从浏览器中获取数据,如果不匹配,则从服务器上获取数据。
关于缓存标识,有两类标识:
第一类:
第一次请求,服务器会返回一个Last-Modified。
下一次请求,浏览器会自动在headers中添加一条If-Modified-Since属性,记录的就是上一次数据发生修改的时间。
第二类:
第一次请求,服务端返回一个Etag资源唯一标识符。
第二次请求,浏览器会自动携带一个If-None_Match标识符。
应用程序缓存
创建cache manifest文件,通过给html文件中的HTML标签添加一个manifest属性来实现的。
<!DOCTYPE HTML>
<html manifest="demo.appcache"><body>
文档内容......
</body></html>
前端性能优化,我们可以做哪些?相关推荐
- 做前端性能优化,还不知道什么是Preload、Prefetch、Preconnect、Prerendering,你就out了?
做前端性能优化,还不知道什么是Preload.Prefetch.Preconnect? 今天,我们将探讨当前的资源提示和指令,这是提高网站或 Web 应用程序性能的另一种好方法.您可能听说过Prelo ...
- 【Day11】平时在项目开发中都做过哪些前端性能优化
平时在项目开发中都做过哪些前端性能优化 一.体验优化 二.提升页面性能 三.首页加载优化(减少白屏时间) 一.体验优化 从用户角度而言,优化能够让页面加载得更快.对用户的操作响应得更及时,能够给用户提 ...
- Web前端性能优化,应该怎么做?
本文将分享一些前端性能优化的常用手段,包括减少请求次数.减小资源大小.各种缓存.预处理和长连接机制,以及代码方面的性能优化等方面. base64:尤其是在移动端,小图标可以base64(webpack ...
- 深度讲解:web前端性能优化
一.课程简介: 1.课程大纲 涉及到的分类 网络层面 构建层面 浏览器渲染层面 服务端层面 涉及到的功能点 资源的合并与压缩 图片编解码原理和类型选择 浏览器渲染机制 懒加载预加载 浏览器存储 缓存机 ...
- 大型网站技术架构(3):WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
- 前端性能优化——从 10 多秒到 1.05 秒
https://lishaoy.net 关于 性能优化 是个大的面,这篇文章主要涉及到 前端 的几个点,如 前端性能优化 的流程.常见技术手段.工具等. 提及 前端性能优化 ,大家应该都会想到 雅虎军 ...
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
- WEB前端性能优化小结
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- 前端性能优化最佳实践(转)
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- 前端性能优化之防抖-debounce
这周接到一个需求-给输入框做模糊匹配.这还不简单,监听input事件,取到输入值去调接口不就行了? 然而后端小哥说不行,这个接口的数据量非常大,这种方式调用接口的频率太高,而且用户输入时调用根本没有必 ...
最新文章
- 字节跳动再扩招1000人,招聘要求让人窒息
- 2019年中国工业机器人首次出口数量大于进口数量
- 【转】Scrum角色及其职责介绍
- 准时制 jit 减少库存
- SCA (Service Component Architecture)
- 用matlab画图将原点显示,[转帖] Matlab plot画图时,让原点在图中心
- 从RedHat到MongoDB,开源商业软件是如何占领世界的
- singleton pattern的推荐实现
- QT5之exe发布及dll打包
- vue打印指定的html,使用window.print()打印指定的一个vue 组件
- c语言字符串不能是数字,C语言判断字符串是否为数字
- 前端安全——XSS攻击与防御原理详解
- 本地搭建Redis集群 windows(图文详解)
- AccessPort 0d 0a乱码
- php 打印去掉页眉页脚,window.print打印 去掉页眉页脚及打印链接
- 男人养肾按摩运动更可取
- 财务转换工具 - 人民币金额转大写工具类 java 版本
- 小白如何利用自媒体做引流推广?
- 网站如何判断客户端是在国内还是国外
- RNA 12. SCI 文章中肿瘤免疫浸润计算方法之 CIBERSORT