网站前端

SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

各种各样的框架让人目不暇接，新技术层出不穷。让我们这些前端狗情何以堪。

目前web前端工程师的年薪待遇平均在10万以上，高级HTML前端工程师年薪达30—50万，很多企业对于与web前端相关的技术职位更是求贤若渴。

script 标签 async defer 总结

2021年12月17日

最近再优化网站，结果提示：下面的关键请求链显示了以高优先级加载的资源。请考虑缩短链长、缩减资源的下载文件大小，或者推迟下载不必要的资源，从而提高网页加载速度。对于 script 资源，我们使用 async defer 的方式加载资源，在 script 标签中 async 和 defer 具体作用是什么呢？在现代网站中，脚本通常比 HTML“更重”：它们的下载量更大，处理时间也更长。当浏览器加载 H...

Safari 浏览器不支持 Webp 的解决方案

2021年11月25日

最近优化网站的时候，图片转换成 WebP 的格式，具体转换过程参考这篇文章：WebP Windows 使用总结，WebP 详细信息参考这篇文章：浓缩的精华！从零开始带你认识最新的图片格式WEBP但是在测试的时候，iPhone 6S 自带 Safari 浏览器图片无法显示，经过查询 WebP 截至今天，Safari 不支持该格式。所以才会出现图片无法显示的问题。解决方案：<picture> <so...

广告代码

2021年11月24日

Uncaught TypeError: Cannot read properties of undefined (reading 'msie')

2021年11月24日

最近在使用 jquery.fancybox-1.3.4 的时候出现了如下错误：Uncaught TypeError: Cannot read properties of undefined (reading 'msie')出现问题的原因：$.browser jQuery 1.9 开始，该方法已被删除，可以参考这篇文章：jQuery.browser() removed解决方案：使用如下代码可以解决这...

使用 Puppeteer 揭示 Headless 浏览器的强大功能

2021年10月29日

作为一名 Web 开发人员，我每天有半天时间在浏览器上。浏览器对我来说总是我能看到的东西，包括所有布局、表单、开发人员工具等。当我了解Headless 浏览器时，我开始深入研究它。事实证明，这是一件如此强大的事情，以至于我这些年来都没有意识到。它让我如此着迷，以至于它把我带到这里做一些写作。但在继续之前，让我们知道什么是无头浏览器；无头浏览器是一种没有图形用户界面的网络浏览器。它在类似于流行的 W...

纯 Javascript 操作 DOM class

2021年09月29日

在页面上使用纯 Javascript 操作 class 属性，具体示例如下：增加 class 属性：var testarray = document.getElementsByClassName("currentclass"); for(var i = 0; i < testarray.length; i++) { testarray[i].className += " classt...

纯 Javascript 等效 JQuery $('document').ready(function(){});

2021年09月29日

最近使用纯 Javascript 编写代码，使用惯了 JQuery 反而不习惯使用纯 Javascript 编写代码。在 JQuery 中页面加载完成之后的代码一般如下：$('document').ready(function(){});在纯 Javascript 中如果要实现相同功能，具体代码如下：document.addEventListener("DOMContentLoaded", fun...

纯 Javascript $().bind('click',function(){}) 实现方法

2021年09月29日

最近由于没有引入 JQuery 只能使用纯 Javascript 实现点击事件监听。下面是使用纯 Javascript 实现点击事件监听代码：<a href="doc.html" id="some-id">click here</a>Javascript 代码：function myFunc(eventObj) { // ... } var myElement = document....