CSS

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

admin web前端 暂无评论 307 浏览

作者 | Rumesh Eranga Hapuarachchi

译者 | 张健欣

策划 | 田晓旭

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

1. Content-visibility

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

…
            
Read more

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

admin web前端 暂无评论 271 浏览

写在前面

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

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

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

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

admin web前端 暂无评论 455 浏览 
<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

6张图让你搞懂浏览器渲染网页过程

admin web前端 暂无评论 449 浏览

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

我的想法：如果我要构建快速可靠的网站，需要真正了解浏览器渲染网页的每个步骤机制，这样就可以在开发过程中对每个步骤进行优化。 这篇文章是我在较高水平上对端到端过程的学习总结。

好了，废话不多说，我们开始吧。这个过程可以分为以下几个主要阶段：…

            
Read more

在HTML上添加integrity，验证js和css的hash，防止篡改

admin web前端 暂无评论 270 浏览

近期甲方做了什么安全检查防止html、js被串改，要求加上integrity属性这边记录下如何生成hash值

计算hash

在linux上面使用此命令计算你需要生成hash的文件

[root@hhlqrtest js]# cat ./util.js | openssl dgst -sha384 -binary | openssl enc -base64 -A                
rfhUX/daSXdrSIHpOOPTxq222dR4unGS9FO+MsBx/DHDzaWWQwiWyqHKERHtNMnG
[root@hhlqrtest js]# 

rfhUX/daSXdrSIHpOOPTxq222dR4unGS9FO+MsBx/DHDzaWWQwiWyqHKERHtNMnG

这一行就是我们需要的hash值

添加integrity属性

crossorigin="anonymous" integrity="sha384-[刚刚的hash值]"

例如：…

            
Read more

只要一行代码，实现十种 CSS 经典布局

admin web前端 暂无评论 511 浏览

页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。

常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。

这几个布局都是自适应的，自动适配桌面设备和移动设备。代码实现很简单，核心代码只有一行，有很大的学习价值，内容也很实用。

…
        
Read more