CSS

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

作者 | Rumesh Eranga Hapuarachchi

译者 | 张健欣

策划 | 田晓旭

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

1. Content-visibility

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

            

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

写在前面

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

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

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

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;
  }
  
  
        

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

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

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

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

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

            

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

近期甲方做了什么安全检查防止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值]"

例如:…

            

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

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

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

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