前端优化

最新推荐文章于 2020-12-04 09:38:53 发布
最新推荐文章于 2020-12-04 09:38:53 发布
阅读量87 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47222576/article/details/108784245
版权
从客户端着手
  • 压缩代码(js/css),压缩图片
  • 合并一些小图片(css,sprite),使用雪碧图
  • 若是打包的代码尽可能切割成多个chunk,减少单一chunk过大
  • HTTP的缓存头使用合理
  • 减少第三方库依赖
  • 对代码应该考虑性来编写,比如使用requsetAnimationFrame绘制动画,尽可能减少页面重绘(Dom改变)
  • 渐进升级,引入preload这些预加载资源
  • 看情况用 service worker来缓存资源
从服务端着手
  • 宽带,域名解析,多域名解析
  • 页面做服务端渲染,减少对浏览器的依赖(不用客户端解析)
  • 渐进升级,比如引入HTTP2(多路复用,头部压缩这些可以民概念家快加载速度)
vue项目优化
代码层面
  • v-if和v-show区分使用场景
  • computed和wath区分使用场景
  • v-for遍历必须为item添加key,切避免同时使用v-if
  • 长列表性能优化
  • 销毁事件
  • 图片资源懒加载
  • 路由懒加载
  • 第三方插件的按需引入
  • 优化无线列表性能
  • 服务端渲染SSR or预渲染
webpack层面的优化
  • webpack对图片进行压缩
  • 减少ES6转为ES5的冗余代码
  • 提取公共样式
  • 模版预编译
  • 提取组件的css
  • 优化SourceMap
  • 构建结果输出分析
  • Vue项目的编译优化
基础的Web技术的优化
  • 开启gzip压缩
  • 浏览器缓存
  • CDN的使用
  • 使用Chrome Performance查找性能瓶颈
