前端

静态网站如何启用数据库查询

admin web前端 暂无评论 492 浏览

作者演示静态网站（比如 GitHub Pages）如何通过 SQLite 数据库，实现查询功能，完全不需要后台脚本。

这种操作的实现原理有两个：一是 SQLite 数据库以页为单位存储数据，每页默认是 4KB，可以按页读取数据；二是前端可以用 sql.js 模拟一个内存文件系统，从而实现按页读取文件。

I was writing a tiny website to display statistics of how much sponsored content a Youtube creator has over time when I noticed that I often write a small

…
        
Read more

如何只使用CSS提升页面渲染速度

admin web前端 暂无评论 592 浏览

作者 | Rumesh Eranga Hapuarachchi

译者 | 张健欣

策划 | 田晓旭

用户喜欢快速的 Web 应用。他们期望页面加载速度快，运行流畅。如果滚动时出现动画中断或延迟，用户很可能就会离开你的网站。作为一名开发者，你可以做很多事情来提升用户体验。本文主要介绍你可以用来提升页面渲染速度的 4 个 CSS 技巧。

1. Content-visibility

一般来说，大部分 Web 应用都有复杂的 UI 元素，并且它的扩展超出了用户在浏览器视图中所能看到的范围。在这种情况下，我们可以使用content-visibility来跳过渲染屏幕之外的内容。如果你有大量屏幕之外的内容的话，这会大大减少页面渲染时间。

…
            
Read more

什么是回流与重绘 (Reflow & Repaint)

admin web前端 暂无评论 560 浏览

写在前面

在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例，Firefox 使用Geoko——Mozilla 自主研发的渲染引擎，Safari 和Chrome 都使用 webkit。

我们主要以 Webkit的主流程为例

  • 浏览器使用流式布局模型 (Flow Based Layout)
  • 解析HTML 生成 DOM 树
  • 解析CSS 生成CSSOM 规则树
  • 将 DOM 树与 CSSOM 规则树合并在一起生成渲染树
…
            
Read more

2020全网最全前端业务安全综述

admin web前端 暂无评论 537 浏览

前言

上一篇面试总结中其实埋了很多坑，做到点到为止，但是坑还是需要埋的，今天这篇文章就是埋第一个坑。上篇总结中就有一个题目

33.能说一下你项目中遇到了哪些安全问题么，一般都是怎么解决的?

xss、csrf、爬虫、薅羊毛等安全问题传输加密、接口加签、环境变量、token、输入校验等

那么前端平时开发中涉及到哪些安全问题呢，又都是怎么解决的呢，本文将一网打尽，同时建议各大中小公司，能够在公司内部实施的安全措施都应该实施起来。…

    
Read more

聊一聊前端性能优化 CRP

admin web前端 暂无评论 466 浏览

什么是 CRP？

CRP又称关键渲染路径，引用MDN对它的解释：

关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM)，CSS Object Model (CSSOM)，渲染树和布局。

优化关键渲染路径可以提升首屏渲染时间。理解和优化关键渲染路径对于确保回流和重绘可以每秒 60 帧、确保高性能的用户交互和避免无意义渲染至关重要。…

                
Read more

原html table表格固定头部（thead）效果

admin web前端 暂无评论 744 浏览 
<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;
  }
…
        
Read more