Tammyhlf
码龄5年
  • 60,103
    被访问
  • 44
    原创
  • 51,252
    排名
  • 23
    粉丝
关注
提问 私信

个人简介：记录成长每一步

  • 加入CSDN时间： 2017-05-31
博客简介：

weixin_38984030的博客

查看详细资料
  • 1
    领奖
    总分 56 当月 2
个人成就
  • 获得83次点赞
  • 内容获得3次评论
  • 获得153次收藏
创作历程
  • 1篇
    2022年
  • 6篇
    2021年
  • 8篇
    2020年
  • 41篇
    2019年
  • 4篇
    2018年
  • 1篇
    2017年
成就勋章
TA的专栏
  • css
    15篇
  • 工具
    2篇
  • vue
    2篇
  • js
    20篇
  • 优化
  • http
    1篇
  • 网络安全
    2篇
  • 数据结构与算法
    2篇
  • 笔记
    4篇
兴趣领域 设置
  • 前端
    javascriptes6
  • 网络
    https
  • 小程序
    小程序
  • 最近
  • 文章
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

我走过最长的路，就是移动端播放视频的套路

一、问题描述在一个风和日丽，且UAT验收的下午，业务来了，她说：这里加个需求吧具体的需求很简单：上传视频、展示视频、可预览、全屏播放。你以为一个video就能搞定？然后遇到了各种各样的兼容性问题二、解决方案（踩坑记录）2.1 移动端不能展示首帧，视频展示空白这还不简单，加个poster搞定，然后开始了获取poster的艰难之路文件服务域是否有提供抽帧的功能？没有…用canvas获取视频的第一帧，需要设置proload为metadata拿到视频的元信息。真机调试发现安卓部分机型不允许视
原创
发布博客 2022.02.21 ·
1042 阅读 ·
1 点赞 ·
0 评论

获取视频首帧

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>capture screen</title></head><body><video id="video" controls="controls" preload="auto" crossOrigin='anonymous'><source src="https://fa
原创
发布博客 2021.06.09 ·
73 阅读 ·
0 点赞 ·
0 评论

vertical-align middle 不生效的几种解决方式，图片居中几种方案

