笔记

IT小棉羊

IT小棉羊|script标签中defer和async属性的区别

发布于 4 天前 浏览:97 类型:原创 - 教程 分类:性能优化 举报

这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记。  向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲 ...

script标签中defer和async属性的区别
IT小棉羊

IT小棉羊|script标签中defer和async属性的区别

发布于 4 天前 浏览:45 类型:原创 - 教程 分类:性能优化 举报

这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记。  向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲 ...

之前在学习时经常来前端网学习也偶尔记记笔记,但是上班后就没怎么来了,因为上班的工作不要敲代码,懂得理论知识就好。作为我最喜欢的学习平台,我还是想厚着脸皮来这里分享一下工作过程遇到的一些问题,大神请不要笑话我,因为现在想想当时的哪些问题很是简单(当时觉得好难啊)QQ在线聊天的功能是怎么实现的?我们公 ...

七牛云新推出的图片瘦身功能是做什么的?打开七牛云的「数据处理」中的「图片瘦身」功能,在图片受到访问时,能够实时对图片进行瘦身,在保证分辨率和画质不变的情况下,可以将图片最高缩小80%。当「图片瘦身」和七牛云CDN网络加速无缝衔接,就能够实现图片加载速度的提升,同时有效节省流量成本。图片瘦身与CDN的 ...

csw1995

csw1995|选择器效率问题摘录

发布于 7 天前 浏览:75 类型:原创 - 随笔 分类:性能优化 举报

