左右拖拽table表格实现横向滚动
需求：有时候table表格内容比较多时，通过滚动条横向滚动不是太方便查看溢出内容，如果可以通过鼠标左右拖拽查看内容就方便多了。故有此demo
使用 position:sticky 实现粘性布局
如果问，CSS 中 position 属性的取值有几个？
大部分人的回答是，大概是下面这几个吧？
|
1
2
3
4
5
6
|
{ position: static; position: relative; position: absolute; position: fixed;} |
额，其实，我们还可以有这 3 个取值：…
2020全网最全前端业务安全综述
前言
上一篇面试总结中其实埋了很多坑，做到点到为止，但是坑还是需要埋的，今天这篇文章就是埋第一个坑。上篇总结中就有一个题目
33.能说一下你项目中遇到了哪些安全问题么，一般都是怎么解决的?
xss、csrf、爬虫、薅羊毛等安全问题传输加密、接口加签、环境变量、token、输入校验等
那么前端平时开发中涉及到哪些安全问题呢，又都是怎么解决的呢，本文将一网打尽，同时建议各大中小公司，能够在公司内部实施的安全措施都应该实施起来。…
前端框架库汇总
实践带你了解–http缓存
这次文章为了了解http缓存的机制,自己搭建nginx和设置nginx配置
网上的文章其实有很多,但是大部分都是文字表达,缓存这块又比较偏向理论,导致我一开始也是云里雾里的
所以这次我通过截图和步骤图来说明,并且进行文字补充, 不喜欢看文字的话其实看图片就行啦
以下每次截图都是无痕模式的…
网页骨架屏自动生成方案（dps）
什么是骨架屏？
什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。
假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通畅，不会造成网页长时间白屏或者闪烁。这就是 Skeleton Screen ！
Skeleton Screen 能给人一种页面内容“已经渲染出一部分”的感觉，相较于传统的 loading 效果，在一定程度上可提升用户体验。…
聊一聊前端性能优化 CRP
什么是 CRP？
CRP又称关键渲染路径，引用MDN对它的解释：
关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM)，CSS Object Model (CSSOM)，渲染树和布局。
优化关键渲染路径可以提升首屏渲染时间。理解和优化关键渲染路径对于确保回流和重绘可以每秒 60 帧、确保高性能的用户交互和避免无意义渲染至关重要。…
原html table表格固定头部（thead）效果
<html lang="zh-CN" class=""><head>
<meta charset="UTF-8">
<title>CodePen Demo</title>
<style>
.table-container {
width: 50%;
height: 200px;
border: solid 1px #cccccc;
margin: 10px auto;
background: #FFF;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
padding-top: 50px;
overflow: hidden;
}
… 用window.performance.navigation.type判断网页 来源类型
performance.navigation.type（该属性返回一个整数值，表示网页的加载来源，可能有以下4种情况）：
0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数performance.navigation.TYPE_NAVIGATE。
1：网页通过“重新加载”按钮或者location.reload()方法加载，相当于常数performance.navigation.TYPE_RELOAD。
2：网页通过“前进”或“后退”按钮加载，相当于常数performance.navigation.TYPE_BACK_FORWARD。
255：任何其他来源的加载，相当于常数performance.navigation.TYPE_RESERVED。
performance.navigation.redirectCount：表示网页经过重定向的次数。
…
6张图让你搞懂浏览器渲染网页过程
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。
github 地址：https://github.com/qq44924588...
我的想法：如果我要构建快速可靠的网站，需要真正了解浏览器渲染网页的每个步骤机制，这样就可以在开发过程中对每个步骤进行优化。 这篇文章是我在较高水平上对端到端过程的学习总结。
好了，废话不多说，我们开始吧。这个过程可以分为以下几个主要阶段：…
近期评论