前端

编写灵活、稳定、高质量的前端代码的规范

虽然现在前端很多都已经成为SPA(单页面应用)开发,或许连渲染的html都是自动生成的.但是归根结底,还是html和css,必要时候我们还是需要好好了解这些基础的开发规范
当然这都是基础性的规范,和公司规范的并不冲突.你也可以当作课外知识阅读～

HTML

一、唯一定律

无论有多少人共同参与同一项目，一定要确保每一行代码都像是唯一个人编写的。

Read More

前端

异步加载script,提高前端性能(defer和async属性的区别)

一、异步加载script的好处

为了加快首屏响应速度,前端会采用代码切割、按需加载等方式优化性能。异步加载script也是一种前端优化的手段。
就好比如果我的页面其中一个功能需要打开地图,但是地图的js插件包是非常大的,而如果用户不用地图功能的时候,我们当然不能再给它加载js地图包,白白让他多花等待时间岂不是很冤枉!于是我们可以动态插入script,当用户点击了某个按钮的时候,再新建script标签,引入地图js资源。
下面介绍下异步加载script的几种方式。

Read More

前端

前端单页面富应用(SPA)的实现

一、 什么是单页面富应用?

单页面应用:Single Page Application
概念:
Web应用即使不刷新也在不同的页面间切换,解决浏览器前进、后退等机制被破坏等问题。并且页面访问会被浏览器保存。
实现方法:
1.Node+Html5实现
2.React/Vue等MVVM框架

Read More

前端

前端浏览器的两种缓存协商缓存和强缓存

1.浏览器缓存机制

浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。
浏览器缓存的优点有：
1.减少了冗余的数据传输，节省了网费
2.减少了服务器的负担，大大提升了网站的性能
3.加快了客户端加载网页的速度

Read More

前端

前端简单实现校招笔试'作弊监听'功能

一、 监听你的页面活动

最近校招笔试如火如荼地开展。各种小心思都浮上来了:”我就查一道”.
小心翼翼按了一下tab切换(mac用三爪)Document.visibilityState开始工作了.”监测到你切换页面,超过xx次将影响你的成绩(希望你自重)”

二、 visibilityState

值 描述
visible 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.
hidden 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’
prerender 页面此时正在渲染中, 文档只能从此状态开始，永远不能从其他值变为此状态.
unloaded 页面从内存中卸载清除
当此属性的值改变时, 会递交 visibilitychange 事件给Document.

Read More

前端

要想成为前端大神，那些你不得不知晓的web前端命名规范

一、Web语义化

1.1 H5的语义化

对于经验资深的前端er，在给web布局时，相信都会很注重标签和命名的规范。尤其是随着html5的普及发展，更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签：header、nav、main、aside、footer、section、article等等。那么对于web语义化，有什么优势呢？

1.2 语义化优势

1.可以让人一目了然代码结构块，对于项目的维护或者优化都是非常有意义的。
2.语义化能提高页面SEO。如：<header></header>可以很好的代替传统的<div id="header"></div>。

Read More

前端

前端chrome浏览器调试技巧

一、前言

转载博主说:初学者仅仅掌握了alert、console这些基本的调试方法。
我刚自学前端初期的时候,也是只用这种方法调试,天真地以后所有调试都可以通过console解决。后面去公司实习,看大佬们调试页面,这边打个断点,那边记录一下,马上就把问题定位出来了。确实,学会浏览器调试工具真的能大大提高自己的工作效率,尤其是在大项目的处理过程中。

Read More

前端

前端调用后端接口下载excel文件的几种方式

今天有一个导出相应数据为excel表的需求。后端的接口返回一个数据流，一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax的安全性问题导致无法下载。下面列觉两种我测试成功的方式:

1.

1
window.location.href = '接口地址'

含义:当前页面打开URL页面.
和在浏览器输入接口地址一样,可以下载excel文件.但是缺点是无法执行POST请求

Read More

前端

一行css解决图片统一大小后的拉伸问题

先来个实战

1. 测试案例

需求: 要求表情库里所有表情包大小都固定
实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。例如:

1
2
3
4
5
6
<body>
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    ....
</body>
1
2
3
4
5
img{
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

效果图

Read More

前端

前端性能优化之重排和重绘

一、重排 & 重绘

有经验的大佬对这个概念一定不会陌生，“浏览器输入URL发生了什么”。估计大家已经烂熟于心了，从计算机网络到JS引擎，一路飞奔到浏览器渲染引擎。 经验越多就能理解的越深。
浏览器下载完页面所有的资源后，就要开始构建DOM树，与此同时还会构建渲染树(Render Tree)。（其实在构建渲染树之前，和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树）
DOM树：表示页面的结构
渲染树：表示页面的节点如何显示

Read More