多晴丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端优化总结
03-23
前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考List。前言前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对...
web前端优化方案
07-14
根据yslow建议，个人总结处理的一些web前端的优化方案。
web前端优化技巧1
最新发布
08-08
【前端优化技巧详解】 在网页开发中，前端性能优化至关重要，因为它直接影响用户的浏览体验和网站的加载速度。本文将深入探讨“web前端优化技巧1”中的关键知识点，并提供实用的优化策略。 首先，减少HTTP请求...
网站前端优化
12-14
1: 将超链接关联到图片上，例如在导航栏按钮中。...图片地图允许在一个图片上关联多个URL. 2: CSS Sprites 和图片地图一样，CSS Sprites也可以合并图片，但是更加灵活，可以将多个图片合并到一个单独的图片中。...
最全前端优化方案
12-19
最全前端优化方案笔记
vue实现防抖和节流
多晴丶
08-31 3082
防抖（debounce） 所谓防抖，就是指触发事件后，就是把触发非常频繁的事件合并成一次去执行。即在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。 用定时器实现防抖 //用定时器实现防抖 function debounce(func,wait) { var timer=null; return function() { //保存当前调用的dom对象 var _this=this; //保存事件对象
JavaScript 字符串中的 pad 方法！
多晴丶
09-23 2530
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全 const string = 'hi'; string.padStart(3, 'c'); // "chi" string.padEnd(4, 'l'); // "hill" 语法 string.padStart(<maxLength>, <padString>) string.padEnd(<maxLength&gt
vue中mixins的使用
多晴丶
09-18 2183
vue中mixins(混入)的使用 一、来自官网的描述 混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 二、项目中如何使用混入 在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。 你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。 我们可以
cookie,localStorage,SessionStorage三者的区别,以及在vue中的用法
多晴丶
08-24 1283
cookie,localStorage,SessionStorage三者的区别,以及在vue中的用法 基本概念 cookie cookie英文饼干，顾名思义，大小应该非常小，cookie非常小，它的大小限制在4kb左右. localStorage localStorage是HTML5标准中新加入的技术,如今localStorage被大多数浏览器所支持。 sessionStorage sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同。而ses
vue实现省市区三级联动,借助vant-Area组件
多晴丶
08-30 1265
vue实现省市区三级联动,借助vant-Area组件 <!-- html --> <div> <van-area title="标题" :area-list="areaList" @change="change" @confirm="sure" @cancel="cancel"/> </div> //首先要知道vant-Area组件的渲染数据格式如下 { province_list: { 110000: '北京市', 1200
上拉加载原理
多晴丶
09-02 1185
实现思路 之前写过一篇触底加载,经过一番苦学钻研,优化一下 样式方面:滚动区域是给固定高度，设置 overflow-y: auto 来实现。 接下来看看js方面的实现，其实也很简单，触发的条件是：可视高度 + 滚动距离 >= 实际高度 。例子我会使用vue来实现，和原生实现是一样的。 可视高度(offsetHeight)：通过 dom 的 offsetHeight 获得，表示区域固定的高度。通过 getBoundingClientRect() 来获取高度，因为使用前者会引起浏览器回流，造成一些性能问
VUE中用原生JS实现触底加载数据
多晴丶
08-20 1136
VUE中用原生JS实现触底加载数据 在vue开发过程中使用第三方组件是不可避免的,但是第三方样式的css样式属实头痛,所以我选择原生JS的写法完成了触底加载 1:定义data page: 1, //页数 limit: 10, //每页数据条数 flag: true //开关, featureList:[]//渲染数据 2:封装函数 mounted() { window.addEventListener("scroll", this.getMore);//监听滚动 }, getMore()
说说你对Vue生命周期的理解?
多晴丶
12-04 1127
一、生命周期是什么 生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程 在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程 我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作 PS：在Vue生命周期钩子会自动绑定 this
Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
多晴丶
09-15 894
vue版本：vue cli3 插件：vue-quill-editor 插件增强模块：quill-image-extend-module quill-image-extend-module功能:提供图片上传到服j务器的功能(复制插入,显示上传进度,显示上传成功或者失败) 1:安装插件 npm install vue-quill-editor --save-dev npm install quill-image-extend-module --save-dev 2:引入 import { quillEdito
VUE项目性能优化,v-if,v-for,props,computed,watch......
多晴丶
08-15 812
VUE项目性能优化,v-if,v-for,props,computed,watch… 下个星期就要用vue开发了,就未雨绸缪的搜集了一些干货,整理出来 1:解决v-for和v-if优先级问题,以及通过计算属性来做数据筛选 <template v-for="item in 10"> <div v-if="item % 2 == 0" :key="item">{{item}}</div> </template> <ul> <li
使用FormData对form表单序列化
多晴丶
09-08 807
一、FormData作用 将form表单元素的name与value进行组合，实现表单数据的序列化 异步上传二进制文件 二、创建formData对象 <!-- 创建普通的html表单 --> <form id="form"> <input type="text" name="username"> <input type="password" name="password"> <!-- type 设置为button，不会触发form 提交 -
vue1分钟搞定图片懒加载
多晴丶
08-05 765
vue1分钟搞定图片懒加载 在此介绍原生js和vue-lazyload两种方法,做个比较,找找差距. (一) js原生实现方法 css 代码段 <style scoped lang="scss"> .loading { width: 100%; display: flex; flex-wrap: wrap; .wrapper { width: 50%; img { width: 100%; height: 254px; } }
vue-cli3.0的项目上，配置多个环境
多晴丶
08-20 760
vue-cli3.0的项目上，配置多个环境 一般情况下，我们会需要三个环境（开发环境、测试环境、生产环境），而3.0默认只支持两个环境（即测试环境、生产环境） 创建测试环境 1:在根目录下创建一个evn.test文件 NODE_ENV = 'test' 2在项目根目录添加 config.js文件,配置各环境的url let BASE_URL = ""; //这里是一个默认的url，可以没有 switch (process.env.NODE_ENV) { case 'development':
基于webpack搭建vue的开发环境,手动搭建vue脚手架
多晴丶
08-18 384
基于webpack搭建vue的开发环境 1:创建并初始化项目 mkdir webpack-demo //从cmd命令行常见文件夹 cd webpack-demo //进入目录 npm init -y //初始化package.json npm install webpack webpack-cli --save-dev //安装webpack和webpack-cli 2:在根目录下常见src文件夹创建index.js和index.html文件 /- webpack-demo |- packag
淘宝商品详情页前端优化技术探索
这篇文档深入探讨了淘宝商品详情页的优化实践，涉及前端、服务端以及数据策略等多个层面，旨在提高用户体验、减轻服务器压力并应对瞬时高流量的挑战。 首先，商品详情页面面临着不断增长的数据需求和页面复杂度。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值