web前端

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值]"

例如:…

            

第三代移动端布局方案

第三代移动端布局方案

大家有没有发现淘宝的H5移动端没有使用任何rem和vw单位,而是和web端项目一样,使用的是px单位。虽然是px但它也很完美的将整个页面渲染了出来。那淘宝的FE是怎么实现的呢?

最近在研究关于布局的设计方案,通过学习理解阿里的fusion.design的设计思想并结合手机淘宝H5版的px布局问题。逐渐有了一些想法,这里进行综合整理,也算是抛砖引玉吧。…

前端模块化的十年征程

这是一篇关于前端模块化的文章,但这里并不讲新技术,而是谈一谈——历史

夫以铜为镜,可以正衣冠;以史为镜,可以知兴替 ——《旧唐书·魏徵传》

前言

也许在谈论具体的内容之前,我们需要谈论一下关键词的定义。 什么是"模块"?在不同的语境下模块有不同的含义。

但在本文中,我们从广义的角度出发,将它解释为两个方面

  • 外部的模块: 指代引入前端工程的某个外部的包(package),可能由多个JS文件组成,但会通过入口暴露给我们项目调用
  • 内部的模块: 指代我们自己的工程项目中编码的最小单元: 即单个的JS文件

模块化已经发展了有十余年了,不同的工具和轮子层出不穷,但总结起来,它们解决的问题主要有三个…

前端开发常用免费资源,显著提升工作效率

最近几个月我收集了大量可以显著提升开发效率的资源链接,在这篇文章中我会分享其中一些。这些资源对我很有帮助,希望对你也是如此。闲话少叙,下面是一些很棒的免费资源!

HTML

移动端rem 适配方案

知识点:

rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。


个人理解rem布局可分为俩种情况无设计稿有设计稿

无设计稿

1、首先需要在<head>标签中加入

<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">

对于viewport的详细解释可以参考这篇文章:https://www.cnblogs.com/2050/p/3877280.html

2、在<script>标签中加入

window.onresize = function

彻底弄懂浏览器缓存策略

Web 缓存介绍

  • Web 缓存是指一个 Web 资源(如 html 页面,图片,js,数据等)存在于 Web 服务器和客户端(浏览器)之间的副本。
  • 缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的 URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。
            

单个域名下浏览器Cookie限制个数为多少

起因

去网上搜了下关于Cookie的介绍,看了好几篇都长得很一样,阉割一下内容不外乎说是"不同浏览器限制cookie数不同,大致在30-50这个范围,(前缀)浏览器允许Cookie多达4KB左右,包括名、值、等号"。

我还在上学那会儿,包括后面毕业后工作一段时间,我也没有特别去关注过这个话题,基本上如果面试官问到我了,也就把网上知道的这些讲了一下。

今年的遭遇给了我思考的时间特别多,最近我又重新去仔细读了下楼上那句话,我发现我读不懂了,第一个,我看的资料并不是特别权威的,也都是网上的博客帖子,对浏览器限制30-50个这个范围产生了一个质疑,是真的吗?第二个是允许多达4KB左右,就很迷糊,到底是一个域名下所有的Cookie加起来的值是4KB左右,还是说单独的Cookie的一个Name所表示的信息它可以是4KB左右,这让我很迷啊。

一行代码实现网页暗黑模式

随着 iOS 13 暗黑模式的发布,前端又要开始忙适配了。那么有没有一劳永逸的方法呢?当然是有的,往下看:

1
2
3
html {
    filter: invert(100%) hue-rotate(180deg);
}

就是这么简单,点击下面的按钮尝试一下吧