2021年11月10日
由懒加载和css sprites想到的页面优化
摘要： 1.懒加载 （1）多图片加载时为了减少请求量对页面进行快速渲染而使用一个简单的图片作为替代位置，根据页面位置对相应图片（img）的src路径进行二次赋值，以此实现前端优化的方法。 （2）步骤： a.加载备用的图片。 b.根据屏幕滚动位置判断图片加载时机。 c.隐形加载要替换图片。 d.替换图片. （ 阅读全文
posted @ 2021-11-10 18:07 purple_sunset 阅读(61) 评论(0) 推荐(0) 编辑
前端搜索引擎SEO优化
摘要： 什么是SEO？ SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益。 前端需要注意的优化事项： 1.TDK.即合理的 阅读全文
posted @ 2021-11-10 17:12 purple_sunset 阅读(458) 评论(0) 推荐(0) 编辑
2021年3月12日
var let const声明变量的区别
摘要： 一、声明后未赋值，表现相同 var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest); //输出undefined 也即是说声明后直接使用输出都是一样的undefined 二、使用未声明的变量 阅读全文
posted @ 2021-03-12 12:04 purple_sunset 阅读(70) 评论(0) 推荐(0) 编辑
由回流和重绘而想到的页面优化
摘要： html 加载时发生了什么 在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体 DOM Tree 和样式结构体组合后构建rend 阅读全文
posted @ 2021-03-12 11:38 purple_sunset 阅读(47) 评论(0) 推荐(0) 编辑
2021年1月25日
雨夹雪背景特效
摘要： 在这暖暖的冬天，给自己的网站加点雪花特效简直美滋滋啊。 来给生活比个样！ 效果图： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de 阅读全文
posted @ 2021-01-25 14:33 purple_sunset 阅读(144) 评论(0) 推荐(0) 编辑
lottie-前端实现AE动效
摘要： 在前端页面上为了实现动画效果，可以用CSS3自己实现，可以让UI小姐姐给你GIF动图，也可以直接animate.css等等吧，可以实现的方式有不少，但如果说偏差那肯定是会有的，在呈现上也会有点不太自然，今天介绍一个神器Lottie。（刚接触到这个东西，那兴趣是真的十分大，真的是对前端很友好。） Lo 阅读全文
posted @ 2021-01-25 14:18 purple_sunset 阅读(529) 评论(0) 推荐(0) 编辑
2021年1月13日
响应式布局实现原理
摘要： 响应式布局是一个很基础的前端布局，就是很基础的CSS变换（基于本人有问必答的特点，开车！）。首先，关于布局的方式有哪些，前面随笔提到过，再次赘诉一下吧。 移动端的几种布局的方式，现在常用的大致上分为以下五种，分别是 1.静态布局(Static Layou) 2.流式布局(LIquid Layout) 阅读全文
posted @ 2021-01-13 17:02 purple_sunset 阅读(1230) 评论(0) 推荐(0) 编辑
2020年12月31日
关于小程序（含uniapp）中使用npm模块
摘要： 当我们开发小程序时免不了需要使用npm，对于不想花费过多时间开发组件的人来说是真的方便。 A：小程序常用的npm安装如vant之类的流程： 1.创建小程序； 2.npm init -y初始化创建配置package.json文件； 3.npm i @vant/weapp -S --production 阅读全文
posted @ 2020-12-31 12:05 purple_sunset 阅读(4558) 评论(0) 推荐(0) 编辑
2020年12月17日
使用脚手架快速搭建React项目
摘要： 本文目的：文档记录。 create-react-app是Facebook官方推出的脚手架，可以零配置搭建基于webpack的React开发环境。 实行步骤： 1.安装create-react-app npm install -g create-react-app yarn add -g create 阅读全文
posted @ 2020-12-17 10:22 purple_sunset 阅读(239) 评论(0) 推荐(0) 编辑
2020年12月8日
vue项目接入友盟统计站点数据
摘要： 无论是PC还是移动端的埋点，对于市场统计及可视化数据浏览是十分不可少的，但专门的埋点或是统计要么工作量大，要么难实现，使用友盟对于一些精确的数据我们是拿不到的，想做成图表等高级可视化还是建议您去埋点处理。 关于友盟的埋点其实也可以去看友盟文档，此仅作记录与参考。 以下是接入友盟统计过程： 1.登录友 阅读全文
posted @ 2020-12-08 15:47 purple_sunset 阅读(1941) 评论(1) 推荐(1) 编辑