前端

写给后端程序员的前端开发流程与正确姿势.

写给后端程序员的前端开发流程与正确姿势.

关键词:node.js,npm,webpack,laravel mix,package.json,js代码压缩.

一直以来,后端程序员可能出于对前端的不太熟悉,尤其对于现代的前端工程化更不太熟悉.一看到nodejs,npm等名词就发懵.但后端程序员在实践中还是多多少少会接触前端的.可能你需要修改别人的前端代码,或自己开发前端代码(您可能是全栈程序员了).

想必你修改或写前端代码,也和我以前一样,直接从网上找模板(包括html,css.js)修改成自己样式.或自己从头写html.css.js.

不管是哪种类型,你一般是直接修改Html页面里引入的css.js吧:).

你可能也有些困惑 ,怎么别人的js代码看着像加密过似的,不知如何下手修改?

而你自己从头写的css,js则会直接被引入到Html页面里.

css,js代码里有一些注释,还有一些空格,空行等内容 ,直接在html页里引用是其实是没有经过压缩(去空格,去空行,去注释)的代码.会加大网络传输量,导致加载会慢一些.

而且,你写的js.没有经过压缩(去空格,注释,变量,函数重命名为短名称等),导致别人可能会偷盗你的代码.

如果你压缩了js后,再发布你的代码 ,而你的js看起来像经过加密一样,别人也基本看不懂你的代码了.

而你要做的就是开发代码与发布代码相分离.

本教程教你使用laravel-mix进行正确前端开发(注:laravel-mix最初是用于php框架laravel的前端资源编译工作 ,现在可用于任何语言的任何前端项目).

 

你项目的目录结构应该如下:

my-app/

----------index.html

-----------src/

----------------app.css

----------------app.js

-----------dist/

-----------------app.js

-----------------app.css

 

其中src为源码目录或开发目录,…

                    

静态网站如何启用数据库查询

作者演示静态网站(比如 GitHub Pages)如何通过 SQLite 数据库,实现查询功能,完全不需要后台脚本。

这种操作的实现原理有两个:一是 SQLite 数据库以页为单位存储数据,每页默认是 4KB,可以按页读取数据;二是前端可以用 sql.js 模拟一个内存文件系统,从而实现按页读取文件。

I was writing a tiny website to display statistics of how much sponsored content a Youtube creator has over time when I noticed that I often write a small

        

如何只使用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 规则树合并在一起生成渲染树
            

2020全网最全前端业务安全综述

前言

上一篇面试总结中其实埋了很多坑,做到点到为止,但是坑还是需要埋的,今天这篇文章就是埋第一个坑。上篇总结中就有一个题目

33.能说一下你项目中遇到了哪些安全问题么,一般都是怎么解决的?

xss、csrf、爬虫、薅羊毛等安全问题传输加密、接口加签、环境变量、token、输入校验等

那么前端平时开发中涉及到哪些安全问题呢,又都是怎么解决的呢,本文将一网打尽,同时建议各大中小公司,能够在公司内部实施的安全措施都应该实施起来。…