![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 69
前端架构为vue,html、css、js
Asion168
这个作者很懒,什么都没留下…
展开
-
vue-cli4的配置vue.config.js
一、配置多环境变量 1、package.json 里的 scripts 配置项中添加--mode xxx 来选择不同环境"scripts": { "dev": "vue-cli-service serve", "build:prod": "vue-cli-service build --mode production", "build:stage": "vue-cli-service build --mode staging",}2、在项..原创 2020-06-15 17:54:49 · 13508 阅读 · 2 评论 -
vscode基本配置setting.json(typescript)
基于vue-cli4.4搭建的vue前端工程,使用到了typescript{ "[json]": {}, "workbench.sideBar.location": "left", "editor.wordWrap": "on", // 控制折行方式。可以选择: - “off” (禁用折行), - “on” (视区折行), - “wordWrapColumn”(在“editor.wordWrapColumn”处折行)或 - “bounded”(在视区与“editor.wordWrapCol原创 2020-06-11 16:19:37 · 1783 阅读 · 0 评论 -
前端性能优化——字体文件压缩
我们在开发前端的时候,经常会用到第三方字体库。一个字体文件少则几百KB,多则几十M,非常影响前端页面的展示速率。在此我们使用一个npm插件--字蛛,对我们使用到字体文件进行压缩。一、理解字蛛字蛛是一个字体压缩器,它的工作原理,是将我们页面上使用到的字体,抽取到字体文件中。这样就缩小了字体文件。字蛛支持压缩的文件格式暂时为ttf。二、ttf字体文件准备我之前在做字体压缩时,字体源文件为otf格式的,字蛛是不支持的。有好多在线站点支持字体文件格式转化,但是效果不好,转化后字体失真。这原创 2020-06-07 17:18:01 · 3346 阅读 · 0 评论 -
前端性能优化——html、css、js压缩
如果你未使用vue、react等主流前端框架,可选择忽略。因为前端资源在打包时,已经默认对js、css等文件进行了压缩。我们知道,在浏览器渲染前端页面时,要首先获取我们的前端资源:html、css、js等。获取此类资源会需要消耗网络流量,那我们此次优化就来减小网络流量的消耗。压缩参考工具:在线压缩站点 离线压缩工具下载一、案例 :压缩html1、压缩前: test.html文件压缩之前 901B,在服务端开启gzip压缩的情况下,test.html.gz 文件的大小为440B...原创 2020-06-07 11:23:33 · 1554 阅读 · 0 评论 -
前端性能优化——使用GZIP压缩
前端项目的脚手架以vue-cli4 为基础搭建一、什么是GZIP GZIP是网站压缩加速的一种技术,对于开启后可以加快我们网站的打开速度。经过服务器压缩,客户端浏览器快速解压,可以大大减少网站的流量。二、vue中怎么使用在vue中集成插件compression-webpack-plugin配置如下...原创 2020-06-05 13:50:03 · 2852 阅读 · 0 评论 -
现代前端为什么要使用虚拟DOM
一、虚拟DOM与DOM的区别 仅仅修改虚拟DOM中内容,不会带来页面的排版与重绘操作。在完成虚拟DOM修改后,进行真实DOM的修改,才会使页面重绘。 虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分,最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗 真实的DOM中,过多的内容修改,会带来多次的页面重绘,极大的损耗页面的性能。而在使用虚拟DOM时,不管一次修改了多少内容,最后只会发生一次页面的重绘,大大的提高了页面的性能。二、虚拟DOM的优势 Vi...原创 2020-06-05 11:50:21 · 948 阅读 · 0 评论 -
前端web页面的渲染流程
1、构建DOM与 CSSOM 浏览器通过http请求,获得静态资源后,进行页面渲染时,构建dom与cssom是同时进行的。 html 构建dom 构建dom时,按照html页面中标签的顺序,由上向下渲染。 css构建cssom html构建cssom的同时,将css样式构建为cssom 2、渲染树 Render Tree 该过程中DOM与CSSOM合并,生成渲染树,树中包含了渲染页面所需要的节点。3、布局Layout计算出每...原创 2020-06-04 17:11:00 · 1448 阅读 · 0 评论 -
MUI 启用沉浸式&header显示问题
启用沉浸式在manifest.json配置文件中添加如下代码(两种方式皆可)a、"plus": { "statusbar": { "immersed": "supportedDevice", "style": "dark" },b、"plus": { "statusbar": { "immers原创 2018-09-28 10:25:43 · 4309 阅读 · 0 评论 -
html图片按钮&按钮点击效果
} /** * 按钮样式 */ /* Radomir */ .ripple { position: relative; /*//隐藏溢出的径向渐变背景*/ overflow: hidden; } .ripple:after { content: ""; display: block; po...原创 2018-10-11 19:50:28 · 18796 阅读 · 0 评论