css越具体的关键选择器,其性能越高”选择器有一个固有的效率,我们来看SteveSouders给排的一个顺序:1.id选择器(#myid)2.类选择器(.myclassname)&n ...

大大大大糖糖

大大大大糖糖|前端url写法

发布于 2017-02-16 13:23:47 浏览:312 类型:原创 - 随笔 分类:性能优化 举报

刚才大神领导告诉我个玄妙的写法啊啊啊啊啊啊href="//cdn.bootcss.com/jquery/3.1.1/core.js"可以自适应解析为http://cdn.bootcss.com/jquery/3.1.1/core.js或https://cdn.bootcss.com/jquery/3.1.1/core.js ...

郭兴旺

郭兴旺|webpack入门教程

发布于 2017-02-15 19:27:48 浏览:235 类型:原创 - 教程 分类:性能优化 举报

webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中可以看出,Webpack可以将多种静态资源js、css、less装换成一个静态文件,减少了页面的请求。一、安装Webpack在安装Webpack前,本地环境需要支持node.js。&nbs ...

郭兴旺

郭兴旺|webpack入门教程

发布于 2017-02-15 19:25:48 浏览:143 类型:原创 - 教程 分类:性能优化 举报

webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中可以看出,Webpack可以将多种静态资源js、css、less装换成一个静态文件,减少了页面的请求。一、安装Webpack在安装Webpack前,本地环境需要支持node.js。&nbs ...

webpack入门教程
Joudee

Joudee|一行代码数组去重

发布于 2017-02-14 10:42:43 浏览:229 类型:原创 - 随笔 分类:性能优化 举报

突然看到楼下有写数组去重的,我来教你一行代码搞定数组去重。javascript代码效果预览vararray=Array.from(newSet([1,2,3,3]));//array的值就是[1,2,3]set是ES6里面新增的一个对象,想要在普通的html中使用,引入babel就可以直接用了。(地址:<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-stand ...

Joudee

Joudee|整理一下自己目前用到的网页性能优化(一)

发布于 2017-02-14 10:30:32 浏览:350 类型:原创 - 随笔 分类:性能优化 举报

诸如js、css文件位置的问题我就不多说了,那个大家都知道。这里我主要讲一下细节方面的优化。不足的估计暂时没想起来,后面再补充。1、图片的优化,因为图片src的加载是异步的,所以如果你能提前之后图片的宽度和高度,不妨先预设一下,这样页面就不会出现闪的情况。2、js方面,我建议每个都使用匿名函数包裹起来,就像这 ...

Lin_Grady

Lin_Grady|js实现数组去重方法及效率對比

发布于 2017-02-13 21:46:50 浏览:130 类型:原创 - 教程 分类:性能优化 举报

其實網上搜索這些方法一堆堆的,之所以還來寫一遍主要是因爲自己習慣一種之後就忘了其他方法怎麽實現,就寫一寫總結一下,順便做個測試看看哪個效率最高,爲了更好展示效果,我會先總結認爲比較好的方法,後面統一測試。(溫馨提示:下文衹是爲了簡便,一般情況下不建議寫在原型上,容易污染全局)一,通過尋找對象屬性j ...

当你在前端网“打笔记”时,在编辑区输入50个字以上后,你就可以点击编辑区上边的“<>”,在弹出的弹框里(不是编辑区里)输入你要运行的代码,然后点击“插入”即可。当你还需要在你要运行的代码中插入本地电脑中的图片或附件,那么你该怎么做呢?这里以插入图片为例,特作说明。(1)将图片上传至前端网:左单击编辑区域 ...

zsw050202

zsw050202|前端小白如何进行网站性能优化

发布于 2017-02-07 12:09:32 浏览:359 类型:原创 - 随笔 分类:性能优化 举报

作为一个刚入前端开发的小白来说,网站的性能优化似乎不是自己能做的事情。自认为写好静态页面和动态效果就认为完成了自己的工作,我也看过不少关于性能优化的文章总结的很全面,但是作为一个小白在网站优化上能做哪些力所能及的事情呢?我从三个大的方面进行解析:1.网页的加载方面;2.利用浏 ...

n76011299

n76011299|Repain(Painting)/Reflow(Layout)

发布于 2017-02-03 15:27:32 浏览:87 类型:原创 - 随笔 分类:性能优化 举报

绘制:当color、background-color、visiblity、outline等与视觉相关的样式属性值被更新时触发绘制过程。在绘制过程中由于要重计算元素的视觉信息,所以会降低页面加载性能。在WebKit引擎中把绘制过程称为Painting过程,在Gecko引擎中把绘制过程称为Repaint过程。布局:当窗口尺寸被修改(resize),发生滚动操作,或position ...

木上有水

木上有水|彻底弄懂HTTP缓存机制及原理(白话文)

发布于 2017-01-23 17:28:06 浏览:8402 类型:原创 - 教程 分类:性能优化 举报

伪*前言一直想总结整理一下关于前端缓存相关的内容,希望形成一个系列文章,本篇是第一篇,主要讲述HTTP缓存机制。系列文章:1.【前端缓存--HTTP缓存机制】简单介绍浏览器和服务器是基于什么规则来实现缓存的2.【前端缓存--用户行为对缓存的影响】浏览器前进,后退,刷新等对缓存的影响,以及如何通过前端代码降低用户 ...

彻底弄懂HTTP缓存机制及原理(白话文)
走火爱上鱼

走火爱上鱼|项目实战经验(2)

发布于 2017-01-20 22:09:27 浏览:1634 类型:原创 - 随笔 分类:性能优化 举报

唯妮海购这个项目终于在今天上线了。仅以此文记录一下这周开发遇到的坑1.WEBP先来2个链接一个是介绍webp的前世今生,另一个是介绍webp的兼容性的webp前世今身webp兼容性由于我们商城商品有3000多个所以有很多图片,这次先把一个介绍页面的图片替换成webp的。对了,一般的webp都要配合懒加载,这样才有时间去判断。data ...

tony0522

tony0522|Tiny-loader 好用的资源加载器

发布于 2017-01-16 21:43:31 浏览:202 类型:转载 - 随笔 分类:性能优化 举报

(具体见电脑笔记)概述在前端性能优化中,我们会压缩静态文件,懒加载图片,合并请求,来加快页面打开速度。当这些都做完以后,前端性能优化仿佛进入了一个瓶颈,所有的资源都已经最合理化加载了。其实,仔细观察静态资源文件,会发现许多文件我们并不需要在页面一开始就下载它们。这时候,如果有个组件,帮助我根据优先级 ...

劲秋风

劲秋风|平时说的带宽、宽带、流量、网速到底是什么?

发布于 2017-01-15 13:35:09 浏览:314 类型:原创 - 随笔 分类:性能优化 举报

带宽是什么在电子学领域里,表带宽是用来描述频带宽度的。但是在数字传输方面,也常用带宽来衡量传输数据的能力。用它来表示单位时间内(一般以“秒”为单位)传输数据容量的大小,表示吞吐数据的能力。这也意味着,宽的带宽每秒钟可以传输更多的数据。所以我们一般也将“带宽”称为“数据传输率”。上网的时候,总想知道 ...

greenhand

greenhand|BigPipe学习研究

发布于 2017-01-12 17:21:19 浏览:167 类型:原创 - 随笔 分类:性能优化 举报

BigPipe学习研究1.技术背景FaceBook页面加载技术试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6秒;同时另外一个网站提供了相似的服务,但响应时间只需3秒,那么你会如何选择呢?数据表明,如果用户打开一个网站,等待3~4秒还没有任何反应,他们会变得急躁,焦虑,抱怨,甚至关闭网页并且不 ...

LeslieHe

LeslieHe|个人记录 Grunt配置 压缩css js 图片

发布于 2017-01-10 10:30:35 浏览:165 类型:原创 - 随笔 分类:性能优化 举报

个人记录JSjavascript代码效果预览/***Createdbyleslieheon2016/12/14.*///包装函数module.exports=function(grunt){//任务配置,所有插件的配置信息grunt.initConfig({//获取package.json的信息pkg:grunt.file.readJSON('package.json'),//自动化压缩 ...