笔记

走火爱上鱼

走火爱上鱼|唯妮海购——开发经验(2)

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

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

tony0522

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

发布于 6 天前 浏览:103 类型:转载 - 随笔 分类:性能优化 举报

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

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

greenhand

greenhand|BigPipe学习研究

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

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

LeslieHe

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

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

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

走火爱上鱼

走火爱上鱼|唯妮海购webapp-开发经验

发布于 2017-01-06 17:58:56 浏览:965 类型:原创 - 随笔 分类:性能优化 举报

1.分享QQ好友商品详情页有一个需求就是分享商品链接到qq好友,对于这种需求果断百度,很快就找到了一段分享的js,还真能用,不过,分享到qq空间,微博这些都正常,可是分享到QQ好友的貌似有点不正常,比如移动端分享到qq好友打开的是PC端的页面,更加不对的是分享给qq好友,对面QQ里面显示的却是来自QQ的分享,我想要分享 ...

yuanoook

yuanoook|Reliable message communication within WebSocket.

发布于 2017-01-04 19:32:38 浏览:81 类型:原创 - 随笔 分类:性能优化 举报

##WebSocketlookspretty,butIdon'tuseitnow.Totransfermessagesbetweenclientsandserver,WebSocketismoreefficientandfasterthannormalHTTP.But,WebSocketisunreliable,youdon'tknowanythingiftheclientsmissedsomemessagesbecausetheconnectionwasbrokeninawhile.Howab ...

可爱的宝贝

可爱的宝贝|2016 年总结 ,2017年目标

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

2016年已经结束,做了九个月的前端,自己写了四五个月的网页+动效,入职一家小公司,学会了隐忍,知道自己身上的不足,急可以,但是不能表示的很急,更不能表现的很明显。做一个淡定姐。2017年开始了,要做的事情有:减肥,准备4月份要去考试的科目,一月份的入学报名。完成公司的学校项目实训,今年可以去 ...

wuguide

wuguide|关于前端的一些优化

发布于 2016-12-21 17:55:45 浏览:478 类型:原创 - 随笔 分类:性能优化 举报

提高网站速度的6种网站前端优化方法最近有几个同事开通了个人博客,但却抱怨说因为的买的虚拟空间,所以个人博客网站打开速度很慢。对于这种现象,按照一般的情况来看,一个网站的访问打开速度的快与慢,全是看这个网站使用的空间配置,要是这个空间主机的配置不错,那么你的网站访问速度就会很快;相反,要是你的空间主 ...

韩秀利

韩秀利|限制听课次数

发布于 2016-12-20 17:37:33 浏览:204 类型:原创 - 随笔 分类:性能优化 举报

<script>vartimer=null;vartrycount=0;varmyvideo=null;varvid=<?phpecho$id;?>;functiongetvideo(){trycount++;myvideo=document.getElementsByTagName("vide ...

hanhui_zhu

hanhui_zhu|ES6+Typescript+gulp构建前端代码

发布于 2016-12-17 11:21:49 浏览:188 类型:原创 - 随笔 分类:性能优化 举报

目前支持ES6写法的前端浏览器不多。想用ES6的同学可以看看。gulp:代码转换,打包typescript:ES6+,type思想:配置gulp文件,把用ts写的src文件,转成可以浏览器可以阅读的普通ES5/ES3文件步骤:npminstall-ggulp-cli安装gulp指令&n ...

lgl

lgl|浏览器重排与重绘优化

发布于 2016-12-16 10:03:46 浏览:160 类型:原创 - 教程 分类:性能优化 举报

一、html页面的呈现流程1.浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。2.浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体,在解析的过程 ...

1801341373

1801341373|网上看到的各种浏览器兼容效果

发布于 2016-12-14 11:05:00 浏览:339 类型:原创 - 随笔 分类:性能优化 举报

可以用不同的浏览器打开预览效果html代码效果预览<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312"><head><metahttp-equiv=Content-Typecontent="text/html;charset=utf-8"/ ...

小杨同学

小杨同学|求助,麻烦大家了。

发布于 2016-12-13 13:21:12 浏览:282 类型:原创 - 随笔 分类:性能优化 举报

这几天在弄兼容的东西,有两个问题弄到现在还没弄出来,所以来求助一下大家。html代码效果预览.button_margin{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./../img/pay.png',sizingMethod='scale');height:35px;margin-top:45px;background:#F09723url('./../img/pay.png')37pxcenterno-re ...

zhuoyuansheng

zhuoyuansheng|HTML img刷新图片加载问题

发布于 2016-12-07 22:05:04 浏览:883 类型:原创 - 随笔 分类:性能优化 举报

后台上传图片,发现网页并没有显示新图片而是经过多次刷新加载才可以出来,后经过分析发现是地址相同第二次改变imgsrc属性的时候图片未发生改变,浏览器第二次不会去请求服务器。解决办法:在修改img的src属性的时候加上一个随机数即可,让浏览器以为每次请求的服务都不同.image.attr('src',data.message+'?'+Math.ra ...

babe

babe|gulp从安装到使用

发布于 2016-12-07 14:40:32 浏览:208 类型:原创 - 随笔 分类:性能优化 举报

首先介绍下npm命令1、-g全局安装2、-save将保存配置信息至package.json3、-dev保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点4、使用npm安装插件:npminstall<name>[-g][--save-dev]ps:name表示插件名称5、使用npm卸载插件:npmuninstall<name>[-g][--save-dev ...

gulp从安装到使用
baohuse

baohuse|less的小试牛刀

发布于 2016-12-02 21:04:30 浏览:285 类型:原创 - 随笔 分类:性能优化 举报

1.定义:什么是CSS预编译处理器?css预编译处理器就是把css编写按照编程语言()的思维习惯来编写的一个处理模式a.目标css&nbs ...

Jason__Zhou

Jason__Zhou|本地存储js和css文件

发布于 2016-11-28 10:49:08 浏览:421 类型:原创 - 随笔 分类:性能优化 举报

往往我们在许多项目中都会使用许多第三方的插件和库(比如:jquerybootstrap等),还有我们自己所写的js文件和css文件,当一个项目的js和css文件大到一定程度之后,用户每次打开网页都会重新请求http,向后台请求这些文件,虽然浏览器有一定的缓存能力,但是当我们所使用的js和css文件过多的时候也会造成http请求数目的增多 ...

本地存储js和css文件

webpack的使用目录:main.htmlsrc>react.min.js和main.js1.先生成package.json文件npminit2.全局安装webpacknpminstall-gwebpack3.新建一个webpack.config.js文件varwebpack=require('webpack');varHtmlWebpackPlugin=require('html-webpack-plugin');//生成html的一个插件varExtractTextPlugi ...

tony0522

tony0522|什么是WebPack,为什么要使用它?

发布于 2016-11-19 10:56:37 浏览:536 类型:原创 - 教程 分类:性能优化 举报

1、什么是WebpackWebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。2、为什要使用WebPack今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一 ...

什么是WebPack,为什么要使用它?