客户端 一、减少HTTP请求数 1、合并JavaScript、CSS等文件 2、使用CSS Sprite：将背景图片合并成一个文件，通过background-image和background-position控制显示 3、字体图标 4、将请求划分到不同的域名上 二、减少DNS查询 用户输入URL后， ...
分类：
其他好文 时间：
2017-12-01 13:31:20
阅读次数：
171
作者：刘轶斌，腾讯应用开发 工程师商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。原文链接：http://wetest.qq.com/lab/view/345.html 一、如何优化 用户在访问网页时， 最直观的感受就是页面内容出来的速度，我们要做的优化工作， 也主要是为了这个目标。那 ...
分类：
Web程序 时间：
2017-11-27 23:38:38
阅读次数：
246
前言 在刚入门前端的时候，我们并不清楚前端有工具可以帮我们自动化打包压缩文件，当时只关注能实现功能就可以了，也不太在意前端性能优化的问题，随着项目功能的复杂，项目也变得越来越大，页面的执行速度也开始变慢，因此我们认识到了前端优化的重要性，但是之前的压缩打包都是需要我们自己手动执行或者去直接转化的网站 ...
分类：
其他好文 时间：
2017-11-25 19:19:10
阅读次数：
103
用IE访问被测网站（我的是IE11，EDGE浏览器相同），定位到你要测试的动作所在页面或被测页面的前一页。按F12调出开发人员工具，其它的功能我就不介绍了，直接切换到性能选项卡。 根据提示按快捷键ctrl+E或点击左上角的开始按钮进行分析。 接着在被测页面做操作，这里我的操作是打开一个列表，因为系统 ...
分类：
Web程序 时间：
2017-11-20 13:24:53
阅读次数：
282
用chrome访问被测网站，定位到你要测试的动作所在页面或被测页面的前一页。按F12调出开发人员工具，其它的功能我就不介绍了，直接切换到性能选项卡Profiles。 点击start，生成ProFile文件，操作界面。 最后点击stop，生成报告，可以产看具体消耗的时间 ...
分类：
Web程序 时间：
2017-11-20 13:06:18
阅读次数：
190
预解析的实现： 1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" /> 2. 在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefe ...
分类：
其他好文 时间：
2017-11-14 14:42:24
阅读次数：
146
1em=16px(但不完全是) em会继承父元素的字体大小。ie 部分浏览器不支持em。 rem继承根元素的字体大小html。 px和rem vue里面用jq只能在mounted里面或者updata里面才可以原因是：dom已经挂载。 什么是web语义化有什么好处？ Web语义化是指使用语义恰当的标签 ...
分类：
Web程序 时间：
2017-11-12 20:13:35
阅读次数：
242
1.把前端最常用的资源css、js存在本地1.1 前端缓存技术SessionStorage 优点：临时存储神器，关闭页面标签自动回收，不可以跨页面交互。 取值的时候有两种方法，一种是用sessionStorage.getItem("键名")，一种是直接取对象的方法（sessionStorage.键名 ...
分类：
其他好文 时间：
2017-11-08 20:08:38
阅读次数：
143
前两天遇到一个前端性能相关的bug，感觉还挺典型的，整理了一下解决过程和思路，写下来分享给大家。 场景是这样的，有一个答题的界面，可以播放音频、填空、提交答案，界面是长这个样子的： 看起来还挺简单吧，但是我们在手机上跑的时候，却遇到了以下问题： 1. 填完空后，提交按钮会由灰色变为蓝色（可提交状态） ...
分类：
其他好文 时间：
2017-11-02 14:32:19
阅读次数：
260
浏览器渲染的工作流程 浏览器的工作原理。以Webkit引擎的工作流程为例，浏览器加载一个HTML页面后进行如下操作 解析HTML【遇到<img>标签加载图片】 —> 构建DOM树 加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树 加载javascript —> 执行javas ...
分类：
其他好文 时间：
2017-10-31 20:15:42
阅读次数：
169
