在用户输入网址向服务器发出请求后，服务器会返回html文件，然后浏览器开始载入html代码。在浏览器载入html代码过程中，如果发现有标签引用外部的CSS文件，浏览器又会向服务器发出请求css文件的请求。这个加载是异步，不会影响DOM树的构建，只是说在CSS没处理好之前，构建好…

在前面一章我们学习了 Web Performance Timing Api 可以用来分析web应用的资源加载、手动卡点的性能（时间），那么我们现在就来看看怎么使用Resource Timing 来分析我们的静态资源的加载情况。 开发：我用我的(手机|电脑)测试了没有问题啊很快啊…

其实, 前端的安全并没有很多, 不过知道了, 起码后端兄弟不会那么累了。 1. XSS方式 XSS(Cross-Site-Scripting),跨站脚本攻击是一种代码注入攻击。攻击者在目标网站上注入恶意代码,当被攻击者登录网站时就会执行这些恶意代码, 这些脚本可以读取 cook…

Web 页面性能优化，解决了图片相关，问题就解决了大半。本文从 Web 常见的图片格式入手，引出与图片优化相关的有效方案，期望对大家能有一点帮助。 有损压缩：借由将次要的信息数据舍弃，牺牲一些质量来减少数据量、提高压缩比。这个过程是不可逆的。图片常见的有损压缩手段是合并相近的像…

防抖、节流函数一般应用在一些高频触发的方法，例如搜索框联想输入的input事件、onmousemove事件、click事件等等；实际上业务不需要多次触发，那么就需要用到防抖或者节流来处理啦。

在安全攻防战场中，前端代码都是公开的，那么对前端进行加密有意义吗？可能大部分人的回答是，毫无意义，不要自创加密算法，直接用HTTPS吧。但事实上，即使不了解密码学，也应知道是有意义的，因为加密前和解密后的环节，是不受保护的。HTTPS只能保护传输层，此外别无用处。 本文主要列举…

传统的方式就是，把JavaScript的脚本放到head标签之后之前，也就把script标签放到最尾处，来确保页面加载完之后才执行JavaScript脚本，从而达到一些不必要的阻塞。（可能这也是我们平时用得比较多的方式） HTML4为script标签扩展了一个Defer属性，指…

如果您钻研 Javascript 或从事开发工作已经有一段时间了，那您一定听说过 Service Worker。它到底是什么？简单来说，它是浏览器在后台运行一个脚本，与 web 页面或 DOM 没有任何关系，并具有开箱即用的特性。 这些功能包括代理网络请求、推送通知以及后台同步…

最近发现做了这么多的首屏优化，一直都是把白屏时间和首屏时间算在一起，也就是页面打开之前 dom 没渲染出来，我就把他归为首屏时间。时间上这里专业点可以分为首屏和白屏两个阶段，这篇文章就讲讲二者的区别，以及计算方法。 首先先讲讲按照我以前理解的首屏时间慢会带来什么问题，在页面一开…