1.在父元素中增加display:table-cell，vertical-align 写在在父元素中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .btn{ display:table-cell; width:200px; height:200px; bo...
转载
发布博客 2021.06.02 ·
760 阅读 ·
1 点赞 ·
0 评论

webpack SplitChunksPlugin

因为在印记中文的SplitChunksPlugin部分翻译任务被认领了，所以依据webpack官网的SplitChunksPlugin部分翻译一下。SplitChunksPlugin最初，代码块（以及导入其中的模块）是通过webpack内部的图形的父子关系连接的。CommonsChunkPlugin 用于避免重复的依赖关系，但是无法进一步优化从webpack4开始，CommonsChunkPlugin被移除，开始使用optimization.splitChunks。Defaults开箱即用的Spl
翻译
发布博客 2021.02.02 ·
266 阅读 ·
0 点赞 ·
0 评论

笔记（4）

process.env属性返回一个包含用户环境信息的对象。
原创
发布博客 2021.01.13 ·
39 阅读 ·
0 点赞 ·
0 评论

关于this

面试中遇到的题目，当场把我问得有点蒙，对严格模式，this的理解还不够深入。function foo(){ console.log(this.a);}var a = 2;foo() //2严格模式：函数调用时，是直接使用不带任何修饰的函数引用进行调用，因此只能使用默认绑定，无法应用其他规则。但是在严格模式下不能将全局对象用于默认绑定所以this会绑定到unde...
原创
发布博客 2021.01.13 ·
22 阅读 ·
0 点赞 ·
0 评论

git常用命令记录

记录一些近期比较常用的git 命令工作区（在编辑器时）-> 暂存区（git add后）-> 版本区（git commit后）1、git reset--hard 回退到上一个版本，工作区暂存区都不会保留 --soft 撤销commit回到暂存区 --mixed 回到工作区，相当于撤销git commit 与git add示例：git reset --hard HEAD^指令后面需要加上版本号，HEAD^是指回退到上一个版本，或者可以通过git log查看以往的commit i.
原创
发布博客 2021.01.05 ·
38 阅读 ·
1 点赞 ·
0 评论

图解浏览器的基本工作原理

前言可能每一个前端工程师都想要理解浏览器的工作原理。我们希望知道从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么；我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优化的作用；我们希望更细化的了解浏览器的渲染流程。浏览器的多进程架构一个好的程序常常被划分为几个相互独立又彼此配合的模块，浏览器也是如此，以 Chrome 为例，它由多个进程组成，每个进程都有自己核心的职责，它们相互配合完成浏览器的整体功能，每个进程中又包含多个线程，一个进程内的多个线程也
转载
发布博客 2020.08.19 ·
156 阅读 ·
0 点赞 ·
0 评论

一文搞定移动端适配！

手机市场日渐丰富的同时，给我们前端开发人员带来的 “网页内容自适应屏幕尺寸进行显示的问题” 也日渐凸显出来，接下来我们就要细说移动端适配的前世今生及方案。为什么要移动端适配？一般情况下设计稿的设计师按照 375 的尺寸设计，然而，在现在移动终端（就是手机）快速更新的时代，每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，此时 375 的设计稿，如果想要还原那基本是不可能了，因为如果一个左右布局，左边如果写死，右边自适应的话，每个设备的右边所展示的内容..
转载
发布博客 2020.05.22 ·
168 阅读 ·
1 点赞 ·
0 评论

vue中MVVM原理及其实现

一. 什么是mvvmMVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。要实现一个mvvm的库，我们首先要理解清楚其实现的整体思路。先看看下图的流程：1.实现compile,进行模板的编译，包括编译元素（指令）、编译文本等，达到初始化视图的目的，并且还需要...
转载
发布博客 2020.04.08 ·
255 阅读 ·
0 点赞 ·
0 评论

懒加载

懒加载就是延时加载，当图片出现在可视区域时才进行加载，这样可以优化界面，加快页面初始加载速度。首先需要了解元素偏移量，可视高度等概念，如下图。大概的意思就是：当（Element）的offsetTop= （document.documentElement）对象的clientHeight+scrollTop时，用data-src属性的值替代src。见如下写法<i...
原创
发布博客 2020.03.25 ·
76 阅读 ·
0 点赞 ·
0 评论

前端跨域总结

什么是跨域？ 由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题。同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 只有协议、端口、域名都相同才是同源。如下图URL 结果 原因 http://store.company.com/dir...
原创
发布博客 2020.03.24 ·
65 阅读 ·
0 点赞 ·
0 评论

前端js错误监控

简单记录一下几乎没接触过的前端错误监控。页面运行时的错误window.onerror = function(message, source, lineno, colno, error) { ... }message：错误信息（字符串）。可用于HTMLonerror=""处理程序中的event。 source：发生错误的脚本URL（字符串） lineno：发生错误的行号（数...
原创
发布博客 2020.03.23 ·
258 阅读 ·
0 点赞 ·
0 评论

使用wireshark抓包

打开一个http的网站，如https://www.cr173.com/抓包过程自行百度如图所示，get的请求行，请求头，响应的内容全都是明文的。post与get相比，post是放在报文的body里的。打开https的网页跟http不同，三次握手之后，https还会进行建立SSL连接。查看报文可以看到，整个通信过程都是加密的。...
原创
发布博客 2020.03.23 ·
65 阅读 ·
0 点赞 ·
0 评论

笔记（三）

1.稍稍重温以下git的用法，如果是把一个现有的项目建git仓库的话，(1). 先在github上面新建一个仓库，记录下它的ssh值，然后在项目打开终端输入git init(初始化一个git的仓库)。(2). 然后gita dd* (把所有内容添加进去) (3).git commit -m ' '(引号里面写备注信息)。 (4).git remote add origin git@github.c...
原创
发布博客 2020.01.07 ·
61 阅读 ·
0 点赞 ·
0 评论

vue关于数据更新的问题

vue只会监听数据的“第一层”的改变array[i] = 3;array.length = 0object.a = 3;这些情况vue是无法监听的。array = [1,2]和push, pop,shift，unshift, splice, sort，reverse等这些改变原数组的方法可以被监听解决无法监听的问题1. this.$vue(array, ind...
原创
发布博客 2019.11.18 ·
82 阅读 ·
1 点赞 ·
0 评论

前端性能优化之白屏时间

前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。一、概念白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。白屏时间的长短将直接影响用户对该网站的第一印象。二、白屏时间的重要性当用户点开一个链接或者是直接在浏览器中输入URL开始进行...
转载
发布博客 2019.10.14 ·
146 阅读 ·
0 点赞 ·
0 评论

&&与||

首先&&的优先级会比||会高。&&运算的规则为，左边的为true，无论右true还是flase返回右边。 左边的为false，无论右边true或false都返回左边。4 && 0 //返回04 && 8 //返回80 && false //返回00 &...
原创
发布博客 2019.10.13 ·
60 阅读 ·
0 点赞 ·
0 评论

实现两列布局与三列布局（双飞翼）

效果图如下，左栏固定，右栏自适应<div class="container"> <div class="left"> </div> <div class="right"> </div></div>1.普通实现法.l...
原创
发布博客 2019.09.25 ·
137 阅读 ·
0 点赞 ·
0 评论

实现一个简易的栅格系统

比较简单，但是坑比较多，最好自己动手实现一下。效果图：1200px以上的屏幕下1000px的屏幕800的屏幕（解析写在代码注释里好了）html代码：<div class="row"> <div class="col-lg-1 col-md-6 col-sm-12">.col-md-1</div> <...
原创
发布博客 2019.09.24 ·
313 阅读 ·
0 点赞 ·
0 评论
加载更多