WEB页面加载优化-JS、CSS等多静态文件合并

@RequestMapping(value="/merge",method={RequestMethod.GET,RequestMethod.POST})
public void getJS(HttpServletRequest request, HttpServletResponse response){
    PrintWriter writer = null;
    String fileNames = request.getParameter("fileNames");
    try {
        String jsContent = getStaticResource(fileNames);
        response.reset();
        response.setBufferSize(2048);
        response.setCharacterEncoding("utf-8");
        response.setContentLength(jsContent.getBytes("utf-8").length);
        response.setContentType("application/javascript");
        if(fileNames != null && !"".equals(fileNames)) {
            String[] fileNamesArr = fileNames.split(",");
            if(fileNamesArr!=null && fileNamesArr.length>0){
                if(fileNamesArr[0].endsWith(".css") || fileNamesArr[0].endsWith(".CSS")){
                    response.setContentType("text/css");
                }
            }
        }
        response.setStatus(HttpServletResponse.SC_OK);
        writer = response.getWriter();
        writer.print(jsContent);
        writer.flush();
    } catch (Exception e) {
        System.out.println("获取js文件失败:"+e.getMessage());
        try {
            response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR,e.getMessage());
        } catch (IOException e1) {
            System.out.println(e1.getMessage());
        }
    }finally{
        if(writer != null){
            writer.close();
        }
    }
}

//合并静态文件
private  String getStaticResource(String fileNames) {
    if(fileNames != null && !"".equals(fileNames)){
        String[] fileNamesArr = fileNames.split(",");
        StringBuffer sb_result = new StringBuffer(";");
        if(fileNamesArr != null && fileNamesArr.length>0){
            for(String fileName:fileNamesArr){
                //读取文件
                String fileContent = null;
                try{
                    InputStream is = new FileInputStream(Paths.get(staticpath, fileName).toFile());
                    ByteArrayOutputStream baos=new ByteArrayOutputStream();
                    byte[] buffer = new byte[2048];
                    int len = 0;
                    while((len=is.read(buffer))!=-1){
                        baos.write(buffer, 0, len);
                    }
                    is.close();
                    baos.close();
                    fileContent = baos.toString();
                }catch(Exception e){
                    e.printStackTrace();
                }
                if(StringUtils.isEmpty(fileContent)){
                    continue;
                }
                sb_result.append(fileContent+";");
            }
            return sb_result.toString();
        }else{
            return ";";
        }
    }else{
        return ";";
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web H5页面的性能优化可以从以下几个方面入手: 1. 减少HTTP请求数量:减少页面的HTTP请求可以显著提高性能。可以通过合并CSSJS文件、压缩图片等方式,减少HTTP请求数量。 2. 压缩文件大小:减小HTML、CSSJS文件的大小可以减少加载时间,提高性能。可以使用压缩工具压缩这些文件,减小文件大小。 3. 使用缓存:将静态资源(例如图片、CSSJS等)缓存在本地,可以大幅度减少HTTP请求。可以通过设置HTTP响应头的缓存策略,让客户端缓存这些静态资源。 4. 优化图片:将图片压缩到合理的大小,并使用适当的图片格式,可以减少图片的加载时间。例如使用JPEG格式来存储照片,使用PNG格式来存储图形。 5. 使用CDN:使用CDN可以加速页面加载速度。CDN会将静态资源缓存在全球各地的服务器上,当用户请求这些资源时,可以从离用户最近的服务器获取。 6. 延迟加载:将不必要的资源(例如图片、视频等)延迟加载,可以减少页面加载时间。可以使用LazyLoad等工具来实现延迟加载。 7. 减少DOM操作:减少DOM操作可以减少页面的重绘和回流,提高性能。可以将多次DOM操作合并为一次操作,使用事件委托等方式来减少DOM操作。 总之,Web H5页面的性能优化需要从多个方面入手,通过以上的方法可以使页面加载速度更快,提高用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值